@thecb/components 7.5.1 → 7.5.2

package/dist/src/components/atoms/labeled-amount/LabeledAmount.d.ts

@@ -0,0 +1,5 @@
+declare const _default: ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;
+export default _default;

package/dist/src/components/atoms/labeled-amount/LabeledAmount.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { fallbackValues } from "./LabeledAmount.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { Stack } from "../layouts";
+import Heading from "../heading";
+import Paragraph from "../paragraph";
+var LabeledAmount = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? "pL" : _b, label = _a.label, amount = _a.amount, themeValues = _a.themeValues, as = _a.as, extraStyles = _a.extraStyles;
+    var LabeledAmountText = variant === "h6" ? Heading : Paragraph;
+    return (React.createElement(Stack, { direction: "row" },
+        React.createElement(LabeledAmountText, { variant: variant, as: as, weight: themeValues.fontWeight, extraStyles: "".concat(extraStyles, "; text-align: start; flex: 3;") },
+            label,
+            ":"),
+        React.createElement(LabeledAmountText, { variant: variant, as: as, weight: themeValues.fontWeight, extraStyles: "".concat(extraStyles, "; text-align: end; flex: 1;") }, amount)));
+};
+export default themeComponent(LabeledAmount, "LabeledAmount", fallbackValues, "default");

package/dist/src/components/atoms/labeled-amount/LabeledAmount.stories.d.ts

@@ -0,0 +1,7 @@
+export function labeledAmount(): JSX.Element;
+export default story;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/atoms/labeled-amount/LabeledAmount.stories.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
+import LabeledAmount from "./LabeledAmount";
+import page from "../../../../.storybook/page";
+var variantsLabel = "variant";
+var variants = {
+    default: "default",
+    p: "p",
+    pL: "pL",
+    h6: "h6",
+    None: undefined
+};
+var defaultValue = "default";
+var groupId = "props";
+export var labeledAmount = function () { return (React.createElement(LabeledAmount, { variant: select(variantsLabel, variants, defaultValue, groupId), label: text("label", "Amount", groupId), amount: text("amount", "$1.23", groupId) })); };
+var story = page({
+    title: "Components|Atoms/LabeledAmount",
+    Component: LabeledAmount
+});
+export default story;

package/dist/src/components/atoms/labeled-amount/LabeledAmount.theme.d.ts

@@ -0,0 +1,12 @@
+export namespace fallbackValues {
+    export { fontWeight };
+}
+declare namespace fontWeight {
+    const _default: string;
+    export { _default as default };
+    export const pS: string;
+    export const p: string;
+    export const pL: string;
+    export const h6: string;
+}
+export {};

package/dist/src/components/atoms/labeled-amount/LabeledAmount.theme.js

@@ -0,0 +1,10 @@
+var fontWeight = {
+    default: "600",
+    pS: "600",
+    p: "600",
+    pL: "600",
+    h6: "700"
+};
+export var fallbackValues = {
+    fontWeight: fontWeight
+};

package/dist/src/components/atoms/labeled-amount/index.d.ts

@@ -0,0 +1,2 @@
+export default LabeledAmount;
+import LabeledAmount from "./LabeledAmount";

package/dist/src/components/atoms/labeled-amount/index.js

@@ -0,0 +1,2 @@
+import LabeledAmount from "./LabeledAmount";
+export default LabeledAmount;

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

@@ -0,0 +1,3 @@
+export default Box;
+declare const Box: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

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

