@thecb/components 7.5.1 → 7.5.2

package/dist/src/components/atoms/layouts/Grid.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useRef, useState, useLayoutEffect, Fragment } from "react";
+import { GridWrapper } from "./Grid.styled";
+import { safeChildren } from "../../../util/general";
+var Grid = function (_a) {
+    var columnGap = _a.columnGap, _b = _a.minColWidth, minColWidth = _b === void 0 ? 20 : _b, _c = _a.maxColWidth, maxColWidth = _c === void 0 ? "1fr" : _c, children = _a.children, rest = __rest(_a, ["columnGap", "minColWidth", "maxColWidth", "children"]);
+    var ref = useRef();
+    var _d = useState(0), width = _d[0], setWidth = _d[1];
+    var _e = useState(true), aboveMin = _e[0], setAboveMin = _e[1];
+    useLayoutEffect(function () {
+        var currentWidth = ref.current.getBoundingClientRect().width;
+        setWidth(currentWidth);
+        setAboveMin(currentWidth >= minColWidth * 16);
+    }, [ref.current, width]);
+    return (React.createElement(GridWrapper, __assign({ ref: ref, columnGap: columnGap, aboveMin: aboveMin, minColWidth: typeof minColWidth === "number" ? "".concat(minColWidth, "rem") : minColWidth, maxColWidth: typeof maxColWidth === "number" ? "".concat(maxColWidth, "rem") : maxColWidth }, rest), safeChildren(children, React.createElement(Fragment, null))));
+};
+export default Grid;

package/dist/src/components/atoms/layouts/Grid.styled.d.ts

@@ -0,0 +1 @@
+export const GridWrapper: any;

package/dist/src/components/atoms/layouts/Grid.styled.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+export var GridWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-gap: ", ";\n  grid-template-columns: ", ";\n\n  @supports (width: min(", ", 100%)) {\n    & {\n      grid-template-columns: repeat(\n        auto-fill,\n        minmax(\n          ", ",\n          ", "\n        )\n      );\n    }\n  }\n"], ["\n  display: grid;\n  grid-gap: ", ";\n  grid-template-columns: ", ";\n\n  @supports (width: min(", ", 100%)) {\n    & {\n      grid-template-columns: repeat(\n        auto-fill,\n        minmax(\n          ", ",\n          ", "\n        )\n      );\n    }\n  }\n"])), function (_a) {
+    var columnGap = _a.columnGap;
+    return columnGap;
+}, function (_a) {
+    var aboveMin = _a.aboveMin, minColWidth = _a.minColWidth, maxColWidth = _a.maxColWidth;
+    return aboveMin
+        ? "repeat(auto-fill, minmax(".concat(minColWidth, ", ").concat(maxColWidth, "))")
+        : "100%";
+}, function (_a) {
+    var minColWidth = _a.minColWidth;
+    return minColWidth;
+}, function (_a) {
+    var minColWidth = _a.minColWidth;
+    return minColWidth;
+}, function (_a) {
+    var maxColWidth = _a.maxColWidth;
+    return maxColWidth;
+});
+var templateObject_1;

package/dist/src/components/atoms/layouts/Imposter.d.ts

@@ -0,0 +1,13 @@
+export default Imposter;
+declare function Imposter({ fixed, verticalMargin, horizontalMargin, breakout, top, left, centered, visible, children, ...rest }: {
+    [x: string]: any;
+    fixed?: boolean | undefined;
+    verticalMargin?: string | undefined;
+    horizontalMargin?: string | undefined;
+    breakout?: boolean | undefined;
+    top?: string | undefined;
+    left?: string | undefined;
+    centered?: boolean | undefined;
+    visible?: boolean | undefined;
+    children: any;
+}): JSX.Element;

