layout-blocks - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

dist/components/Box/index.d.ts

@@ -6,2 +6,3 @@ import { ReactNode } from 'react';
     children?: ReactNode;
+    /** HTML element to render */
     as?: keyof JSX.IntrinsicElements;
@@ -8,0 +9,0 @@ }

dist/components/Breakout/index.d.ts

 import { ReactNode } from 'react';
 interface Props {
     children?: ReactNode;
+    /** HTML element to render */
     as?: keyof JSX.IntrinsicElements;
@@ -5,0 +6,0 @@ }

dist/components/Center/index.d.ts

@@ -12,2 +12,3 @@ import { ReactNode } from 'react';
     children?: ReactNode;
+    /** HTML element to render */
     as?: keyof JSX.IntrinsicElements;
@@ -14,0 +15,0 @@ }

dist/components/Cover/index.d.ts

@@ -12,2 +12,3 @@ import { ReactNode } from 'react';
     children?: ReactNode;
+    /** HTML element to render */
     as?: keyof JSX.IntrinsicElements;
@@ -14,0 +15,0 @@ }

dist/components/Frame/index.d.ts

@@ -6,2 +6,3 @@ import { ReactNode } from 'react';
     children?: ReactNode;
+    /** HTML element to render */
     as?: keyof JSX.IntrinsicElements;
@@ -8,0 +9,0 @@ }

dist/components/Grid/index.d.ts

@@ -8,2 +8,3 @@ import { ReactNode } from 'react';
     children?: ReactNode;
+    /** HTML element to render */
     as?: any;
@@ -10,0 +11,0 @@ }

dist/components/Group/index.d.ts

 import { ReactNode } from 'react';
 interface Props {
-    /** Controls padding all around box */
-    align?: string;
-    justify?: string;
+    /** Vertical alignment */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Horizontal alignment */
+    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    /** Space value used for gap between children */
     space?: string;
     children?: ReactNode;
+    /** HTML element to render */
     as?: keyof JSX.IntrinsicElements;
@@ -9,0 +12,0 @@ }

dist/components/Sidebar/index.d.ts

 import { ReactNode } from 'react';
 interface Props {
-    /** Controls padding all around box */
-    side?: string;
+    /** Side to treat as the sidebar */
+    side?: 'left' | 'right';
+    /** Width value to limit the sidebar to in horizontal mode */
     sideWidth?: string | null;
+    /** Percentage value to use as the breakpoint for the element opposite the sidebar */
     contentMin?: string;
+    /** Space between elements (sidebar and content) */
     space?: string;
+    /** Stretch sidebar to match content (and vice versa) */
     stretch?: boolean;
     children?: ReactNode;
+    /** HTML element to render */
     as?: keyof JSX.IntrinsicElements;
@@ -11,0 +16,0 @@ }

dist/components/Stack/index.d.ts

 import { ReactNode } from 'react';
 interface Props {
-    /** Controls padding all around box */
+    /** Recursively apply spacing (for nested stacks) */
     recursive?: boolean;
+    /** Vertical space between child elements */
+    space?: string;
+    /** Split after n children */
     splitAfter?: number;
-    space?: string;
     children?: ReactNode;
+    /** HTML element to render */
     as?: keyof JSX.IntrinsicElements;
@@ -9,0 +12,0 @@ }

dist/index.d.ts

 export { Box } from './components/Box';
+export { Breakout } from './components/Breakout';
 export { Center } from './components/Center';
+export { Container } from './components/Container';
 export { Cover } from './components/Cover';
 export { Frame } from './components/Frame';
-export { Breakout } from './components/Breakout';
 export { Grid } from './components/Grid';
 export { Group } from './components/Group';
-export { Imposter } from './components/Imposter';
+export { Position } from './components/Position';
+export { Reel } from './components/Reel';
 export { Sidebar } from './components/Sidebar';
@@ -10,0 +12,0 @@ export { Spacer } from './components/Spacer';

dist/layout-blocks.cjs.development.js

@@ -53,6 +53,6 @@ 'use strict';
 
-var ApiContext = /*#__PURE__*/React.createContext({});
+var LayoutContext = /*#__PURE__*/React.createContext({});
 
 function useApi(componentName) {
-  var apiFromContext = React.useContext(ApiContext);
+  var apiFromContext = React.useContext(LayoutContext);
   return apiFromContext[componentName];
@@ -151,2 +151,5 @@ }
   var api = reduceApi(defaultApi, contextApi, remainingProps);
+  Object.keys(api).forEach(function (key) {
+    return delete remainingProps[key];
+  });
   var layoutClass = createLayoutClassname(name, api);
@@ -173,3 +176,3 @@ var selector = Tag + "." + layoutClass;
 var defaultApi = {
-  padding: 'var(--s1)'
+  padding: 'var(--space-md)'
 };
@@ -199,3 +202,3 @@ var name = 'box';
 function _templateObject$1() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          box-sizing: content-box;\n          margin-left: auto;\n          margin-right: auto;\n          max-width: ", ";\n          ", "\n          padding-left: ", ";\n          padding-right: ", ";\n          ", "\n        }\n      "]);
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          width: 100vw;\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n      "]);
 
@@ -208,2 +211,29 @@ _templateObject$1 = function _templateObject() {
 }
+var name$1 = 'breakout';
+/**
+ * Breakout layout component
+ */
+
+function Breakout(props) {
+  var _createLayoutConfig = createLayoutConfig({
+    name: name$1,
+    props: props
+  }),
+      children = _createLayoutConfig.children,
+      Tag = _createLayoutConfig.Tag,
+      passedProps = _createLayoutConfig.passedProps,
+      selector = _createLayoutConfig.selector;
+
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$1(), selector), React__default.createElement(Tag, Object.assign({}, passedProps), children));
+}
+
+function _templateObject$2() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          box-sizing: content-box;\n          margin-left: auto;\n          margin-right: auto;\n          max-width: ", ";\n          ", "\n          padding-left: ", ";\n          padding-right: ", ";\n          ", "\n        }\n      "]);
+
+  _templateObject$2 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
 var defaultApi$1 = {
@@ -213,5 +243,5 @@ max: 'var(--measure)',
   gutter: '0',
-  isIntrinsic: false
+  intrinsic: false
 };
-var name$1 = 'center';
+var name$2 = 'center';
 /**
@@ -223,5 +253,5 @@ * Center layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$1),
+    contextApi: useApi(name$2),
     defaultApi: defaultApi$1,
-    name: name$1,
+    name: name$2,
     props: props
@@ -239,9 +269,36 @@ }),
       intrinsic = api.intrinsic;
-  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$1(), selector, max, centerText ? 'text-align: center;' : '', gutter, gutter, intrinsic ? "\n            display:flex;\n            flex-direction: column;\n            align-items: center;\n          " : ''), React__default.createElement(Tag, Object.assign({}, passedProps), children));
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$2(), selector, max, centerText ? 'text-align: center;' : '', gutter, gutter, intrinsic ? "\n            display:flex;\n            flex-direction: column;\n            align-items: center;\n          " : ''), React__default.createElement(Tag, Object.assign({}, passedProps), children));
 }
 
-function _templateObject$2() {
+function _templateObject$3() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          position: relative\n        }\n      "]);
+
+  _templateObject$3 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var name$3 = 'container';
+/**
+ * Container layout component
+ */
+
+function Container(props) {
+  var _createLayoutConfig = createLayoutConfig({
+    name: name$3,
+    props: props
+  }),
+      children = _createLayoutConfig.children,
+      Tag = _createLayoutConfig.Tag,
+      passedProps = _createLayoutConfig.passedProps,
+      selector = _createLayoutConfig.selector;
+
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$3(), selector), React__default.createElement(Tag, Object.assign({}, passedProps), children));
+}
+
+function _templateObject$4() {
   var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          display: flex;\n          flex-direction: column;\n          min-height: ", ";\n          padding: ", ";\n        }\n  \n        ", " > * {\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n  \n        ", " {\n          display: flex;\n          flex-direction: column;\n          min-height: ", ";\n          padding: ", ";\n        }\n  \n        ", " > :first-of-type:not(style) {\n          margin-top: 0;\n        }\n  \n        ", " > :last-of-type:not(style) {\n          margin-bottom: 0;\n        }\n  \n        ", "\n      "]);
 
-  _templateObject$2 = function _templateObject() {
+  _templateObject$4 = function _templateObject() {
     return data;
@@ -254,7 +311,7 @@ };
   centeredIndex: 2,
-  space: 'var(--s1)',
+  space: 'var(--space-md)',
   minHeight: '100vh',
   isPadded: false
 };
-var name$2 = 'cover';
+var name$4 = 'cover';
 /**
@@ -266,5 +323,5 @@ * Cover layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$2),
+    contextApi: useApi(name$4),
     defaultApi: defaultApi$2,
-    name: name$2,
+    name: name$4,
     props: props
@@ -283,9 +340,9 @@ }),
   var childrenCount = React.Children.count(children);
-  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$2(), selector, minHeight, isPadded ? space : '0', selector, space, space, selector, minHeight, isPadded ? space : '0', selector, selector, childrenCount === 1 ? "\n          " + selector + " > :first-of-type:not(style) {\n            margin-top: auto;\n            margin-bottom: auto;\n          }\n        " : "\n        " + selector + " > :nth-of-type(" + centeredIndex + "):not(style) {\n          margin-top: auto;\n          margin-bottom: auto;\n        }\n        "), React__default.createElement(Tag, Object.assign({}, passedProps), children));
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$4(), selector, minHeight, isPadded ? space : '0', selector, space, space, selector, minHeight, isPadded ? space : '0', selector, selector, childrenCount === 1 ? "\n          " + selector + " > :first-of-type:not(style) {\n            margin-top: auto;\n            margin-bottom: auto;\n          }\n        " : "\n        " + selector + " > :nth-of-type(" + centeredIndex + "):not(style) {\n          margin-top: auto;\n          margin-bottom: auto;\n        }\n        "), React__default.createElement(Tag, Object.assign({}, passedProps), children));
 }
 
-function _templateObject$3() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          --n: ", ";\n          --d: ", ";\n          padding-bottom: calc(var(--n) / var(--d) * 100%);\n          position: relative;\n        }\n  \n        ", " > * {\n          overflow: hidden;\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n        }\n  \n        ", " > img,\n        ", " > video {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n      "]);
+function _templateObject$5() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding-bottom: calc(", " / ", " * 100%);\n          position: relative;\n        }\n  \n        ", " > * {\n          overflow: hidden;\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n        }\n  \n        ", " > img,\n        ", " > video {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n      "]);
 
-  _templateObject$3 = function _templateObject() {
+  _templateObject$5 = function _templateObject() {
     return data;
@@ -299,3 +356,3 @@ };
 };
-var name$3 = 'frame';
+var name$5 = 'frame';
 /**
@@ -307,5 +364,5 @@ * Frame layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$3),
+    contextApi: useApi(name$5),
     defaultApi: defaultApi$3,
-    name: name$3,
+    name: name$5,
     props: props
@@ -325,32 +382,5 @@ }),
 
-  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$3(), selector, Number(numerator), Number(denominator), selector, selector, selector), React__default.createElement(Tag, Object.assign({}, passedProps), children));
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$5(), selector, Number(numerator), Number(denominator), selector, selector, selector), React__default.createElement(Tag, Object.assign({}, passedProps), children));
 }
 
-function _templateObject$4() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          width: 100vw;\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n      "]);
-
-  _templateObject$4 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var name$4 = 'breakout';
-/**
- * Breakout layout component
- */
-
-function Breakout(props) {
-  var _createLayoutConfig = createLayoutConfig({
-    name: name$4,
-    props: props
-  }),
-      children = _createLayoutConfig.children,
-      Tag = _createLayoutConfig.Tag,
-      passedProps = _createLayoutConfig.passedProps,
-      selector = _createLayoutConfig.selector;
-
-  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$4(), selector), React__default.createElement(Tag, Object.assign({}, passedProps), children));
-}
-
 var IS_BROWSER = typeof window !== 'undefined';