@@ -0,0 +1,37 @@
+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, forwardRef } from "react";
+import { BoxWrapper } from "./Box.styled";
+import { safeChildren, screenReaderOnlyStyle } from "../../../util/general";
+/*
+  Box component to create generic boxes
+  Supply padding, border, background, and color values
+
+  srOnly prop enables special screen-reader style that is used to position content
+  completely off screen (only for users of screen readers)
+*/
+var Box = forwardRef(function (_a, ref) {
+    var _b = _a.padding, padding = _b === void 0 ? "16px" : _b, _c = _a.borderSize, borderSize = _c === void 0 ? "0px" : _c, _d = _a.borderColor, borderColor = _d === void 0 ? "transparent" : _d, borderRadius = _a.borderRadius, _e = _a.boxShadow, boxShadow = _e === void 0 ? "none" : _e, background = _a.background, color = _a.color, minHeight = _a.minHeight, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, borderWidthOverride = _a.borderWidthOverride, border = _a.border, textAlign = _a.textAlign, hoverStyles = _a.hoverStyles, activeStyles = _a.activeStyles, disabledStyles = _a.disabledStyles, variant = _a.variant, as = _a.as, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onFocus = _a.onFocus, onBlur = _a.onBlur, onTouchEnd = _a.onTouchEnd, theme = _a.theme, hiddenStyles = _a.hiddenStyles, extraStyles = _a.extraStyles, _f = _a.srOnly, srOnly = _f === void 0 ? false : _f, dataQa = _a.dataQa, children = _a.children, rest = __rest(_a, ["padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"]);
+    return (React.createElement(BoxWrapper, __assign({ padding: padding, borderSize: borderSize, borderColor: borderColor, boxShadow: boxShadow, color: color, minHeight: minHeight, width: width, minWidth: minWidth, maxWidth: maxWidth, background: background, borderRadius: borderRadius, borderWidthOverride: borderWidthOverride, border: border, hoverStyles: hoverStyles, activeStyles: activeStyles, disabledStyles: disabledStyles, variant: variant, as: as, onClick: onClick, hiddenStyles: hiddenStyles, onKeyDown: onKeyDown, extraStyles: srOnly ? "".concat(screenReaderOnlyStyle).concat(extraStyles) : extraStyles, theme: theme, textAlign: textAlign, "data-qa": dataQa, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onTouchEnd: onTouchEnd, ref: ref }, rest), children && safeChildren(children, React.createElement(Fragment, null))));
+});
+export default Box;

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

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

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

@@ -0,0 +1,107 @@
+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, { css } from "styled-components";
+import { ROYAL_BLUE } from "../../../constants/colors";
+/*
+  The child span selector on hover styles targets the text inside of buttons when a button is hovered,
+  as long as the box wrapper has an "as" prop equal to "button"
+
+  The extracting of props and the disabling of the eslint rule is to stop React from complaining about
+  unrecognized DOM attributes.
+*/
+/* eslint-disable no-unused-vars */
+export var BoxWrapper = styled(function (_a) {
+    var activeStyles = _a.activeStyles, hoverStyles = _a.hoverStyles, disabledStyles = _a.disabledStyles, extraStyles = _a.extraStyles, borderSize = _a.borderSize, borderColor = _a.borderColor, borderWidthOverride = _a.borderWidthOverride, borderRadius = _a.borderRadius, textAlign = _a.textAlign, boxShadow = _a.boxShadow, minHeight = _a.minHeight, minWidth = _a.minWidth, maxWidth = _a.maxWidth, padding = _a.padding, hiddenStyles = _a.hiddenStyles, ariaControls = _a.ariaControls, ariaLabel = _a.ariaLabel, props = __rest(_a, ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles", "ariaControls", "ariaLabel"]);
+    return React.createElement("div", __assign({ "aria-controls": ariaControls, "aria-label": ariaLabel }, props));
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  box-sizing: border-box;\n  padding: ", ";\n  border: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  min-height: ", ";\n  ", "\n  min-width: ", ";\n  max-width: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  text-align: ", ";\n\n  &:hover {\n    ", "\n  }\n\n   &:focus {\n    ", "\n  }\n\n  &:active {\n    ", "\n  }\n\n  &:disabled {\n    ", "\n  }\n\n  & * {\n    color: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  position: relative;\n  box-sizing: border-box;\n  padding: ", ";\n  border: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  min-height: ", ";\n  ", "\n  min-width: ", ";\n  max-width: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  text-align: ", ";\n\n  &:hover {\n    ", "\n  }\n\n   &:focus {\n    ", "\n  }\n\n  &:active {\n    ", "\n  }\n\n  &:disabled {\n    ", "\n  }\n\n  & * {\n    color: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
+    var padding = _a.padding;
+    return padding;
+}, function (_a) {
+    var border = _a.border, borderSize = _a.borderSize, borderColor = _a.borderColor;
+    return border ? border : "".concat(borderSize, " solid ").concat(borderColor);
+}, function (_a) {
+    var boxShadow = _a.boxShadow;
+    return boxShadow;
+}, function (_a) {
+    var background = _a.background;
+    return background;
+}, function (_a) {
+    var minHeight = _a.minHeight;
+    return (minHeight ? minHeight : "auto");
+}, function (_a) {
+    var width = _a.width;
+    return width && "width: ".concat(width, ";");
+}, function (_a) {
+    var minWidth = _a.minWidth;
+    return (minWidth ? minWidth : "auto");
+}, function (_a) {
+    var maxWidth = _a.maxWidth;
+    return (maxWidth ? maxWidth : "auto");
+}, function (_a) {
+    var color = _a.color;
+    return color;
+}, function (_a) {
+    var borderRadius = _a.borderRadius;
+    return borderRadius;
+}, function (_a) {
+    var borderWidthOverride = _a.borderWidthOverride;
+    return borderWidthOverride;
+}, function (_a) {
+    var textAlign = _a.textAlign;
+    return textAlign;
+}, function (_a) {
+    var hoverStyles = _a.hoverStyles, as = _a.as;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n        ", "\n      "], ["\n        ", "\n        ", "\n      "])), hoverStyles, as === "button"
+        ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }")
+        : "");
+}, function (_a) {
+    var as = _a.as;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        outline: 3px solid ", ";\n        outline-offset: 2px;\n        ", "\n      "], ["\n        outline: 3px solid ", ";\n        outline-offset: 2px;\n        ", "\n      "])), ROYAL_BLUE, as === "button" &&
+        "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
+}, function (_a) {
+    var activeStyles = _a.activeStyles, as = _a.as;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", "\n        ", "\n      "], ["\n        ", "\n        ", "\n      "])), activeStyles, as === "button"
+        ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }")
+        : "");
+}, function (_a) {
+    var disabledStyles = _a.disabledStyles, as = _a.as;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        ", "\n        ", "\n      "], ["\n        ", "\n        ", "\n      "])), disabledStyles, as === "button"
+        ? "        > * > span {\n          ".concat(disabledStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }")
+        : "");
+}, function (_a) {
+    var color = _a.color;
+    return color;
+}, function (_a) {
+    var hiddenStyles = _a.hiddenStyles;
+    return hiddenStyles && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])));
+}, function (_a) {
+    var extraStyles = _a.extraStyles;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), extraStyles);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+/* eslint-enable no-unused-vars */

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