package/dist/src/components/atoms/layouts/Imposter.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { Fragment } from "react";
+import { ImposterWrapper } from "./Imposter.styled";
+import { safeChildren } from "../../../util/general";
+/*
+  The imposter is used to position content over a parent node.
+  Great for tooltips, modals, dialogs, etc.
+  For this to work, the parent *must* have position: relative in it styles.
+  If using a <Box /> component, this can be specified using the extraStyles prop.
+
+  Imposter takes a few props:
+    -fixed (defaults to false): if true, position imposter relative to the viewport, not its parent
+    -verticalMargin (defaults to "0px"): space between edge of imposter and edge of its parent
+    -horizontalMargin (defaults to "0px"): space between edge of imposter and edge of its parent
+    -breakout (defaults to true): if false, contain imposter within parent. margins do not apply if      breakout is true.
+    -top (defaults to 50%): position from top of parent element
+    -left (defaults to 50%): position from left of parent element
+    -centered (defaults to false): if true, applies a transform such that the center of the imposter is
+     over the center of the parent element
+  
+  NOTE: Imposter is not accessible by default. If building a modal/dialog/tooltip, make sure your content has the appropriate aria-roles and is focusable via keyboard.
+
+*/
+var Imposter = function (_a) {
+    var _b = _a.fixed, fixed = _b === void 0 ? false : _b, _c = _a.verticalMargin, verticalMargin = _c === void 0 ? "0px" : _c, _d = _a.horizontalMargin, horizontalMargin = _d === void 0 ? "0px" : _d, _e = _a.breakout, breakout = _e === void 0 ? true : _e, _f = _a.top, top = _f === void 0 ? "50%" : _f, _g = _a.left, left = _g === void 0 ? "50%" : _g, _h = _a.centered, centered = _h === void 0 ? false : _h, _j = _a.visible, visible = _j === void 0 ? true : _j, children = _a.children, rest = __rest(_a, ["fixed", "verticalMargin", "horizontalMargin", "breakout", "top", "left", "centered", "visible", "children"]);
+    return (React.createElement(ImposterWrapper, __assign({ fixed: fixed, verticalMargin: verticalMargin, horizontalMargin: horizontalMargin, breakout: breakout, top: top, left: left, centered: centered, visible: visible }, rest), safeChildren(children, React.createElement(Fragment, null))));
+};
+export default Imposter;

package/dist/src/components/atoms/layouts/Imposter.styled.d.ts

@@ -0,0 +1 @@
+export const ImposterWrapper: any;

package/dist/src/components/atoms/layouts/Imposter.styled.js

@@ -0,0 +1,30 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+export var ImposterWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: ", ";\n  top: ", ";\n  left: ", ";\n  display: ", ";\n\n  ", "\n\n  ", "\n  ", ";\n"], ["\n  position: ", ";\n  top: ", ";\n  left: ", ";\n  display: ", ";\n\n  ", "\n\n  ", "\n  ", ";\n"])), function (_a) {
+    var fixed = _a.fixed;
+    return (fixed ? "fixed" : "absolute");
+}, function (_a) {
+    var top = _a.top;
+    return top;
+}, function (_a) {
+    var left = _a.left;
+    return left;
+}, function (_a) {
+    var visible = _a.visible;
+    return (visible ? "block" : "none");
+}, function (_a) {
+    var centered = _a.centered;
+    return (centered ? "transform: translate(-50%, -50%);" : "");
+}, function (_a) {
+    var breakout = _a.breakout, verticalMargin = _a.verticalMargin, horizontalMargin = _a.horizontalMargin;
+    return breakout
+        ? ""
+        : "\n    overflow: auto;\n    max-width: calc(100% - (".concat(horizontalMargin, " * 2));\n    max-height: calc(100% - (").concat(verticalMargin, " * 2));\n  ");
+}, function (_a) {
+    var extraStyles = _a.extraStyles;
+    return extraStyles;
+});
+var templateObject_1;

package/dist/src/components/atoms/layouts/Motion.d.ts

@@ -0,0 +1,7 @@
+export function Motion({ position, padding, children, ...rest }: {
+    [x: string]: any;
+    position?: string | undefined;
+    padding?: string | undefined;
+    children: any;
+}): JSX.Element;
+export default Motion;

package/dist/src/components/atoms/layouts/Motion.js