@@ -406,6 +436,6 @@ /**
 
-function _templateObject$5() {
+function _templateObject$6() {
   var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          display: grid;\n          grid-gap: ", ";\n          grid-template-columns: 100%;\n        }\n  \n        ", ".aboveMin {\n          grid-template-columns: repeat(auto-fill, minmax(", ", 1fr));\n        }\n  \n        @supports (width: min(", ", 100%)) {\n          ", " {\n            grid-template-columns: repeat(auto-fit, minmax(min(", ", 100%), 1fr));\n          }\n        }\n      "]);
 
-  _templateObject$5 = function _templateObject() {
+  _templateObject$6 = function _templateObject() {
     return data;
@@ -418,5 +448,5 @@ };
   min: '250px',
-  space: 'var(--s1)'
+  space: 'var(--space-md)'
 };
-var name$5 = 'grid';
+var name$6 = 'grid';
 /**
@@ -428,5 +458,5 @@ * Grid layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$5),
+    contextApi: useApi(name$6),
     defaultApi: defaultApi$4,
-    name: name$5,
+    name: name$6,
     props: props
@@ -465,3 +495,3 @@ }),
 
-  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$5(), selector, space, selector, min, min, selector, min), React__default.createElement(Tag, Object.assign({}, enhancedProps), children, React__default.createElement("div", {
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$6(), selector, space, selector, min, min, selector, min), React__default.createElement(Tag, Object.assign({}, enhancedProps), children, React__default.createElement("div", {
     ref: childRef
@@ -471,6 +501,6 @@ })));
 
-function _templateObject$6() {
+function _templateObject$7() {
   var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          overflow: hidden;\n        }\n  \n        ", " > * {\n          display: flex;\n          flex-wrap: wrap;\n          justify-content: ", ";\n          align-items: ", ";\n          margin: calc(", " / 2 * -1);\n        }\n  \n        ", " > * > * {\n          margin: calc(", " / 2);\n        }\n      "]);
 
-  _templateObject$6 = function _templateObject() {
+  _templateObject$7 = function _templateObject() {
     return data;
@@ -484,5 +514,5 @@ };
   justify: 'start',
-  space: 'var(--s1)'
+  space: 'var(--space-md)'
 };
-var name$6 = 'group';
+var name$7 = 'group';
 /**
@@ -494,5 +524,5 @@ * Group layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$6),
+    contextApi: useApi(name$7),
     defaultApi: defaultApi$5,
-    name: name$6,
+    name: name$7,
     props: props
@@ -509,9 +539,9 @@ }),
       space = api.space;
-  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$6(), selector, selector, ['start', 'end'].includes(justify) ? "flex-" + justify : justify, ['start', 'end'].includes(align) ? "flex-" + align : align, space, selector, space), React__default.createElement(Tag, Object.assign({}, passedProps), React__default.createElement("div", null, children)));
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$7(), selector, selector, ['start', 'end'].includes(justify) ? "flex-" + justify : justify, ['start', 'end'].includes(align) ? "flex-" + align : align, space, selector, space), React__default.createElement(Tag, Object.assign({}, passedProps), React__default.createElement("div", null, children)));
 }
 
-function _templateObject$7() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          ", " {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            ", "\n            ", "\n          }\n        }\n      "]);
+function _templateObject$8() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          position: absolute;\n          ", "\n          ", "\n          ", "\n        }\n      "]);
 
-  _templateObject$7 = function _templateObject() {
+  _templateObject$8 = function _templateObject() {
     return data;
@@ -524,15 +554,54 @@ };
   breakout: false,
-  margin: '0px',
-  isFixed: false
+  margin: 'var(--space-md)',
+  fixed: false,
+  x: 'center',
+  y: 'center'
 };
-var name$7 = 'imposter';
+
+function generatePinningRules(x, y, margin) {
+  return "\n    " + generateXPinningRules(x, margin) + "\n    " + generateYPinningRules(y, margin) + "\n    " + (x === 'center' && y === 'center' ? "transform: translate(-50%,-50%);" : x === 'center' ? "transform: translateX(-50%);" : y === 'center' ? "transform: translateY(-50%);" : '') + "\n  ";
+}
+
+function generateXPinningRules(x, margin) {
+  if (x === 'left') {
+    return "\n      left: " + margin + ";\n    ";
+  }
+
+  if (x === 'right') {
+    return "\n      right: " + margin + ";\n    ";
+  }
+
+  if (x === 'full') {
+    return "\n      left: " + margin + ";\n      right: " + margin + ";\n    ";
+  }
+
+  return "\n      left: 50%;\n    ";
+}
+
+function generateYPinningRules(y, margin) {
+  if (y === 'top') {
+    return "\n      top: " + margin + ";\n    ";
+  }
+
+  if (y === 'bottom') {
+    return "\n      bottom: " + margin + ";\n    ";
+  }
+
+  if (y === 'full') {
+    return "\n      top: " + margin + ";\n      bottom: " + margin + ";\n    ";
+  }
+
+  return "\n      top: 50%;\n    ";
+}
+
+var name$8 = 'position';
 /**
- * Imposter layout component
+ * Position layout component
  */
 
-function Imposter(props) {
+function Position(props) {
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$7),
+    contextApi: useApi(name$8),
     defaultApi: defaultApi$6,
-    name: name$7,
+    name: name$8,
     props: props
@@ -548,10 +617,12 @@ }),
       margin = api.margin,
-      fixed = api.fixed;
-  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$7(), selector, selector, !breakout ? "\n              max-width: calc(100% - (" + margin + " * 2));\n              max-height: calc(100% - (" + margin + " * 2));\n              overflow: auto;" : '', fixed ? "\n              position: fixed;" : ''), React__default.createElement(Tag, Object.assign({}, passedProps), children));
+      fixed = api.fixed,
+      x = api.x,
+      y = api.y;
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$8(), selector, generatePinningRules(x, y, margin), !breakout ? "\n            max-width: calc(100% - (" + margin + " * 2));\n            max-height: calc(100% - (" + margin + " * 2));\n            overflow: auto;" : '', fixed ? "\n            position: fixed;" : ''), React__default.createElement(Tag, Object.assign({}, passedProps), children));
 }
 
-function _templateObject$8() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          overflow: hidden;\n        }\n  \n        ", " > * {\n          display: flex;\n          flex-wrap: wrap;\n          ", "\n          margin: calc(", " / 2 * -1);\n        }\n  \n        ", " > * > * {\n          margin: calc(", " / 2);\n          ", "\n          flex-grow: 1;\n        }\n  \n        ", " > * > :", ":not(style) {\n          flex-basis: 0;\n          flex-grow: 999;\n          min-width: calc(", " - ", ");\n        }\n      "]);
+function _templateObject$9() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          display: flex;\n          height: ", ";\n          overflow-x: auto;\n          overflow-y: hidden;\n          scrollbar-color: #fff #000;\n        }\n        \n        ", "::-webkit-scrollbar {\n          height: 1rem;\n        }\n        \n        ", "::-webkit-scrollbar-track {\n          background-color: #000;\n        }\n        \n        ", "::-webkit-scrollbar-thumb {\n          background-color: #000;\n          background-image: linear-gradient(#000 0, #000 0.25rem, #fff 0.25rem, #fff 0.75rem, #000 0.75rem);\n        }\n        \n        ", " > * {\n          flex: 0 0 ", ";\n        }\n        \n        \n        ", " > img {\n          height: 100%;\n          flex-basis: auto;\n          width: auto;\n        }\n        \n        ", " > * + * {\n          margin-left: ", ";\n        }\n        \n        ", ".overflowing {\n          padding-bottom: ", ";\n        }\n      "]);
 
-  _templateObject$8 = function _templateObject() {
+  _templateObject$9 = function _templateObject() {
     return data;
@@ -563,9 +634,47 @@ };
 var defaultApi$7 = {
+  itemWidth: 'auto',
+  space: 'var(--space-md)',
+  height: 'auto'
+};
+var name$9 = 'reel';
+/**
+ * Reel layout component
+ */
+
+function Reel(props) {
+  var _createLayoutConfig = createLayoutConfig({
+    contextApi: useApi(name$9),
+    defaultApi: defaultApi$7,
+    name: name$9,
+    props: props
+  }),
+      api = _createLayoutConfig.api,
+      children = _createLayoutConfig.children,
+      Tag = _createLayoutConfig.Tag,
+      passedProps = _createLayoutConfig.passedProps,
+      selector = _createLayoutConfig.selector;
+
+  var itemWidth = api.itemWidth,
+      space = api.space,
+      height = api.height;
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$9(), selector, height, selector, selector, selector, selector, itemWidth, selector, selector, space, selector, space), React__default.createElement(Tag, Object.assign({}, passedProps), React__default.createElement("div", null, children)));
+}
+
+function _templateObject$a() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          overflow: hidden;\n        }\n  \n        ", " > * {\n          display: flex;\n          flex-wrap: wrap;\n          ", "\n          margin: calc(", " / 2 * -1);\n          \n        }\n  \n        ", " > * > * {\n          margin: calc(", " / 2);\n          ", "\n          flex-grow: 1;\n        }\n  \n        ", " > * > :", ":not(style) {\n          flex-basis: 0;\n          flex-grow: 999;\n          min-width: calc(", " - ", ");\n        }\n      "]);
+
+  _templateObject$a = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var defaultApi$8 = {
   side: 'left',
   sideWidth: null,
   contentMin: '50%',
-  space: 'var(--s1)',
-  isStretch: false
+  space: '0',
+  stretch: false
 };