@@ -0,0 +1,8 @@
+export default Center;
+declare function Center({ maxWidth, gutters, intrinsic, children, ...rest }: {
+    [x: string]: any;
+    maxWidth: any;
+    gutters: any;
+    intrinsic?: boolean | undefined;
+    children: any;
+}): JSX.Element;

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

@@ -0,0 +1,35 @@
+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 { CenterWrapper } from "./Center.styled";
+import { safeChildren } from "../../../util/general";
+/*
+  Component to horizontally center itself (with auto right and left margins)
+  Use intrinsic prop if you want its children that are narrower than the max-width
+  to also be centered within the center wrapper itself
+*/
+var Center = function (_a) {
+    var maxWidth = _a.maxWidth, gutters = _a.gutters, _b = _a.intrinsic, intrinsic = _b === void 0 ? false : _b, children = _a.children, rest = __rest(_a, ["maxWidth", "gutters", "intrinsic", "children"]);
+    return (React.createElement(CenterWrapper, __assign({ maxWidth: maxWidth, gutters: gutters, intrinsic: intrinsic }, rest), safeChildren(children, React.createElement(Fragment, null))));
+};
+export default Center;

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

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

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

@@ -0,0 +1,21 @@
+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 CenterWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: content-box;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n"], ["\n  box-sizing: content-box;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n"])), function (_a) {
+    var maxWidth = _a.maxWidth;
+    return maxWidth;
+}, function (_a) {
+    var gutters = _a.gutters;
+    return gutters;
+}, function (_a) {
+    var gutters = _a.gutters;
+    return gutters;
+}, function (_a) {
+    var intrinsic = _a.intrinsic;
+    return intrinsic
+        ? "\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  "
+        : "";
+});
+var templateObject_1;

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

@@ -0,0 +1,16 @@
+export default Cluster;
+declare function Cluster({ justify, align, childGap, minHeight, minWidth, nowrap, overflow, justifySelf, alignSelf, flexGrow, extraStyles, children, ...rest }: {
+    [x: string]: any;
+    justify: any;
+    align: any;
+    childGap: any;
+    minHeight: any;
+    minWidth: any;
+    nowrap: any;
+    overflow?: boolean | undefined;
+    justifySelf: any;
+    alignSelf: any;
+    flexGrow: any;
+    extraStyles: any;
+    children: any;
+}): JSX.Element;