@@ -0,0 +1,64 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { Fragment } from "react";
+import { MotionWrapper } from "./Motion.styled";
+import { safeChildren } from "../../../util/general";
+/*
+  Catch-all component for creating animations with Framer Motion library
+  Wraps the framer motion "motion.div" with styled components and allows for passing
+  of style props, like with all the other layout primitives.
+
+  Compatible with other layout primitives, you can wrap non-animating primitives in a Motion
+  to animate items. See the construction of the Collapsible Section and Radio Section for examples.
+
+  Motion is intentionally more flexible than our other layout primitives - this was done to avoid
+  creating motion versions of each primitive. Usually, the correct approach will be to wrap
+  other layout primitives with a Motion in order to animate:
+
+    <Motion>
+      <Cluster>
+        stuff...
+      </Cluster>
+    </Motion>
+
+    Motion components can be nested in order to animate both a primitive container as well as its
+    children:
+
+    <Motion>
+      <Stack>
+        <Motion>
+          <Box>cool stuff</Box>
+        </Motion>
+        <Motion>
+          <Box>other stuff</Box>
+        </Motion>
+      </Stack>
+    </Motion>
+  
+  This should be sufficient for most scenarios, but if you need to, you have the ability to make Motion act like all of the other primitives using the props provided.
+*/
+export var Motion = function (_a) {
+    var _b = _a.position, position = _b === void 0 ? "relative" : _b, _c = _a.padding, padding = _c === void 0 ? "0" : _c, children = _a.children, rest = __rest(_a, ["position", "padding", "children"]);
+    return (React.createElement(MotionWrapper, __assign({ position: position, padding: padding }, rest), safeChildren(children, React.createElement(Fragment, null))));
+};
+export default Motion;

package/dist/src/components/atoms/layouts/Motion.styled.d.ts

@@ -0,0 +1 @@
+export const MotionWrapper: any;

package/dist/src/components/atoms/layouts/Motion.styled.js

@@ -0,0 +1,71 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+import { motion } from "framer-motion";
+export var MotionWrapper = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: ", ";\n  display: ", ";\n  box-sizing: border-box;\n  padding: ", ";\n  border: ", ";\n  border-color: ", ";\n  border-size: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  text-align: ", ";\n  margin: ", ";\n\n  &:hover,\n  &:focus {\n    ", ";\n  }\n\n  &:active {\n    ", ";\n  }\n\n  &:disabled {\n    ", ";\n  }\n\n  ", ";\n"], ["\n  position: ", ";\n  display: ", ";\n  box-sizing: border-box;\n  padding: ", ";\n  border: ", ";\n  border-color: ", ";\n  border-size: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  text-align: ", ";\n  margin: ", ";\n\n  &:hover,\n  &:focus {\n    ", ";\n  }\n\n  &:active {\n    ", ";\n  }\n\n  &:disabled {\n    ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+    var position = _a.position;
+    return position;
+}, function (_a) {
+    var display = _a.display;
+    return display;
+}, function (_a) {
+    var padding = _a.padding;
+    return padding;
+}, function (_a) {
+    var borderShorthand = _a.borderShorthand;
+    return borderShorthand;
+}, function (_a) {
+    var borderColor = _a.borderColor;
+    return borderColor;
+}, function (_a) {
+    var borderSize = _a.borderSize;
+    return borderSize;
+}, function (_a) {
+    var borderStyle = _a.borderStyle;
+    return borderStyle;
+}, function (_a) {
+    var borderWidth = _a.borderWidth;
+    return borderWidth;
+}, function (_a) {
+    var borderRadius = _a.borderRadius;
+    return borderRadius;
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var boxShadow = _a.boxShadow;
+    return boxShadow;
+}, function (_a) {
+    var minHeight = _a.minHeight;
+    return minHeight;
+}, function (_a) {
+    var minWidth = _a.minWidth;
+    return minWidth;
+}, function (_a) {
+    var height = _a.height;
+    return height;
+}, function (_a) {
+    var width = _a.width;
+    return width;
+}, function (_a) {
+    var textAlign = _a.textAlign;
+    return textAlign;
+}, function (_a) {
+    var margin = _a.margin;
+    return margin;
+}, function (_a) {
+    var hoverStyles = _a.hoverStyles;
+    return hoverStyles;
+}, function (_a) {
+    var activeStyles = _a.activeStyles;
+    return activeStyles;
+}, function (_a) {
+    var disabledStyles = _a.disabledStyles;
+    return disabledStyles;
+}, function (_a) {
+    var extraStyles = _a.extraStyles;
+    return extraStyles;
+});
+var templateObject_1;

package/dist/src/components/atoms/layouts/Reel.d.ts