-var name$8 = 'sidebar';
+var name$a = 'sidebar';
 /**
@@ -577,5 +686,5 @@ * Sidebar layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$8),
-    defaultApi: defaultApi$7,
-    name: name$8,
+    contextApi: useApi(name$a),
+    defaultApi: defaultApi$8,
+    name: name$a,
     props: props
@@ -593,10 +702,11 @@ }),
       space = api.space,
-      isStretch = api.isStretch;
-  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$8(), selector, selector, !isStretch ? "align-items: flex-start;" : '', space, selector, space, sideWidth ? "flex-basis: " + sideWidth + ";" : '', selector, side === 'left' ? 'last-of-type' : 'first-of-type', contentMin, space), React__default.createElement(Tag, Object.assign({}, passedProps), React__default.createElement("div", null, children)));
+      stretch = api.stretch;
+  var unitSpace = space === '0' ? '0px' : space;
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$a(), selector, selector, !stretch ? "align-items: flex-start;" : '', unitSpace, selector, unitSpace, sideWidth ? "flex-basis: " + sideWidth + ";" : '', selector, side === 'left' ? 'last-of-type' : 'first-of-type', contentMin, unitSpace), React__default.createElement(Tag, Object.assign({}, passedProps), React__default.createElement("div", null, children)));
 }
 
-function _templateObject$9() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex: 1 0 auto;\n        }\n      "]);
+function _templateObject$b() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex: 1 1 auto;\n        }\n      "]);
 
-  _templateObject$9 = function _templateObject() {
+  _templateObject$b = function _templateObject() {
     return data;
@@ -607,3 +717,3 @@ };
 }
-var name$9 = 'spacer';
+var name$b = 'spacer';
 /**
@@ -615,3 +725,3 @@ * Spacer layout component
   var _createLayoutConfig = createLayoutConfig({
-    name: name$9,
+    name: name$b,
     props: props
@@ -624,9 +734,9 @@ }),
 
-  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$9(), selector), React__default.createElement(Tag, Object.assign({}, passedProps), children));
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$b(), selector), React__default.createElement(Tag, Object.assign({}, passedProps), children));
 }
 
-function _templateObject$a() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n        }\n    \n        ", " ", " *:not(style) ~ *:not(style) {\n          margin-top: ", ";\n        }\n      \n        ", "\n      "]);
+function _templateObject$c() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n        }\n    \n        ", " ", " *:not(style) ~ *:not(style) {\n          margin-top: ", ";\n        }\n\n        ", " > .only-child {\n          height: 100%;\n        }\n\n        ", " > .split-after {\n          margin-bottom: auto;\n        }\n      "]);
 
-  _templateObject$a = function _templateObject() {
+  _templateObject$c = function _templateObject() {
     return data;
@@ -637,8 +747,8 @@ };
 }
-var defaultApi$8 = {
+var defaultApi$9 = {
   recursive: false,
-  splitAfter: null,
-  space: 'var(--s1)'
+  space: 'var(--space-md)',
+  splitAfter: null
 };
-var name$a = 'stack';
+var name$c = 'stack';
 /**
@@ -650,5 +760,5 @@ * Stack layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$a),
-    defaultApi: defaultApi$8,
-    name: name$a,
+    contextApi: useApi(name$c),
+    defaultApi: defaultApi$9,
+    name: name$c,
     props: props
@@ -665,9 +775,31 @@ }),
       splitAfter = api.splitAfter;
-  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$a(), selector, selector, !recursive ? '>' : '', space, splitAfter ? "\n            " + selector + ":only-child {\n            height: 100%;\n          }\n          " + selector + " > :nth-child(" + splitAfter + ") {\n            margin-bottom: auto;\n          }\n        " : ''), React__default.createElement(Tag, Object.assign({}, passedProps), children));
+  var ref = React.useRef(null);
+
+  if (splitAfter) {
+    React.useLayoutEffect(function () {
+      if (ref && ref.current) {
+        Array.from(ref.current.children).filter(function (child) {
+          return child.tagName !== 'STYLE';
+        }).forEach(function (child, i, list) {
+          if (list.length === 1) {
+            child.classList.add('only-child');
+          }
+
+          if (i + 1 === splitAfter) {
+            child.classList.add('split-after');
+          }
+        });
+      }
+    });
+  }
+
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$c(), selector, selector, !recursive ? '>' : '', space, selector, selector), React__default.createElement(Tag, Object.assign({
+    ref: ref
+  }, passedProps), children));
 }
 
-function _templateObject$b() {
+function _templateObject$d() {
   var data = _taggedTemplateLiteralLoose(["\n        ", " > * {\n          display: flex;\n          flex-wrap: wrap;\n          margin: calc((", " / 2) * -1);\n        }\n  \n        ", " > * > * {\n          flex-grow: 1;\n          flex-basis: calc((", " - (100% - ", ")) * 999);\n          margin: calc(", " / 2);\n        }\n  \n        ", " > * > :nth-last-of-type(n+", "):not(style),\n        ", " > * > :nth-last-of-type(n+", "):not(style) ~ *:not(style) {\n          flex-basis: 100%;\n        }\n      "]);
 
-  _templateObject$b = function _templateObject() {
+  _templateObject$d = function _templateObject() {
     return data;
@@ -678,8 +810,8 @@ };
 }
-var defaultApi$9 = {
+var defaultApi$a = {
   threshold: 'var(--measure)',
-  space: 'var(--s1)',
+  space: 'var(--space-md)',
   limit: 4
 };
-var name$b = 'switcher';
+var name$d = 'switcher';
 /**
@@ -691,5 +823,5 @@ * Switcher layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$b),
-    defaultApi: defaultApi$9,
-    name: name$b,
+    contextApi: useApi(name$d),
+    defaultApi: defaultApi$a,
+    name: name$d,
     props: props
@@ -706,3 +838,3 @@ }),
       limit = api.limit;
-  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$b(), selector, space, selector, threshold, space, space, selector, Number(limit) + 1, selector, Number(limit) + 1), React__default.createElement(Tag, Object.assign({}, passedProps), children));
+  return React__default.createElement(React__default.Fragment, null, createStyleTag(_templateObject$d(), selector, space, selector, threshold, space, space, selector, Number(limit) + 1, selector, Number(limit) + 1), React__default.createElement(Tag, Object.assign({}, passedProps), React__default.createElement("div", null, children)));
 }
@@ -713,2 +845,3 @@
 exports.Center = Center;
+exports.Container = Container;
 exports.Cover = Cover;
@@ -718,3 +851,4 @@ exports.Frame = Frame;
 exports.Group = Group;
-exports.Imposter = Imposter;
+exports.Position = Position;
+exports.Reel = Reel;
 exports.Sidebar = Sidebar;
@@ -721,0 +855,0 @@ exports.Spacer = Spacer;

dist/layout-blocks.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=n(e),r=n(require("resize-observer-polyfill"));function a(){return(a=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n}).apply(this,arguments)}function i(n,e){return e||(e=n.slice(0)),n.raw=e,n}var o=e.createContext({});function c(n){return e.useContext(o)[n]}function s(n){for(var e=arguments.length,r=new Array(e>1?e-1:0),a=1;a<e;a++)r[a-1]=arguments[a];var i=n.map((function(n,e){return""+n+(r[e]||"")})).join("");return t.createElement("style",{dangerouslySetInnerHTML:{__html:i}})}function l(n,e){var t=n.className,r=void 0===t?"":t;return a({},n,{className:r.length?r.concat(" "+e):e})}function u(n){var e=n.defaultApi,t=n.contextApi,r=n.name,i=n.props,o=i.as,c=void 0===o?"div":o,s=i.children,u=function(n,e){if(null==n)return{};var t,r,a={},i=Object.keys(n);for(r=0;r<i.length;r++)e.indexOf(t=i[r])>=0||(a[t]=n[t]);return a}(i,["as","children"]),p=function(n,e,t){var r=a({},n,{},e);return a({},Object.keys(r).reduce((function(n,e){var r;return t.hasOwnProperty(e)?a({},n,((r={})[e]=t[e],r)):n}),r))}(e,t,u),f=function(n,e){return void 0===e&&(e={}),"layout-block-"+n+"-"+function(n){for(var e,t=1540483477,r=n.length,a=r^r,i=0;r>=4;)e=(65535&(e=255&n.charCodeAt(i)|(255&n.charCodeAt(++i))<<8|(255&n.charCodeAt(++i))<<16|(255&n.charCodeAt(++i))<<24))*t+(((e>>>16)*t&65535)<<16),a=(65535&a)*t+(((a>>>16)*t&65535)<<16)^(e=(65535&(e^=e>>>24))*t+(((e>>>16)*t&65535)<<16)),r-=4,++i;switch(r){case 3:a^=(255&n.charCodeAt(i+2))<<16;case 2:a^=(255&n.charCodeAt(i+1))<<8;case 1:a=1540483477*(65535&(a^=255&n.charCodeAt(i)))+((1540483477*(a>>>16)&65535)<<16)}return a=(65535&(a^=a>>>13))*t+(((a>>>16)*t&65535)<<16),((a^=a>>>15)>>>0).toString(36)}(JSON.stringify(e))}(r,p),d=c+"."+f;return{api:p,children:s,passedProps:l(u,f),selector:d,Tag:c}}function p(){var n=i(["\n        "," {\n          padding: ",";\n        }\n      "]);return p=function(){return n},n}var f={padding:"var(--s1)"};function d(){var n=i(["\n        "," {\n          box-sizing: content-box;\n          margin-left: auto;\n          margin-right: auto;\n          max-width: ",";\n          ","\n          padding-left: ",";\n          padding-right: ",";\n          ","\n        }\n      "]);return d=function(){return n},n}var m={max:"var(--measure)",centerText:!1,gutter:"0",isIntrinsic:!1};function g(){var n=i(["\n        "," {\n          display: flex;\n          flex-direction: column;\n          min-height: ",";\n          padding: ",";\n        }\n  \n        "," > * {\n          margin-top: ",";\n          margin-bottom: ",";\n        }\n  \n        "," {\n          display: flex;\n          flex-direction: column;\n          min-height: ",";\n          padding: ",";\n        }\n  \n        "," > :first-of-type:not(style) {\n          margin-top: 0;\n        }\n  \n        "," > :last-of-type:not(style) {\n          margin-bottom: 0;\n        }\n  \n        ","\n      "]);return g=function(){return n},n}var v={centeredIndex:2,space:"var(--s1)",minHeight:"100vh",isPadded:!1};function h(){var n=i(["\n        "," {\n          --n: ",";\n          --d: ",";\n          padding-bottom: calc(var(--n) / var(--d) * 100%);\n          position: relative;\n        }\n  \n        "," > * {\n          overflow: hidden;\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n        }\n  \n        "," > img,\n        "," > video {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n      "]);return h=function(){return n},n}var x={ratio:"16:9"};function b(){var n=i(["\n        "," {\n          width: 100vw;\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n      "]);return b=function(){return n},n}var y="undefined"!=typeof window;function w(){var n=i(["\n        "," {\n          display: grid;\n          grid-gap: ",";\n          grid-template-columns: 100%;\n        }\n  \n        ",".aboveMin {\n          grid-template-columns: repeat(auto-fill, minmax(",", 1fr));\n        }\n  \n        @supports (width: min(",", 100%)) {\n          "," {\n            grid-template-columns: repeat(auto-fit, minmax(min(",", 100%), 1fr));\n          }\n        }\n      "]);return w=function(){return n},n}var A={min:"250px",space:"var(--s1)"};function E(){var n=i(["\n        "," {\n          overflow: hidden;\n        }\n  \n        "," > * {\n          display: flex;\n          flex-wrap: wrap;\n          justify-content: ",";\n          align-items: ",";\n          margin: calc("," / 2 * -1);\n        }\n  \n        "," > * > * {\n          margin: calc("," / 2);\n        }\n      "]);return E=function(){return n},n}var j={align:"center",justify:"start",space:"var(--s1)"};function O(){var n=i(["\n        "," {\n          "," {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            ","\n            ","\n          }\n        }\n      "]);return O=function(){return n},n}var P={breakout:!1,margin:"0px",isFixed:!1};function T(){var n=i(["\n        "," {\n          overflow: hidden;\n        }\n  \n        "," > * {\n          display: flex;\n          flex-wrap: wrap;\n          ","\n          margin: calc("," / 2 * -1);\n        }\n  \n        "," > * > * {\n          margin: calc("," / 2);\n          ","\n          flex-grow: 1;\n        }\n  \n        "," > * > :",":not(style) {\n          flex-basis: 0;\n          flex-grow: 999;\n          min-width: calc("," - ",");\n        }\n      "]);return T=function(){return n},n}var F={side:"left",sideWidth:null,contentMin:"50%",space:"var(--s1)",isStretch:!1};function C(){var n=i(["\n        "," {\n          flex: 1 0 auto;\n        }\n      "]);return C=function(){return n},n}function k(){var n=i(["\n        "," {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n        }\n    \n        "," "," *:not(style) ~ *:not(style) {\n          margin-top: ",";\n        }\n      \n        ","\n      "]);return k=function(){return n},n}var S={recursive:!1,splitAfter:null,space:"var(--s1)"};function N(){var n=i(["\n        "," > * {\n          display: flex;\n          flex-wrap: wrap;\n          margin: calc(("," / 2) * -1);\n        }\n  \n        "," > * > * {\n          flex-grow: 1;\n          flex-basis: calc(("," - (100% - ",")) * 999);\n          margin: calc("," / 2);\n        }\n  \n        "," > * > :nth-last-of-type(n+","):not(style),\n        "," > * > :nth-last-of-type(n+","):not(style) ~ *:not(style) {\n          flex-basis: 100%;\n        }\n      "]);return N=function(){return n},n}var M={threshold:"var(--measure)",space:"var(--s1)",limit:4};exports.Box=function(n){var e=u({contextApi:c("box"),defaultApi:f,name:"box",props:n}),r=e.children,a=e.Tag,i=e.passedProps,o=e.selector,l=e.api.padding;return t.createElement(t.Fragment,null,s(p(),o,l),t.createElement(a,Object.assign({},i),r))},exports.Breakout=function(n){var e=u({name:"breakout",props:n}),r=e.children,a=e.Tag,i=e.passedProps,o=e.selector;return t.createElement(t.Fragment,null,s(b(),o),t.createElement(a,Object.assign({},i),r))},exports.Center=function(n){var e=u({contextApi:c("center"),defaultApi:m,name:"center",props:n}),r=e.api,a=e.children,i=e.Tag,o=e.passedProps,l=e.selector,p=r.max,f=r.centerText,g=r.gutter,v=r.intrinsic;return t.createElement(t.Fragment,null,s(d(),l,p,f?"text-align: center;":"",g,g,v?"\n            display:flex;\n            flex-direction: column;\n            align-items: center;\n          ":""),t.createElement(i,Object.assign({},o),a))},exports.Cover=function(n){var r=u({contextApi:c("cover"),defaultApi:v,name:"cover",props:n}),a=r.api,i=r.children,o=r.Tag,l=r.passedProps,p=r.selector,f=a.centeredIndex,d=a.space,m=a.minHeight,h=a.isPadded,x=e.Children.count(i);return t.createElement(t.Fragment,null,s(g(),p,m,h?d:"0",p,d,d,p,m,h?d:"0",p,p,1===x?"\n          "+p+" > :first-of-type:not(style) {\n            margin-top: auto;\n            margin-bottom: auto;\n          }\n        ":"\n        "+p+" > :nth-of-type("+f+"):not(style) {\n          margin-top: auto;\n          margin-bottom: auto;\n        }\n        "),t.createElement(o,Object.assign({},l),i))},exports.Frame=function(n){var e=u({contextApi:c("frame"),defaultApi:x,name:"frame",props:n}),r=e.children,a=e.Tag,i=e.passedProps,o=e.selector,l=e.api.ratio.split(":"),p=l[0],f=l[1];return t.createElement(t.Fragment,null,s(h(),o,Number(f),Number(p),o,o,o),t.createElement(a,Object.assign({},i),r))},exports.Grid=function(n){var i=u({contextApi:c("grid"),defaultApi:A,name:"grid",props:n}),o=i.api,l=i.children,p=i.Tag,f=i.passedProps,d=i.selector,m=o.min,g=o.space,v=e.useRef(null),h=e.useRef(null),x=function(n){var t=n.ref,a=n.element,i=n.callback,o=e.useState({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),c=o[0],s=o[1],l=function(n){var e=n[0];i&&i(e),s(e.contentRect)},u=e.useState((function(){return y?new r(l):void 0}))[0];return e.useEffect((function(){var n;if(u)return t?n=t.current:a&&(n=a),n&&u.observe(n),function(){return u.disconnect()}}),[t,u,a]),c}({ref:v}).width,b=!1;h.current&&(h.current.style.width=m,b=x>h.current.offsetWidth);var E=f.className,j=a({},f,{ref:v,className:E.length?b?E.concat(" aboveMin"):E:b?"aboveMin":E});return t.createElement(t.Fragment,null,s(w(),d,g,d,m,m,d,m),t.createElement(p,Object.assign({},j),l,t.createElement("div",{ref:h})))},exports.Group=function(n){var e=u({contextApi:c("group"),defaultApi:j,name:"group",props:n}),r=e.api,a=e.children,i=e.Tag,o=e.passedProps,l=e.selector,p=r.align,f=r.justify,d=r.space;return t.createElement(t.Fragment,null,s(E(),l,l,["start","end"].includes(f)?"flex-"+f:f,["start","end"].includes(p)?"flex-"+p:p,d,l,d),t.createElement(i,Object.assign({},o),t.createElement("div",null,a)))},exports.Imposter=function(n){var e=u({contextApi:c("imposter"),defaultApi:P,name:"imposter",props:n}),r=e.api,a=e.children,i=e.Tag,o=e.passedProps,l=e.selector,p=r.breakout,f=r.margin,d=r.fixed;return t.createElement(t.Fragment,null,s(O(),l,l,p?"":"\n              max-width: calc(100% - ("+f+" * 2));\n              max-height: calc(100% - ("+f+" * 2));\n              overflow: auto;",d?"\n              position: fixed;":""),t.createElement(i,Object.assign({},o),a))},exports.Sidebar=function(n){var e=u({contextApi:c("sidebar"),defaultApi:F,name:"sidebar",props:n}),r=e.api,a=e.children,i=e.Tag,o=e.passedProps,l=e.selector,p=r.side,f=r.sideWidth,d=r.contentMin,m=r.space,g=r.isStretch;return t.createElement(t.Fragment,null,s(T(),l,l,g?"":"align-items: flex-start;",m,l,m,f?"flex-basis: "+f+";":"",l,"left"===p?"last-of-type":"first-of-type",d,m),t.createElement(i,Object.assign({},o),t.createElement("div",null,a)))},exports.Spacer=function(n){var e=u({name:"spacer",props:n}),r=e.children,a=e.Tag,i=e.passedProps,o=e.selector;return t.createElement(t.Fragment,null,s(C(),o),t.createElement(a,Object.assign({},i),r))},exports.Stack=function(n){var e=u({contextApi:c("stack"),defaultApi:S,name:"stack",props:n}),r=e.api,a=e.children,i=e.Tag,o=e.passedProps,l=e.selector,p=r.recursive,f=r.space,d=r.splitAfter;return t.createElement(t.Fragment,null,s(k(),l,l,p?"":">",f,d?"\n            "+l+":only-child {\n            height: 100%;\n          }\n          "+l+" > :nth-child("+d+") {\n            margin-bottom: auto;\n          }\n        ":""),t.createElement(i,Object.assign({},o),a))},exports.Switcher=function(n){var e=u({contextApi:c("switcher"),defaultApi:M,name:"switcher",props:n}),r=e.api,a=e.children,i=e.Tag,o=e.passedProps,l=e.selector,p=r.threshold,f=r.space,d=r.limit;return t.createElement(t.Fragment,null,s(N(),l,f,l,p,f,f,l,Number(d)+1,l,Number(d)+1),t.createElement(i,Object.assign({},o),a))};
+"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=n(e),r=n(require("resize-observer-polyfill"));function a(){return(a=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n}).apply(this,arguments)}function i(n,e){return e||(e=n.slice(0)),n.raw=e,n}var o=e.createContext({});function c(n){return e.useContext(o)[n]}function l(n){for(var e=arguments.length,r=new Array(e>1?e-1:0),a=1;a<e;a++)r[a-1]=arguments[a];var i=n.map((function(n,e){return""+n+(r[e]||"")})).join("");return t.createElement("style",{dangerouslySetInnerHTML:{__html:i}})}function s(n,e){var t=n.className,r=void 0===t?"":t;return a({},n,{className:r.length?r.concat(" "+e):e})}function u(n){var e=n.defaultApi,t=n.contextApi,r=n.name,i=n.props,o=i.as,c=void 0===o?"div":o,l=i.children,u=function(n,e){if(null==n)return{};var t,r,a={},i=Object.keys(n);for(r=0;r<i.length;r++)e.indexOf(t=i[r])>=0||(a[t]=n[t]);return a}(i,["as","children"]),p=function(n,e,t){var r=a({},n,{},e);return a({},Object.keys(r).reduce((function(n,e){var r;return t.hasOwnProperty(e)?a({},n,((r={})[e]=t[e],r)):n}),r))}(e,t,u);Object.keys(p).forEach((function(n){return delete u[n]}));var f=function(n,e){return void 0===e&&(e={}),"layout-block-"+n+"-"+function(n){for(var e,t=1540483477,r=n.length,a=r^r,i=0;r>=4;)e=(65535&(e=255&n.charCodeAt(i)|(255&n.charCodeAt(++i))<<8|(255&n.charCodeAt(++i))<<16|(255&n.charCodeAt(++i))<<24))*t+(((e>>>16)*t&65535)<<16),a=(65535&a)*t+(((a>>>16)*t&65535)<<16)^(e=(65535&(e^=e>>>24))*t+(((e>>>16)*t&65535)<<16)),r-=4,++i;switch(r){case 3:a^=(255&n.charCodeAt(i+2))<<16;case 2:a^=(255&n.charCodeAt(i+1))<<8;case 1:a=1540483477*(65535&(a^=255&n.charCodeAt(i)))+((1540483477*(a>>>16)&65535)<<16)}return a=(65535&(a^=a>>>13))*t+(((a>>>16)*t&65535)<<16),((a^=a>>>15)>>>0).toString(36)}(JSON.stringify(e))}(r,p),d=c+"."+f;return{api:p,children:l,passedProps:s(u,f),selector:d,Tag:c}}function p(){var n=i(["\n        "," {\n          padding: ",";\n        }\n      "]);return p=function(){return n},n}var f={padding:"var(--space-md)"};function d(){var n=i(["\n        "," {\n          width: 100vw;\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n      "]);return d=function(){return n},n}function m(){var n=i(["\n        "," {\n          box-sizing: content-box;\n          margin-left: auto;\n          margin-right: auto;\n          max-width: ",";\n          ","\n          padding-left: ",";\n          padding-right: ",";\n          ","\n        }\n      "]);return m=function(){return n},n}var g={max:"var(--measure)",centerText:!1,gutter:"0",intrinsic:!1};function h(){var n=i(["\n        "," {\n          position: relative\n        }\n      "]);return h=function(){return n},n}function v(){var n=i(["\n        "," {\n          display: flex;\n          flex-direction: column;\n          min-height: ",";\n          padding: ",";\n        }\n  \n        "," > * {\n          margin-top: ",";\n          margin-bottom: ",";\n        }\n  \n        "," {\n          display: flex;\n          flex-direction: column;\n          min-height: ",";\n          padding: ",";\n        }\n  \n        "," > :first-of-type:not(style) {\n          margin-top: 0;\n        }\n  \n        "," > :last-of-type:not(style) {\n          margin-bottom: 0;\n        }\n  \n        ","\n      "]);return v=function(){return n},n}var x={centeredIndex:2,space:"var(--space-md)",minHeight:"100vh",isPadded:!1};function b(){var n=i(["\n        "," {\n          padding-bottom: calc("," / "," * 100%);\n          position: relative;\n        }\n  \n        "," > * {\n          overflow: hidden;\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n        }\n  \n        "," > img,\n        "," > video {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n      "]);return b=function(){return n},n}var y={ratio:"16:9"},w="undefined"!=typeof window;function E(){var n=i(["\n        "," {\n          display: grid;\n          grid-gap: ",";\n          grid-template-columns: 100%;\n        }\n  \n        ",".aboveMin {\n          grid-template-columns: repeat(auto-fill, minmax(",", 1fr));\n        }\n  \n        @supports (width: min(",", 100%)) {\n          "," {\n            grid-template-columns: repeat(auto-fit, minmax(min(",", 100%), 1fr));\n          }\n        }\n      "]);return E=function(){return n},n}var A={min:"250px",space:"var(--space-md)"};function j(){var n=i(["\n        "," {\n          overflow: hidden;\n        }\n  \n        "," > * {\n          display: flex;\n          flex-wrap: wrap;\n          justify-content: ",";\n          align-items: ",";\n          margin: calc("," / 2 * -1);\n        }\n  \n        "," > * > * {\n          margin: calc("," / 2);\n        }\n      "]);return j=function(){return n},n}var O={align:"center",justify:"start",space:"var(--space-md)"};function P(){var n=i(["\n        "," {\n          position: absolute;\n          ","\n          ","\n          ","\n        }\n      "]);return P=function(){return n},n}var k={breakout:!1,margin:"var(--space-md)",fixed:!1,x:"center",y:"center"};function T(){var n=i(["\n        "," {\n          display: flex;\n          height: ",";\n          overflow-x: auto;\n          overflow-y: hidden;\n          scrollbar-color: #fff #000;\n        }\n        \n        ","::-webkit-scrollbar {\n          height: 1rem;\n        }\n        \n        ","::-webkit-scrollbar-track {\n          background-color: #000;\n        }\n        \n        ","::-webkit-scrollbar-thumb {\n          background-color: #000;\n          background-image: linear-gradient(#000 0, #000 0.25rem, #fff 0.25rem, #fff 0.75rem, #000 0.75rem);\n        }\n        \n        "," > * {\n          flex: 0 0 ",";\n        }\n        \n        \n        "," > img {\n          height: 100%;\n          flex-basis: auto;\n          width: auto;\n        }\n        \n        "," > * + * {\n          margin-left: ",";\n        }\n        \n        ",".overflowing {\n          padding-bottom: ",";\n        }\n      "]);return T=function(){return n},n}var F={itemWidth:"auto",space:"var(--space-md)",height:"auto"};function C(){var n=i(["\n        "," {\n          overflow: hidden;\n        }\n  \n        "," > * {\n          display: flex;\n          flex-wrap: wrap;\n          ","\n          margin: calc("," / 2 * -1);\n          \n        }\n  \n        "," > * > * {\n          margin: calc("," / 2);\n          ","\n          flex-grow: 1;\n        }\n  \n        "," > * > :",":not(style) {\n          flex-basis: 0;\n          flex-grow: 999;\n          min-width: calc("," - ",");\n        }\n      "]);return C=function(){return n},n}var N={side:"left",sideWidth:null,contentMin:"50%",space:"0",stretch:!1};function S(){var n=i(["\n        "," {\n          flex: 1 1 auto;\n        }\n      "]);return S=function(){return n},n}function M(){var n=i(["\n        "," {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n        }\n    \n        "," "," *:not(style) ~ *:not(style) {\n          margin-top: ",";\n        }\n\n        "," > .only-child {\n          height: 100%;\n        }\n\n        "," > .split-after {\n          margin-bottom: auto;\n        }\n      "]);return M=function(){return n},n}var L={recursive:!1,space:"var(--space-md)",splitAfter:null};function R(){var n=i(["\n        "," > * {\n          display: flex;\n          flex-wrap: wrap;\n          margin: calc(("," / 2) * -1);\n        }\n  \n        "," > * > * {\n          flex-grow: 1;\n          flex-basis: calc(("," - (100% - ",")) * 999);\n          margin: calc("," / 2);\n        }\n  \n        "," > * > :nth-last-of-type(n+","):not(style),\n        "," > * > :nth-last-of-type(n+","):not(style) ~ *:not(style) {\n          flex-basis: 100%;\n        }\n      "]);return R=function(){return n},n}var W={threshold:"var(--measure)",space:"var(--space-md)",limit:4};exports.Box=function(n){var e=u({contextApi:c("box"),defaultApi:f,name:"box",props:n}),r=e.children,a=e.Tag,i=e.passedProps,o=e.selector,s=e.api.padding;return t.createElement(t.Fragment,null,l(p(),o,s),t.createElement(a,Object.assign({},i),r))},exports.Breakout=function(n){var e=u({name:"breakout",props:n}),r=e.children,a=e.Tag,i=e.passedProps,o=e.selector;return t.createElement(t.Fragment,null,l(d(),o),t.createElement(a,Object.assign({},i),r))},exports.Center=function(n){var e=u({contextApi:c("center"),defaultApi:g,name:"center",props:n}),r=e.api,a=e.children,i=e.Tag,o=e.passedProps,s=e.selector,p=r.max,f=r.centerText,d=r.gutter,h=r.intrinsic;return t.createElement(t.Fragment,null,l(m(),s,p,f?"text-align: center;":"",d,d,h?"\n            display:flex;\n            flex-direction: column;\n            align-items: center;\n          ":""),t.createElement(i,Object.assign({},o),a))},exports.Container=function(n){var e=u({name:"container",props:n}),r=e.children,a=e.Tag,i=e.passedProps,o=e.selector;return t.createElement(t.Fragment,null,l(h(),o),t.createElement(a,Object.assign({},i),r))},exports.Cover=function(n){var r=u({contextApi:c("cover"),defaultApi:x,name:"cover",props:n}),a=r.api,i=r.children,o=r.Tag,s=r.passedProps,p=r.selector,f=a.centeredIndex,d=a.space,m=a.minHeight,g=a.isPadded,h=e.Children.count(i);return t.createElement(t.Fragment,null,l(v(),p,m,g?d:"0",p,d,d,p,m,g?d:"0",p,p,1===h?"\n          "+p+" > :first-of-type:not(style) {\n            margin-top: auto;\n            margin-bottom: auto;\n          }\n        ":"\n        "+p+" > :nth-of-type("+f+"):not(style) {\n          margin-top: auto;\n          margin-bottom: auto;\n        }\n        "),t.createElement(o,Object.assign({},s),i))},exports.Frame=function(n){var e=u({contextApi:c("frame"),defaultApi:y,name:"frame",props:n}),r=e.children,a=e.Tag,i=e.passedProps,o=e.selector,s=e.api.ratio.split(":"),p=s[0],f=s[1];return t.createElement(t.Fragment,null,l(b(),o,Number(f),Number(p),o,o,o),t.createElement(a,Object.assign({},i),r))},exports.Grid=function(n){var i=u({contextApi:c("grid"),defaultApi:A,name:"grid",props:n}),o=i.api,s=i.children,p=i.Tag,f=i.passedProps,d=i.selector,m=o.min,g=o.space,h=e.useRef(null),v=e.useRef(null),x=function(n){var t=n.ref,a=n.element,i=n.callback,o=e.useState({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),c=o[0],l=o[1],s=function(n){var e=n[0];i&&i(e),l(e.contentRect)},u=e.useState((function(){return w?new r(s):void 0}))[0];return e.useEffect((function(){var n;if(u)return t?n=t.current:a&&(n=a),n&&u.observe(n),function(){return u.disconnect()}}),[t,u,a]),c}({ref:h}).width,b=!1;v.current&&(v.current.style.width=m,b=x>v.current.offsetWidth);var y=f.className,j=a({},f,{ref:h,className:y.length?b?y.concat(" aboveMin"):y:b?"aboveMin":y});return t.createElement(t.Fragment,null,l(E(),d,g,d,m,m,d,m),t.createElement(p,Object.assign({},j),s,t.createElement("div",{ref:v})))},exports.Group=function(n){var e=u({contextApi:c("group"),defaultApi:O,name:"group",props:n}),r=e.api,a=e.children,i=e.Tag,o=e.passedProps,s=e.selector,p=r.align,f=r.justify,d=r.space;return t.createElement(t.Fragment,null,l(j(),s,s,["start","end"].includes(f)?"flex-"+f:f,["start","end"].includes(p)?"flex-"+p:p,d,s,d),t.createElement(i,Object.assign({},o),t.createElement("div",null,a)))},exports.Position=function(n){var e=u({contextApi:c("position"),defaultApi:k,name:"position",props:n}),r=e.api,a=e.children,i=e.Tag,o=e.passedProps,s=e.selector,p=r.breakout,f=r.margin,d=r.fixed,m=r.x,g=r.y;return t.createElement(t.Fragment,null,l(P(),s,function(n,e,t){return"\n    "+function(n,e){return"left"===n?"\n      left: "+e+";\n    ":"right"===n?"\n      right: "+e+";\n    ":"full"===n?"\n      left: "+e+";\n      right: "+e+";\n    ":"\n      left: 50%;\n    "}(n,t)+"\n    "+function(n,e){return"top"===n?"\n      top: "+e+";\n    ":"bottom"===n?"\n      bottom: "+e+";\n    ":"full"===n?"\n      top: "+e+";\n      bottom: "+e+";\n    ":"\n      top: 50%;\n    "}(e,t)+"\n    "+("center"===n&&"center"===e?"transform: translate(-50%,-50%);":"center"===n?"transform: translateX(-50%);":"center"===e?"transform: translateY(-50%);":"")+"\n  "}(m,g,f),p?"":"\n            max-width: calc(100% - ("+f+" * 2));\n            max-height: calc(100% - ("+f+" * 2));\n            overflow: auto;",d?"\n            position: fixed;":""),t.createElement(i,Object.assign({},o),a))},exports.Reel=function(n){var e=u({contextApi:c("reel"),defaultApi:F,name:"reel",props:n}),r=e.api,a=e.children,i=e.Tag,o=e.passedProps,s=e.selector,p=r.itemWidth,f=r.space,d=r.height;return t.createElement(t.Fragment,null,l(T(),s,d,s,s,s,s,p,s,s,f,s,f),t.createElement(i,Object.assign({},o),t.createElement("div",null,a)))},exports.Sidebar=function(n){var e=u({contextApi:c("sidebar"),defaultApi:N,name:"sidebar",props:n}),r=e.api,a=e.children,i=e.Tag,o=e.passedProps,s=e.selector,p=r.side,f=r.sideWidth,d=r.contentMin,m=r.space,g=r.stretch,h="0"===m?"0px":m;return t.createElement(t.Fragment,null,l(C(),s,s,g?"":"align-items: flex-start;",h,s,h,f?"flex-basis: "+f+";":"",s,"left"===p?"last-of-type":"first-of-type",d,h),t.createElement(i,Object.assign({},o),t.createElement("div",null,a)))},exports.Spacer=function(n){var e=u({name:"spacer",props:n}),r=e.children,a=e.Tag,i=e.passedProps,o=e.selector;return t.createElement(t.Fragment,null,l(S(),o),t.createElement(a,Object.assign({},i),r))},exports.Stack=function(n){var r=u({contextApi:c("stack"),defaultApi:L,name:"stack",props:n}),a=r.api,i=r.children,o=r.Tag,s=r.passedProps,p=r.selector,f=a.recursive,d=a.space,m=a.splitAfter,g=e.useRef(null);return m&&e.useLayoutEffect((function(){g&&g.current&&Array.from(g.current.children).filter((function(n){return"STYLE"!==n.tagName})).forEach((function(n,e,t){1===t.length&&n.classList.add("only-child"),e+1===m&&n.classList.add("split-after")}))})),t.createElement(t.Fragment,null,l(M(),p,p,f?"":">",d,p,p),t.createElement(o,Object.assign({ref:g},s),i))},exports.Switcher=function(n){var e=u({contextApi:c("switcher"),defaultApi:W,name:"switcher",props:n}),r=e.api,a=e.children,i=e.Tag,o=e.passedProps,s=e.selector,p=r.threshold,f=r.space,d=r.limit;return t.createElement(t.Fragment,null,l(R(),s,f,s,p,f,f,s,Number(d)+1,s,Number(d)+1),t.createElement(i,Object.assign({},o),t.createElement("div",null,a)))};
 //# sourceMappingURL=layout-blocks.cjs.production.min.js.map

dist/layout-blocks.esm.js

@@ -1,2 +0,2 @@
-import React, { createContext, useContext, Children, useState, useEffect, useRef } from 'react';
+import React, { createContext, useContext, Children, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
@@ -46,6 +46,6 @@
 
-var ApiContext = /*#__PURE__*/createContext({});
+var LayoutContext = /*#__PURE__*/createContext({});
 
 function useApi(componentName) {
-  var apiFromContext = useContext(ApiContext);
+  var apiFromContext = useContext(LayoutContext);
   return apiFromContext[componentName];
@@ -144,2 +144,5 @@ }
   var api = reduceApi(defaultApi, contextApi, remainingProps);