package/dist/src/components/atoms/layouts/Cluster.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 { ClusterWrapper, ClusterInnerWrapper } from "./Cluster.styled";
+import { safeChildren } from "../../../util/general";
+/*
+  Cluster components suit any groups of elements that differ in
+  length and are liable to wrap. Buttons that appear together at the
+  end of forms are ideal candidates, as well as lists of tags
+  keywords, or other meta information. Use the Cluster to align any
+  groups of horizontally laid out elements to the left or right, or
+  in the center.
+*/
+var Cluster = function (_a) {
+    var justify = _a.justify, align = _a.align, childGap = _a.childGap, minHeight = _a.minHeight, minWidth = _a.minWidth, nowrap = _a.nowrap, _b = _a.overflow, overflow = _b === void 0 ? false : _b, justifySelf = _a.justifySelf, alignSelf = _a.alignSelf, flexGrow = _a.flexGrow, extraStyles = _a.extraStyles, children = _a.children, rest = __rest(_a, ["justify", "align", "childGap", "minHeight", "minWidth", "nowrap", "overflow", "justifySelf", "alignSelf", "flexGrow", "extraStyles", "children"]);
+    return (React.createElement(ClusterWrapper, __assign({ overflow: overflow }, rest, { "$justifySelf": justifySelf, "$alignSelf": alignSelf, "$flexGrow": flexGrow, "$extraStyles": extraStyles }),
+        React.createElement(ClusterInnerWrapper, { justify: justify, align: align, childGap: childGap, minHeight: minHeight, minWidth: minWidth, "$nowrap": nowrap }, safeChildren(children, React.createElement(Fragment, null)))));
+};
+export default Cluster;

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

@@ -0,0 +1,2 @@
+export const ClusterWrapper: any;
+export const ClusterInnerWrapper: any;

package/dist/src/components/atoms/layouts/Cluster.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;
+};
+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";
+/* eslint-disable no-unused-vars */
+export var ClusterWrapper = styled(function (_a) {
+    var overflow = _a.overflow, props = __rest(_a, ["overflow"]);
+    return (React.createElement("div", __assign({}, props)));
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: ", ";\n  box-sizing: border-box;\n  justify-self: ", ";\n  align-self: ", ";\n  flex-grow: ", ";\n  ", ";\n"], ["\n  overflow: ", ";\n  box-sizing: border-box;\n  justify-self: ", ";\n  align-self: ", ";\n  flex-grow: ", ";\n  ", ";\n"])), function (_a) {
+    var overflow = _a.overflow;
+    return (overflow ? "visible" : "hidden");
+}, function (_a) {
+    var $justifySelf = _a.$justifySelf;
+    return $justifySelf;
+}, function (_a) {
+    var $alignSelf = _a.$alignSelf;
+    return $alignSelf;
+}, function (_a) {
+    var $flexGrow = _a.$flexGrow;
+    return $flexGrow;
+}, function (_a) {
+    var $extraStyles = _a.$extraStyles;
+    return $extraStyles;
+});
+export var ClusterInnerWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  margin: calc(", " / 2 * -1);\n  min-height: ", ";\n  min-width: ", ";\n  > * {\n    margin: calc(", " / 2);\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  margin: calc(", " / 2 * -1);\n  min-height: ", ";\n  min-width: ", ";\n  > * {\n    margin: calc(", " / 2);\n  }\n"])), function (_a) {
+    var $nowrap = _a.$nowrap;
+    return ($nowrap ? "nowrap" : "wrap");
+}, function (_a) {
+    var justify = _a.justify;
+    return justify;
+}, function (_a) {
+    var align = _a.align;
+    return align;
+}, function (_a) {
+    var childGap = _a.childGap;
+    return childGap;
+}, function (_a) {
+    var minHeight = _a.minHeight;
+    return minHeight;
+}, function (_a) {
+    var minWidth = _a.minWidth;
+    return minWidth;
+}, function (_a) {
+    var childGap = _a.childGap;
+    return childGap;
+});
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,11 @@
+export default Cover;
+declare function Cover({ minHeight, childGap, padding, fillCenter, singleChild, centerOverride, children, ...rest }: {
+    [x: string]: any;
+    minHeight?: string | undefined;
+    childGap: any;
+    padding: any;
+    fillCenter: any;
+    singleChild: any;
+    centerOverride: any;
+    children: any;
+}): JSX.Element;

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