@@ -0,0 +1,13 @@
+export default Reel;
+declare function Reel({ childGap, height, childWidth, padding, justifyContent, disableScroll, useOrderedList, useUnorderedList, children, ...rest }: {
+    [x: string]: any;
+    childGap?: string | undefined;
+    height?: string | undefined;
+    childWidth?: string | undefined;
+    padding?: string | undefined;
+    justifyContent?: string | undefined;
+    disableScroll?: boolean | undefined;
+    useOrderedList?: boolean | undefined;
+    useUnorderedList?: boolean | undefined;
+    children: any;
+}): JSX.Element;

package/dist/src/components/atoms/layouts/Reel.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { Fragment } from "react";
+import { safeChildren } from "../../../util/general";
+import { ReelStyled } from "./Reel.styled";
+/*
+  Safari has a bug where it refuses to recognize <ul /> tags as lists when list-style: none is used
+  This affects the apple voice over (mainly used on iOS devices)
+  The solution is to explicitly include "role=List"
+*/
+var Reel = function (_a) {
+    var _b = _a.childGap, childGap = _b === void 0 ? "1rem" : _b, _c = _a.height, height = _c === void 0 ? "auto" : _c, _d = _a.childWidth, childWidth = _d === void 0 ? "auto" : _d, _e = _a.padding, padding = _e === void 0 ? "1rem" : _e, _f = _a.justifyContent, justifyContent = _f === void 0 ? "flex-start" : _f, _g = _a.disableScroll, disableScroll = _g === void 0 ? false : _g, _h = _a.useOrderedList, useOrderedList = _h === void 0 ? false : _h, _j = _a.useUnorderedList, useUnorderedList = _j === void 0 ? false : _j, children = _a.children, rest = __rest(_a, ["childGap", "height", "childWidth", "padding", "justifyContent", "disableScroll", "useOrderedList", "useUnorderedList", "children"]);
+    var elementType = useOrderedList ? "ol" : useUnorderedList ? "ul" : "div";
+    return (React.createElement(ReelStyled, __assign({ childGap: childGap, height: height, childWidth: childWidth, padding: padding, justifyContent: justifyContent, disableScroll: disableScroll, as: elementType, useOrderedList: useOrderedList, useUnorderedList: useUnorderedList }, rest, { role: useOrderedList || useUnorderedList ? "list" : "section" }), safeChildren(children, React.createElement(Fragment, null))));
+};
+export default Reel;

package/dist/src/components/atoms/layouts/Reel.styled.d.ts

@@ -0,0 +1 @@
+export const ReelStyled: any;

package/dist/src/components/atoms/layouts/Reel.styled.js

@@ -0,0 +1,30 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+export var ReelStyled = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  overflow-x: ", ";\n  padding: ", ";\n  height: ", ";\n  justify-content: ", ";\n\n  > * + * {\n    margin-left: ", ";\n  }\n\n  > * {\n    flex: 0 0 ", ";\n  }\n\n  ", "\n"], ["\n  display: flex;\n  overflow-x: ", ";\n  padding: ", ";\n  height: ", ";\n  justify-content: ", ";\n\n  > * + * {\n    margin-left: ", ";\n  }\n\n  > * {\n    flex: 0 0 ", ";\n  }\n\n  ", "\n"])), function (_a) {
+    var disableScroll = _a.disableScroll;
+    return (disableScroll ? "hidden" : "auto");
+}, function (_a) {
+    var padding = _a.padding;
+    return padding;
+}, function (_a) {
+    var height = _a.height;
+    return height;
+}, function (_a) {
+    var justifyContent = _a.justifyContent;
+    return justifyContent;
+}, function (_a) {
+    var childGap = _a.childGap;
+    return childGap;
+}, function (_a) {
+    var childWidth = _a.childWidth;
+    return childWidth;
+}, function (_a) {
+    var useOrderedList = _a.useOrderedList, useUnorderedList = _a.useUnorderedList;
+    return useOrderedList || useUnorderedList
+        ? "\n      margin: 0;\n      margin-block-start: 0;\n      margin-block-end: 0;\n      padding-inline-start: 0;\n      list-style-type: none;\n    "
+        : "";
+});
+var templateObject_1;

package/dist/src/components/atoms/layouts/Sidebar.d.ts