+  Object.keys(api).forEach(function (key) {
+    return delete remainingProps[key];
+  });
   var layoutClass = createLayoutClassname(name, api);
@@ -166,3 +169,3 @@ var selector = Tag + "." + layoutClass;
 var defaultApi = {
-  padding: 'var(--s1)'
+  padding: 'var(--space-md)'
 };
@@ -192,3 +195,3 @@ var name = 'box';
 function _templateObject$1() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          box-sizing: content-box;\n          margin-left: auto;\n          margin-right: auto;\n          max-width: ", ";\n          ", "\n          padding-left: ", ";\n          padding-right: ", ";\n          ", "\n        }\n      "]);
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          width: 100vw;\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n      "]);
 
@@ -201,2 +204,29 @@ _templateObject$1 = function _templateObject() {
 }
+var name$1 = 'breakout';
+/**
+ * Breakout layout component
+ */
+
+function Breakout(props) {
+  var _createLayoutConfig = createLayoutConfig({
+    name: name$1,
+    props: props
+  }),
+      children = _createLayoutConfig.children,
+      Tag = _createLayoutConfig.Tag,
+      passedProps = _createLayoutConfig.passedProps,
+      selector = _createLayoutConfig.selector;
+
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$1(), selector), React.createElement(Tag, Object.assign({}, passedProps), children));
+}
+
+function _templateObject$2() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          box-sizing: content-box;\n          margin-left: auto;\n          margin-right: auto;\n          max-width: ", ";\n          ", "\n          padding-left: ", ";\n          padding-right: ", ";\n          ", "\n        }\n      "]);
+
+  _templateObject$2 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
 var defaultApi$1 = {
@@ -206,5 +236,5 @@ max: 'var(--measure)',
   gutter: '0',
-  isIntrinsic: false
+  intrinsic: false
 };