@@ -0,0 +1,52 @@
+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 { CoverOuterContainer } from "./Cover.styled";
+/*
+  The Cover component is used when you want to have one center element
+  and an optional top/header element and/or an optional bottom/footer element.
+  The classic use case is for an "above the fold" page layout in which you have a header, footer, and center content of variable size. When the center content is smaller than
+  minHeight, the cover expands to minHeight and centers the content, while anchoring
+  the optional top element to the top, and the optional bottom element to the bottom.
+
+  If the center content is taller than minHeight, then the entire cover exapnds, while
+  still anchorhing the top and bottom elements where they belong.
+
+  Note: This component is only concerned with vertical centering. To also
+  horizontally center your content, combine it with the Center component.
+  Therefore childGap only sets vertical margins in this component.
+
+  Props:
+  fillCenter:
+      If true instead of centering the middle content it will grow to fill the space
+      WARNING: May act unexpectedly if children have flex-grow property on them
+*/
+var Cover = function (_a) {
+    var _b = _a.minHeight, minHeight = _b === void 0 ? "100%" : _b, childGap = _a.childGap, padding = _a.padding, fillCenter = _a.fillCenter, singleChild = _a.singleChild, centerOverride = _a.centerOverride, children = _a.children, rest = __rest(_a, ["minHeight", "childGap", "padding", "fillCenter", "singleChild", "centerOverride", "children"]);
+    return (React.createElement(CoverOuterContainer, __assign({ minHeight: minHeight, padding: padding, childGap: childGap, centerOverride: centerOverride, fillCenter: fillCenter }, rest),
+        singleChild ? React.createElement("div", null) : React.createElement(Fragment, null),
+        safeChildren(children, React.createElement(Fragment, null)),
+        singleChild ? React.createElement("div", null) : React.createElement(Fragment, null)));
+};
+export default Cover;

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

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

package/dist/src/components/atoms/layouts/Cover.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 CoverOuterContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  padding: ", ";\n  min-width: ", ";\n\n  > * {\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n\n  > :first-child {\n    margin-top: 0;\n  }\n\n  ", "\n\n  ", "\n\n  > :last-child {\n    margin-bottom: 0;\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  padding: ", ";\n  min-width: ", ";\n\n  > * {\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n\n  > :first-child {\n    margin-top: 0;\n  }\n\n  ", "\n\n  ", "\n\n  > :last-child {\n    margin-bottom: 0;\n  }\n"])), function (_a) {
+    var minHeight = _a.minHeight;
+    return minHeight;
+}, function (_a) {
+    var padding = _a.padding;
+    return padding;
+}, function (_a) {
+    var fillCenter = _a.fillCenter;
+    return (fillCenter ? "100%" : "auto");
+}, function (_a) {
+    var childGap = _a.childGap;
+    return childGap;
+}, function (_a) {
+    var childGap = _a.childGap;
+    return childGap;
+}, function (_a) {
+    var fillCenter = _a.fillCenter;
+    return (fillCenter ? "> :nth-child(2) {flex-grow: 1;}" : "");
+}, function (_a) {
+    var centerOverride = _a.centerOverride;
+    return centerOverride
+        ? "> :nth-child(2) {margin-top: 0; margin-bottom: auto;}"
+        : "> :nth-child(2) {margin-top: auto; margin-bottom: auto;}";
+});
+var templateObject_1;

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

@@ -0,0 +1,7 @@
+export default Frame;
+declare function Frame({ numerator, denominator, children, ...rest }: {
+    [x: string]: any;
+    numerator?: number | undefined;
+    denominator?: number | undefined;
+    children: any;
+}): JSX.Element;

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

@@ -0,0 +1,42 @@
+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 { FrameOuterContainer } from "./Frame.styled";
+/*
+  The Frame component is used for cropping content to a specific aspect ratio.
+  The aspect ratio is supplied by the numerator and denominator props.
+  (The numerator is the left-hand number and denominator the right-hand number
+  in class aspect-ratio notation, e.g., 16:9 or 4:3).
+
+  This component should mostly be used with images or video content.
+  However, the CSS makes it possible to use with _any_ type of element.
+  This is useful for a situation where your child may be an image, or may be
+  a different type of element. A good example is having textual fallback
+  content when an image is not available.
+*/
+var Frame = function (_a) {
+    var _b = _a.numerator, numerator = _b === void 0 ? 1 : _b, _c = _a.denominator, denominator = _c === void 0 ? 1 : _c, children = _a.children, rest = __rest(_a, ["numerator", "denominator", "children"]);
+    return (React.createElement(FrameOuterContainer, __assign({ numerator: numerator, denominator: denominator }, rest), safeChildren(children, React.createElement(Fragment, null))));
+};
+export default Frame;

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

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

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

@@ -0,0 +1,10 @@
+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 FrameOuterContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: ", ";\n  position: relative;\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"], ["\n  box-sizing: border-box;\n  padding-bottom: ", ";\n  position: relative;\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 (_a) {
+    var numerator = _a.numerator, denominator = _a.denominator;
+    return "calc((".concat(numerator, " / ").concat(denominator, ") * 100%)");
+});
+var templateObject_1;

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

@@ -0,0 +1,8 @@
+export default Grid;
+declare function Grid({ columnGap, minColWidth, maxColWidth, children, ...rest }: {
+    [x: string]: any;
+    columnGap: any;
+    minColWidth?: number | undefined;
+    maxColWidth?: string | undefined;
+    children: any;
+}): JSX.Element;