@@ -0,0 +1,11 @@
+export default Sidebar;
+declare function Sidebar({ childGap, width, sidebarOnRight, contentMinWidth, fullHeight, minHeight, children, ...rest }: {
+    [x: string]: any;
+    childGap?: string | undefined;
+    width: any;
+    sidebarOnRight?: boolean | undefined;
+    contentMinWidth?: string | undefined;
+    fullHeight?: boolean | undefined;
+    minHeight: any;
+    children: any;
+}): JSX.Element;

package/dist/src/components/atoms/layouts/Sidebar.js

@@ -0,0 +1,43 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { Fragment } from "react";
+import { SidebarWrapper, SidebarInnerWrapper } from "./Sidebar.styled";
+import { safeChildren } from "../../../util/general";
+/*
+  Component to assist in creating layouts with some element and a sidebar next to it
+  Sidebar takes a width value, this is the ideal target with, and what the sidebar
+  will be sized to on larger/medium screens
+
+  The component also takes a content minimum width, this should be a percentage
+  it represents the narrowest the content piece can get before the sidebar wraps to
+  the top of the layout. If not supplied, the sidebar will size to the width of its content.
+
+  This can be used for many use cases beyond the typical content/sidebar layout
+  Such as for pinning a button/icon next to a form input
+*/
+var Sidebar = function (_a) {
+    var _b = _a.childGap, childGap = _b === void 0 ? "1rem" : _b, width = _a.width, _c = _a.sidebarOnRight, sidebarOnRight = _c === void 0 ? false : _c, _d = _a.contentMinWidth, contentMinWidth = _d === void 0 ? "50%" : _d, _e = _a.fullHeight, fullHeight = _e === void 0 ? false : _e, minHeight = _a.minHeight, children = _a.children, rest = __rest(_a, ["childGap", "width", "sidebarOnRight", "contentMinWidth", "fullHeight", "minHeight", "children"]);
+    return (React.createElement(SidebarWrapper, __assign({ fullHeight: fullHeight, minHeight: minHeight }, rest),
+        React.createElement(SidebarInnerWrapper, { childGap: childGap, width: width, "$sidebarOnRight": sidebarOnRight, contentMinWidth: contentMinWidth, fullHeight: fullHeight, minHeight: minHeight }, safeChildren(children, React.createElement(Fragment, null)))));
+};
+export default Sidebar;

package/dist/src/components/atoms/layouts/Sidebar.styled.d.ts

@@ -0,0 +1,2 @@
+export const SidebarWrapper: any;
+export const SidebarInnerWrapper: any;

package/dist/src/components/atoms/layouts/Sidebar.styled.js