-var name$1 = 'center';
+var name$2 = 'center';
 /**
@@ -216,5 +246,5 @@ * Center layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$1),
+    contextApi: useApi(name$2),
     defaultApi: defaultApi$1,
-    name: name$1,
+    name: name$2,
     props: props
@@ -232,9 +262,36 @@ }),
       intrinsic = api.intrinsic;
-  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$1(), selector, max, centerText ? 'text-align: center;' : '', gutter, gutter, intrinsic ? "\n            display:flex;\n            flex-direction: column;\n            align-items: center;\n          " : ''), React.createElement(Tag, Object.assign({}, passedProps), children));
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$2(), selector, max, centerText ? 'text-align: center;' : '', gutter, gutter, intrinsic ? "\n            display:flex;\n            flex-direction: column;\n            align-items: center;\n          " : ''), React.createElement(Tag, Object.assign({}, passedProps), children));
 }
 
-function _templateObject$2() {
+function _templateObject$3() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          position: relative\n        }\n      "]);
+
+  _templateObject$3 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var name$3 = 'container';
+/**
+ * Container layout component
+ */
+
+function Container(props) {
+  var _createLayoutConfig = createLayoutConfig({
+    name: name$3,
+    props: props
+  }),
+      children = _createLayoutConfig.children,
+      Tag = _createLayoutConfig.Tag,
+      passedProps = _createLayoutConfig.passedProps,
+      selector = _createLayoutConfig.selector;
+
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$3(), selector), React.createElement(Tag, Object.assign({}, passedProps), children));
+}
+
+function _templateObject$4() {
   var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          display: flex;\n          flex-direction: column;\n          min-height: ", ";\n          padding: ", ";\n        }\n  \n        ", " > * {\n          margin-top: ", ";\n          margin-bottom: ", ";\n        }\n  \n        ", " {\n          display: flex;\n          flex-direction: column;\n          min-height: ", ";\n          padding: ", ";\n        }\n  \n        ", " > :first-of-type:not(style) {\n          margin-top: 0;\n        }\n  \n        ", " > :last-of-type:not(style) {\n          margin-bottom: 0;\n        }\n  \n        ", "\n      "]);
 
-  _templateObject$2 = function _templateObject() {
+  _templateObject$4 = function _templateObject() {
     return data;
@@ -247,7 +304,7 @@ };
   centeredIndex: 2,
-  space: 'var(--s1)',
+  space: 'var(--space-md)',
   minHeight: '100vh',
   isPadded: false
 };
-var name$2 = 'cover';
+var name$4 = 'cover';
 /**
@@ -259,5 +316,5 @@ * Cover layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$2),
+    contextApi: useApi(name$4),
     defaultApi: defaultApi$2,
-    name: name$2,
+    name: name$4,
     props: props
@@ -276,9 +333,9 @@ }),
   var childrenCount = Children.count(children);
-  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$2(), selector, minHeight, isPadded ? space : '0', selector, space, space, selector, minHeight, isPadded ? space : '0', selector, selector, childrenCount === 1 ? "\n          " + selector + " > :first-of-type:not(style) {\n            margin-top: auto;\n            margin-bottom: auto;\n          }\n        " : "\n        " + selector + " > :nth-of-type(" + centeredIndex + "):not(style) {\n          margin-top: auto;\n          margin-bottom: auto;\n        }\n        "), React.createElement(Tag, Object.assign({}, passedProps), children));
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$4(), selector, minHeight, isPadded ? space : '0', selector, space, space, selector, minHeight, isPadded ? space : '0', selector, selector, childrenCount === 1 ? "\n          " + selector + " > :first-of-type:not(style) {\n            margin-top: auto;\n            margin-bottom: auto;\n          }\n        " : "\n        " + selector + " > :nth-of-type(" + centeredIndex + "):not(style) {\n          margin-top: auto;\n          margin-bottom: auto;\n        }\n        "), React.createElement(Tag, Object.assign({}, passedProps), children));
 }
 
-function _templateObject$3() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          --n: ", ";\n          --d: ", ";\n          padding-bottom: calc(var(--n) / var(--d) * 100%);\n          position: relative;\n        }\n  \n        ", " > * {\n          overflow: hidden;\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n        }\n  \n        ", " > img,\n        ", " > video {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n      "]);
+function _templateObject$5() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding-bottom: calc(", " / ", " * 100%);\n          position: relative;\n        }\n  \n        ", " > * {\n          overflow: hidden;\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n        }\n  \n        ", " > img,\n        ", " > video {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n      "]);
 
-  _templateObject$3 = function _templateObject() {
+  _templateObject$5 = function _templateObject() {
     return data;
@@ -292,3 +349,3 @@ };
 };
-var name$3 = 'frame';
+var name$5 = 'frame';
 /**
@@ -300,5 +357,5 @@ * Frame layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$3),
+    contextApi: useApi(name$5),
     defaultApi: defaultApi$3,
-    name: name$3,
+    name: name$5,
     props: props
@@ -318,32 +375,5 @@ }),
 
-  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$3(), selector, Number(numerator), Number(denominator), selector, selector, selector), React.createElement(Tag, Object.assign({}, passedProps), children));
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$5(), selector, Number(numerator), Number(denominator), selector, selector, selector), React.createElement(Tag, Object.assign({}, passedProps), children));
 }
 
-function _templateObject$4() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          width: 100vw;\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n      "]);
-
-  _templateObject$4 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var name$4 = 'breakout';
-/**
- * Breakout layout component
- */
-
-function Breakout(props) {
-  var _createLayoutConfig = createLayoutConfig({
-    name: name$4,
-    props: props
-  }),
-      children = _createLayoutConfig.children,
-      Tag = _createLayoutConfig.Tag,
-      passedProps = _createLayoutConfig.passedProps,
-      selector = _createLayoutConfig.selector;
-
-  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$4(), selector), React.createElement(Tag, Object.assign({}, passedProps), children));
-}
-
 var IS_BROWSER = typeof window !== 'undefined';