@@ -0,0 +1,59 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+export var SidebarWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: visible;\n  box-sizing: border-box;\n\n  ", "\n"], ["\n  overflow: visible;\n  box-sizing: border-box;\n\n  ", "\n"])), function (_a) {
+    var fullHeight = _a.fullHeight;
+    return (fullHeight ? "height: 100%;" : "");
+});
+export var SidebarInnerWrapper = styled(
+// eslint-disable-next-line no-unused-vars
+function (_a) {
+    var onRight = _a.onRight, childGap = _a.childGap, contentMinWidth = _a.contentMinWidth, minHeight = _a.minHeight, fullHeight = _a.fullHeight, props = __rest(_a, ["onRight", "childGap", "contentMinWidth", "minHeight", "fullHeight"]);
+    return (React.createElement("div", __assign({}, props)));
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  margin: calc(", " / 2 * -1);\n\n  > * {\n    margin: calc(", " / 2);\n    flex-grow: 1;\n    ", ";\n    ", "\n  }\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  margin: calc(", " / 2 * -1);\n\n  > * {\n    margin: calc(", " / 2);\n    flex-grow: 1;\n    ", ";\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var childGap = _a.childGap;
+    return childGap;
+}, function (_a) {
+    var childGap = _a.childGap;
+    return childGap;
+}, function (_a) {
+    var width = _a.width;
+    return (width ? "flex-basis: ".concat(width) : "");
+}, function (_a) {
+    var minHeight = _a.minHeight;
+    return (minHeight ? "margin-top: 0; margin-bottom: 0;" : "");
+}, function (_a) {
+    var $sidebarOnRight = _a.$sidebarOnRight, contentMinWidth = _a.contentMinWidth, childGap = _a.childGap;
+    return $sidebarOnRight
+        ? "> :first-child {\n      flex-basis: 0;\n      flex-grow: 999;\n      min-width: calc(".concat(contentMinWidth, " - ").concat(childGap, ");\n    }\n    ")
+        : "> :last-child {\n      flex-basis: 0;\n      flex-grow: 999;\n      min-width: calc(".concat(contentMinWidth, " - ").concat(childGap, ");\n    }");
+}, function (_a) {
+    var fullHeight = _a.fullHeight;
+    return (fullHeight ? "min-height: 100%;" : "");
+});
+var templateObject_1, templateObject_2;

package/dist/src/components/atoms/layouts/Stack.d.ts

@@ -0,0 +1,10 @@
+export default Stack;
+declare function Stack({ childGap, bottomItem, fullHeight, children, direction, justify, ...rest }: {
+    [x: string]: any;
+    childGap?: string | undefined;
+    bottomItem: any;
+    fullHeight?: boolean | undefined;
+    children: any;
+    direction?: string | undefined;
+    justify: any;
+}): JSX.Element;

package/dist/src/components/atoms/layouts/Stack.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { Fragment } from "react";
+import { StackWrapper } from "./Stack.styled";
+import { safeChildren } from "../../../util/general";
+/*
+  Component to impose margin-top between a list of child elements
+  Useful for things like sidebars and button lists
+  Avoids common pitfalls like having to manually adjust the margin
+  on first/last children
+
+  For more information and diagrams:
+  https://every-layout.dev/layouts/stack/
+*/
+var Stack = function (_a) {
+    var _b = _a.childGap, childGap = _b === void 0 ? "1rem" : _b, bottomItem = _a.bottomItem, _c = _a.fullHeight, fullHeight = _c === void 0 ? false : _c, children = _a.children, _d = _a.direction, direction = _d === void 0 ? "column" : _d, justify = _a.justify, rest = __rest(_a, ["childGap", "bottomItem", "fullHeight", "children", "direction", "justify"]);
+    return (React.createElement(StackWrapper, __assign({ childGap: childGap, bottomItem: bottomItem, fullHeight: fullHeight, direction: direction, justify: justify }, rest), safeChildren(children, React.createElement(Fragment, null))));
+};
+export default Stack;

package/dist/src/components/atoms/layouts/Stack.styled.d.ts

@@ -0,0 +1 @@
+export const StackWrapper: any;

package/dist/src/components/atoms/layouts/Stack.styled.js

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+export var StackWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  height: ", ";\n\n  > * {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  > * + * {\n    ", "\n  }\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  height: ", ";\n\n  > * {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  > * + * {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
+    var direction = _a.direction;
+    return direction;
+}, function (_a) {
+    var justify = _a.justify;
+    return (justify ? justify : "flex-start");
+}, function (_a) {
+    var fullHeight = _a.fullHeight;
+    return (fullHeight ? "100%" : "auto");
+}, function (_a) {
+    var direction = _a.direction, childGap = _a.childGap;
+    return direction === "row"
+        ? "margin-left: ".concat(childGap, ";")
+        : "margin-top: ".concat(childGap, ";");
+}, function (_a) {
+    var bottomItem = _a.bottomItem, direction = _a.direction;
+    return bottomItem
+        ? "\n    > :nth-child(".concat(bottomItem, ") {\n        ").concat(direction === "row" ? "margin-left: auto;" : "margin-top: auto;", "\n    }\n  ")
+        : "";
+});
+var templateObject_1;

package/dist/src/components/atoms/layouts/Switcher.d.ts

@@ -0,0 +1,14 @@
+export default Switcher;
+declare function Switcher({ breakpoint, childGap, largeChild, largeChildSize, maxChildren, maxChildrenOnly, padding, children, extraStyles, constrainMobile, ...rest }: {
+    [x: string]: any;
+    breakpoint?: string | undefined;
+    childGap?: string | undefined;
+    largeChild: any;
+    largeChildSize: any;
+    maxChildren: any;
+    maxChildrenOnly?: boolean | undefined;
+    padding?: string | undefined;
+    children: any;
+    extraStyles: any;
+    constrainMobile?: boolean | undefined;
+}): JSX.Element;