@@ -399,6 +429,6 @@ /**
 
-function _templateObject$5() {
+function _templateObject$6() {
   var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          display: grid;\n          grid-gap: ", ";\n          grid-template-columns: 100%;\n        }\n  \n        ", ".aboveMin {\n          grid-template-columns: repeat(auto-fill, minmax(", ", 1fr));\n        }\n  \n        @supports (width: min(", ", 100%)) {\n          ", " {\n            grid-template-columns: repeat(auto-fit, minmax(min(", ", 100%), 1fr));\n          }\n        }\n      "]);
 
-  _templateObject$5 = function _templateObject() {
+  _templateObject$6 = function _templateObject() {
     return data;
@@ -411,5 +441,5 @@ };
   min: '250px',
-  space: 'var(--s1)'
+  space: 'var(--space-md)'
 };
-var name$5 = 'grid';
+var name$6 = 'grid';
 /**
@@ -421,5 +451,5 @@ * Grid layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$5),
+    contextApi: useApi(name$6),
     defaultApi: defaultApi$4,
-    name: name$5,
+    name: name$6,
     props: props
@@ -458,3 +488,3 @@ }),
 
-  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$5(), selector, space, selector, min, min, selector, min), React.createElement(Tag, Object.assign({}, enhancedProps), children, React.createElement("div", {
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$6(), selector, space, selector, min, min, selector, min), React.createElement(Tag, Object.assign({}, enhancedProps), children, React.createElement("div", {
     ref: childRef
@@ -464,6 +494,6 @@ })));
 
-function _templateObject$6() {
+function _templateObject$7() {
   var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          overflow: hidden;\n        }\n  \n        ", " > * {\n          display: flex;\n          flex-wrap: wrap;\n          justify-content: ", ";\n          align-items: ", ";\n          margin: calc(", " / 2 * -1);\n        }\n  \n        ", " > * > * {\n          margin: calc(", " / 2);\n        }\n      "]);
 
-  _templateObject$6 = function _templateObject() {
+  _templateObject$7 = function _templateObject() {
     return data;
@@ -477,5 +507,5 @@ };
   justify: 'start',
-  space: 'var(--s1)'
+  space: 'var(--space-md)'
 };
-var name$6 = 'group';
+var name$7 = 'group';
 /**
@@ -487,5 +517,5 @@ * Group layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$6),
+    contextApi: useApi(name$7),
     defaultApi: defaultApi$5,
-    name: name$6,
+    name: name$7,
     props: props
@@ -502,9 +532,9 @@ }),
       space = api.space;
-  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$6(), selector, selector, ['start', 'end'].includes(justify) ? "flex-" + justify : justify, ['start', 'end'].includes(align) ? "flex-" + align : align, space, selector, space), React.createElement(Tag, Object.assign({}, passedProps), React.createElement("div", null, children)));
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$7(), selector, selector, ['start', 'end'].includes(justify) ? "flex-" + justify : justify, ['start', 'end'].includes(align) ? "flex-" + align : align, space, selector, space), React.createElement(Tag, Object.assign({}, passedProps), React.createElement("div", null, children)));
 }
 
-function _templateObject$7() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          ", " {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            ", "\n            ", "\n          }\n        }\n      "]);
+function _templateObject$8() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          position: absolute;\n          ", "\n          ", "\n          ", "\n        }\n      "]);
 
-  _templateObject$7 = function _templateObject() {
+  _templateObject$8 = function _templateObject() {
     return data;
@@ -517,15 +547,54 @@ };
   breakout: false,
-  margin: '0px',
-  isFixed: false
+  margin: 'var(--space-md)',
+  fixed: false,
+  x: 'center',
+  y: 'center'
 };
-var name$7 = 'imposter';
+
+function generatePinningRules(x, y, margin) {
+  return "\n    " + generateXPinningRules(x, margin) + "\n    " + generateYPinningRules(y, margin) + "\n    " + (x === 'center' && y === 'center' ? "transform: translate(-50%,-50%);" : x === 'center' ? "transform: translateX(-50%);" : y === 'center' ? "transform: translateY(-50%);" : '') + "\n  ";
+}
+
+function generateXPinningRules(x, margin) {
+  if (x === 'left') {
+    return "\n      left: " + margin + ";\n    ";
+  }
+
+  if (x === 'right') {
+    return "\n      right: " + margin + ";\n    ";
+  }
+
+  if (x === 'full') {
+    return "\n      left: " + margin + ";\n      right: " + margin + ";\n    ";
+  }
+
+  return "\n      left: 50%;\n    ";
+}
+
+function generateYPinningRules(y, margin) {
+  if (y === 'top') {
+    return "\n      top: " + margin + ";\n    ";
+  }
+
+  if (y === 'bottom') {
+    return "\n      bottom: " + margin + ";\n    ";
+  }
+
+  if (y === 'full') {
+    return "\n      top: " + margin + ";\n      bottom: " + margin + ";\n    ";
+  }
+
+  return "\n      top: 50%;\n    ";
+}
+
+var name$8 = 'position';
 /**
- * Imposter layout component
+ * Position layout component
  */
 
-function Imposter(props) {
+function Position(props) {
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$7),
+    contextApi: useApi(name$8),
     defaultApi: defaultApi$6,
-    name: name$7,
+    name: name$8,
     props: props
@@ -541,10 +610,12 @@ }),
       margin = api.margin,
-      fixed = api.fixed;
-  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$7(), selector, selector, !breakout ? "\n              max-width: calc(100% - (" + margin + " * 2));\n              max-height: calc(100% - (" + margin + " * 2));\n              overflow: auto;" : '', fixed ? "\n              position: fixed;" : ''), React.createElement(Tag, Object.assign({}, passedProps), children));
+      fixed = api.fixed,
+      x = api.x,
+      y = api.y;
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$8(), selector, generatePinningRules(x, y, margin), !breakout ? "\n            max-width: calc(100% - (" + margin + " * 2));\n            max-height: calc(100% - (" + margin + " * 2));\n            overflow: auto;" : '', fixed ? "\n            position: fixed;" : ''), React.createElement(Tag, Object.assign({}, passedProps), children));
 }
 
-function _templateObject$8() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          overflow: hidden;\n        }\n  \n        ", " > * {\n          display: flex;\n          flex-wrap: wrap;\n          ", "\n          margin: calc(", " / 2 * -1);\n        }\n  \n        ", " > * > * {\n          margin: calc(", " / 2);\n          ", "\n          flex-grow: 1;\n        }\n  \n        ", " > * > :", ":not(style) {\n          flex-basis: 0;\n          flex-grow: 999;\n          min-width: calc(", " - ", ");\n        }\n      "]);
+function _templateObject$9() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          display: flex;\n          height: ", ";\n          overflow-x: auto;\n          overflow-y: hidden;\n          scrollbar-color: #fff #000;\n        }\n        \n        ", "::-webkit-scrollbar {\n          height: 1rem;\n        }\n        \n        ", "::-webkit-scrollbar-track {\n          background-color: #000;\n        }\n        \n        ", "::-webkit-scrollbar-thumb {\n          background-color: #000;\n          background-image: linear-gradient(#000 0, #000 0.25rem, #fff 0.25rem, #fff 0.75rem, #000 0.75rem);\n        }\n        \n        ", " > * {\n          flex: 0 0 ", ";\n        }\n        \n        \n        ", " > img {\n          height: 100%;\n          flex-basis: auto;\n          width: auto;\n        }\n        \n        ", " > * + * {\n          margin-left: ", ";\n        }\n        \n        ", ".overflowing {\n          padding-bottom: ", ";\n        }\n      "]);
 
-  _templateObject$8 = function _templateObject() {
+  _templateObject$9 = function _templateObject() {
     return data;
@@ -556,9 +627,47 @@ };
 var defaultApi$7 = {
+  itemWidth: 'auto',
+  space: 'var(--space-md)',
+  height: 'auto'
+};
+var name$9 = 'reel';
+/**
+ * Reel layout component
+ */
+
+function Reel(props) {
+  var _createLayoutConfig = createLayoutConfig({
+    contextApi: useApi(name$9),
+    defaultApi: defaultApi$7,
+    name: name$9,
+    props: props
+  }),
+      api = _createLayoutConfig.api,
+      children = _createLayoutConfig.children,
+      Tag = _createLayoutConfig.Tag,
+      passedProps = _createLayoutConfig.passedProps,
+      selector = _createLayoutConfig.selector;
+
+  var itemWidth = api.itemWidth,
+      space = api.space,
+      height = api.height;
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$9(), selector, height, selector, selector, selector, selector, itemWidth, selector, selector, space, selector, space), React.createElement(Tag, Object.assign({}, passedProps), React.createElement("div", null, children)));
+}
+
+function _templateObject$a() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          overflow: hidden;\n        }\n  \n        ", " > * {\n          display: flex;\n          flex-wrap: wrap;\n          ", "\n          margin: calc(", " / 2 * -1);\n          \n        }\n  \n        ", " > * > * {\n          margin: calc(", " / 2);\n          ", "\n          flex-grow: 1;\n        }\n  \n        ", " > * > :", ":not(style) {\n          flex-basis: 0;\n          flex-grow: 999;\n          min-width: calc(", " - ", ");\n        }\n      "]);
+
+  _templateObject$a = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var defaultApi$8 = {
   side: 'left',
   sideWidth: null,
   contentMin: '50%',
-  space: 'var(--s1)',
-  isStretch: false
+  space: '0',
+  stretch: false
 };
-var name$8 = 'sidebar';
+var name$a = 'sidebar';
 /**
@@ -570,5 +679,5 @@ * Sidebar layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$8),
-    defaultApi: defaultApi$7,
-    name: name$8,
+    contextApi: useApi(name$a),
+    defaultApi: defaultApi$8,
+    name: name$a,
     props: props
@@ -586,10 +695,11 @@ }),
       space = api.space,
-      isStretch = api.isStretch;
-  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$8(), selector, selector, !isStretch ? "align-items: flex-start;" : '', space, selector, space, sideWidth ? "flex-basis: " + sideWidth + ";" : '', selector, side === 'left' ? 'last-of-type' : 'first-of-type', contentMin, space), React.createElement(Tag, Object.assign({}, passedProps), React.createElement("div", null, children)));
+      stretch = api.stretch;
+  var unitSpace = space === '0' ? '0px' : space;
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$a(), selector, selector, !stretch ? "align-items: flex-start;" : '', unitSpace, selector, unitSpace, sideWidth ? "flex-basis: " + sideWidth + ";" : '', selector, side === 'left' ? 'last-of-type' : 'first-of-type', contentMin, unitSpace), React.createElement(Tag, Object.assign({}, passedProps), React.createElement("div", null, children)));
 }
 
-function _templateObject$9() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex: 1 0 auto;\n        }\n      "]);
+function _templateObject$b() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex: 1 1 auto;\n        }\n      "]);
 
-  _templateObject$9 = function _templateObject() {
+  _templateObject$b = function _templateObject() {
     return data;
@@ -600,3 +710,3 @@ };
 }
-var name$9 = 'spacer';
+var name$b = 'spacer';
 /**
@@ -608,3 +718,3 @@ * Spacer layout component
   var _createLayoutConfig = createLayoutConfig({
-    name: name$9,
+    name: name$b,
     props: props
@@ -617,9 +727,9 @@ }),
 
-  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$9(), selector), React.createElement(Tag, Object.assign({}, passedProps), children));
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$b(), selector), React.createElement(Tag, Object.assign({}, passedProps), children));
 }
 
-function _templateObject$a() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n        }\n    \n        ", " ", " *:not(style) ~ *:not(style) {\n          margin-top: ", ";\n        }\n      \n        ", "\n      "]);
+function _templateObject$c() {
+  var data = _taggedTemplateLiteralLoose(["\n        ", " {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n        }\n    \n        ", " ", " *:not(style) ~ *:not(style) {\n          margin-top: ", ";\n        }\n\n        ", " > .only-child {\n          height: 100%;\n        }\n\n        ", " > .split-after {\n          margin-bottom: auto;\n        }\n      "]);
 
-  _templateObject$a = function _templateObject() {
+  _templateObject$c = function _templateObject() {
     return data;
@@ -630,8 +740,8 @@ };
 }
-var defaultApi$8 = {
+var defaultApi$9 = {
   recursive: false,
-  splitAfter: null,
-  space: 'var(--s1)'
+  space: 'var(--space-md)',
+  splitAfter: null
 };
-var name$a = 'stack';
+var name$c = 'stack';
 /**
@@ -643,5 +753,5 @@ * Stack layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$a),
-    defaultApi: defaultApi$8,
-    name: name$a,
+    contextApi: useApi(name$c),
+    defaultApi: defaultApi$9,
+    name: name$c,
     props: props
@@ -658,9 +768,31 @@ }),
       splitAfter = api.splitAfter;
-  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$a(), selector, selector, !recursive ? '>' : '', space, splitAfter ? "\n            " + selector + ":only-child {\n            height: 100%;\n          }\n          " + selector + " > :nth-child(" + splitAfter + ") {\n            margin-bottom: auto;\n          }\n        " : ''), React.createElement(Tag, Object.assign({}, passedProps), children));
+  var ref = useRef(null);
+
+  if (splitAfter) {
+    useLayoutEffect(function () {
+      if (ref && ref.current) {
+        Array.from(ref.current.children).filter(function (child) {
+          return child.tagName !== 'STYLE';
+        }).forEach(function (child, i, list) {
+          if (list.length === 1) {
+            child.classList.add('only-child');
+          }
+
+          if (i + 1 === splitAfter) {
+            child.classList.add('split-after');
+          }
+        });
+      }
+    });
+  }
+
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$c(), selector, selector, !recursive ? '>' : '', space, selector, selector), React.createElement(Tag, Object.assign({
+    ref: ref
+  }, passedProps), children));
 }
 
-function _templateObject$b() {
+function _templateObject$d() {
   var data = _taggedTemplateLiteralLoose(["\n        ", " > * {\n          display: flex;\n          flex-wrap: wrap;\n          margin: calc((", " / 2) * -1);\n        }\n  \n        ", " > * > * {\n          flex-grow: 1;\n          flex-basis: calc((", " - (100% - ", ")) * 999);\n          margin: calc(", " / 2);\n        }\n  \n        ", " > * > :nth-last-of-type(n+", "):not(style),\n        ", " > * > :nth-last-of-type(n+", "):not(style) ~ *:not(style) {\n          flex-basis: 100%;\n        }\n      "]);
 
-  _templateObject$b = function _templateObject() {
+  _templateObject$d = function _templateObject() {
     return data;
@@ -671,8 +803,8 @@ };
 }
-var defaultApi$9 = {
+var defaultApi$a = {
   threshold: 'var(--measure)',
-  space: 'var(--s1)',
+  space: 'var(--space-md)',
   limit: 4
 };
-var name$b = 'switcher';
+var name$d = 'switcher';
 /**
@@ -684,5 +816,5 @@ * Switcher layout component
   var _createLayoutConfig = createLayoutConfig({
-    contextApi: useApi(name$b),
-    defaultApi: defaultApi$9,
-    name: name$b,
+    contextApi: useApi(name$d),
+    defaultApi: defaultApi$a,
+    name: name$d,
     props: props
@@ -699,6 +831,6 @@ }),
       limit = api.limit;
-  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$b(), selector, space, selector, threshold, space, space, selector, Number(limit) + 1, selector, Number(limit) + 1), React.createElement(Tag, Object.assign({}, passedProps), children));
+  return React.createElement(React.Fragment, null, createStyleTag(_templateObject$d(), selector, space, selector, threshold, space, space, selector, Number(limit) + 1, selector, Number(limit) + 1), React.createElement(Tag, Object.assign({}, passedProps), React.createElement("div", null, children)));
 }
 
-export { Box, Breakout, Center, Cover, Frame, Grid, Group, Imposter, Sidebar, Spacer, Stack, Switcher };
+export { Box, Breakout, Center, Container, Cover, Frame, Grid, Group, Position, Reel, Sidebar, Spacer, Stack, Switcher };
 //# sourceMappingURL=layout-blocks.esm.js.map

package.json

 {
-  "version": "0.1.5",
+  "version": "0.2.0",
   "license": "MIT",
@@ -19,3 +19,3 @@ "main": "dist/index.js",
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16.8"
   },
@@ -62,3 +62,5 @@ "husky": {
     "resize-observer-polyfill": "^1.5.1"
-  }
+  },
+  "description": "Reusable layout components for your React project",
+  "repository": "https://github.com/cdonohue/layout-blocks.git"
 }

README.md

 # Layout Blocks
+
+Reusable layout components for your React project
+
+```
+npm i layout-blocks
+```
+
+## Components
+
+### `Box`
+
+Pad all sides (or none at all)
+
+```
+import { Box } from 'layout-blocks'
+```
+
+| prop    | type   | description                 | default     |
+| ------- | ------ | --------------------------- | ----------- |
+| padding | string | `padding` value for content | `var(--s1)` |
+| as      | string | HTML element to render      | `div`       |
+
+### `Breakout`
+
+Break out of a containing element
+
+```
+import { Breakout } from 'layout-blocks'
+```
+
+| prop | type   | description            | default |
+| ---- | ------ | ---------------------- | ------- |
+| as   | string | HTML element to render | `div`   |
+
+### `Center`
+
+Center content horizontally
+
+```
+import { Center } from 'layout-blocks'
+```
+
+| prop       | type    | description                            | default          |
+| ---------- | ------- | -------------------------------------- | ---------------- |
+| max        | string  | Maximum width to limit content         | `var(--measure)` |
+| centerText | boolean | Also center the text within            | `false`          |
+| gutter     | string  | Space on each side of the content      | `0`              |
+| intrinsic  | boolean | Center children based on content width | `false`          |
+| as         | string  | HTML element to render                 | `div`            |
+
+### `Container`
+
+Contain children (enforces `relative` positioning)
+
+```
+import { Container } from 'layout-blocks'
+```
+
+| prop | type   | description            | default |
+| ---- | ------ | ---------------------- | ------- |
+| as   | string | HTML element to render | `div`   |
+
+### `Cover`
+
+"Cover" a height and vertically center the content within (like Hero elements)
+
+```
+import { Cover } from 'layout-blocks'
+```
+
+| prop          | type    | description                                                                              | default     |
+| ------------- | ------- | ---------------------------------------------------------------------------------------- | ----------- |
+| centeredIndex | number  | 1-based index of what child to center vertically (has no effect when there is one child) | `2`         |
+| space         | string  | Spacing between child elements                                                           | `var(--s1)` |
+| minHeight     | string  | Minimum height to cover                                                                  | `100vh`     |
+| isPadded      | boolean | Also use the `space` value to pad the container                                          | `false`     |
+| as            | string  | HTML element to render                                                                   | `div`       |
+
+### `Frame`
+
+Properly crop an image/video to an aspect ratio
+
+```
+import { Frame } from 'layout-blocks'
+```
+
+| prop  | type   | description                                  | default |
+| ----- | ------ | -------------------------------------------- | ------- |
+| ratio | string | Aspect ratio of element (`[width]:[height]`) | `16:9`  |
+| as    | string | HTML element to render                       | `div`   |
+
+### `Grid`
+
+Display a grid of items with a minimum width
+
+```
+import { Grid } from 'layout-blocks'
+```
+
+| prop  | type   | description                               | default     |
+| ----- | ------ | ----------------------------------------- | ----------- |
+| min   | string | Minimum width of children                 | `250px`     |
+| space | string | Space value used for gap between children | `var(--s1)` |
+| as    | string | HTML element to render                    | `div`       |
+
+### `Group`
+
+Show an overflowing group of things horizontally, each with maybe a different width
+
+```
+import { Group } from 'layout-blocks'
+```
+
+| prop    | type   | description                                                                                      | default     |
+| ------- | ------ | ------------------------------------------------------------------------------------------------ | ----------- |
+| align   | string | Vertical alignment (`start`, `center`, `end`, `stretch`)                                         | `center`    |
+| justify | string | Horizontal alignment (`start`, `center`, `end`, `space-between`, `space-around`, `space-evenly`) | `start`     |
+| space   | string | Space value used for gap between children                                                        | `var(--s1)` |
+| as      | string | HTML element to render                                                                           | `div`       |
+
+### `Position`
+
+Position content outside of it's normal flow
+
+```
+import { Position } from 'layout-blocks'
+```
+
+| prop   | type    | description                                                   | default     |
+| ------ | ------- | ------------------------------------------------------------- | ----------- |
+| margin | string  | Space to offset from the edge of the containing element       | `var(--s1)` |
+| fixed  | boolean | Contain the element to the viewport (instead of the document) | `false`     |
+| x      | string  | Positioning along x-axis (`left`, `center`, `right`, `full`)  | `center`    |
+| y      | string  | Positioning along y-axis (`top`, `center`, `bottom`, `full`)  | `center`    |
+| as     | string  | HTML element to render                                        | `div`       |
+
+### `Sidebar`
+
+Show a sidebar/content horizontal layout that stacks vertically at a certain threshold
+
+```
+import { Sidebar } from 'layout-blocks'
+```
+
+| prop       | type    | description                                                                                                                                     | default |
+| ---------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| side       | string  | Side to treat as the sidebar                                                                                                                    | `left`  |
+| sideWidth  | string  | Width value to limit the sidebar to in horizontal mode                                                                                          | `false` |
+| contentMin | string  | Percentage value to use as the breakpoint for the element opposite the sidebar (going under this percentage switches over to a vertical layout) | `50%`   |
+| space      | string  | Space between elements (sidebar and content)                                                                                                    | `0`     |
+| stretch    | boolean | Stretch sidebar to match content (and vice versa)                                                                                               | `false` |
+| as         | string  | HTML element to render                                                                                                                          | `div`   |
+
+### `Stack`
+
+Vertically position a list of things (with optional spacing)
+
+```
+import { Stack } from 'layout-blocks'
+```
+
+| prop      | type    | description                                   | default     |
+| --------- | ------- | --------------------------------------------- | ----------- |
+| space     | string  | Vertical space between child elements         | `var(--s1)` |
+| recursive | boolean | Recursively apply spacing (for nested stacks) | `false`     |
+| as        | string  | HTML element to render                        | `div`       |
+
+### `Switcher`
+
+Show a list of things horizontally, then stack when a container thershold is met
+
+```
+import { Switcher } from 'layout-blocks'
+```
+
+| prop      | type   | description                                    | default          |
+| --------- | ------ | ---------------------------------------------- | ---------------- |
+| threshold | string | Breakpoint to layout items in a vertical stack | `var(--measure)` |
+| space     | string | Space value used for the gap between children  | `var(--s1)`      |
+| limit     | number | Number of items to limit to one row            | `4`              |
+| as        | string | HTML element to render                         | `div`            |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

222170

increased by26.23%

Number of package files

31

increased by3.33%

Lines of code

1774

increased by19.22%

Number of lines in readme file

183

increased by9050%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes