@thecb/components 7.3.2-beta.5 → 7.4.0

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

@@ -1,30 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

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

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

@@ -1,59 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

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

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

@@ -1,26 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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;

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

@@ -1,62 +0,0 @@
-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 { SwitcherOuterContainer, SwitcherInnerContainer } from "./Switcher.styled";
-/*
-  The Switcher is a component that is used to toggle between wide and narrow
-  layouts based on the size of the surrounding container. In the wide layout,
-  the children of the Switcher will be sized to the value specified by childSize.
-  The point at which the layout switches is specified by the breakpoint prop.
-  The space between child elements is specified with
-
-  In the wide layout, it is possible to specify that a particular child take up
-  more space than its siblings. The largeChild prop takes a child number and
-  applies the largeChildSize to its flex-grow property.
-
-  This component also accepts an optional maxChildren prop. This prop specifies the max
-  number of children allowed before the component toggles to a vertical list
-  layout.
-
-  In the narrow layout, the children of the Switcher will render as a vertical list
-  of width: 100%. This component is best used for scenarios when you want to bypass
-  intermediate layouts where children may size differently depending on the number of
-  children present in a given row.
-
-  Use cases for this component include any situation "in which each child element
-  should be considered equal, or part of a continuum. E.g., card components listing
-  products/services should share the same width no matter the orientation, otherwise
-  one or more cards could be perceived as highlighted or featured in some way. Or
-  a set of numbered steps in, for example, a list of items to complete or tasks to do."
-
-  New: Set the "constrainMobile" prop to true in order to prevent switcher content from
-  overflowing the mobile viewport:
-
-    <Switcher constrainMobile={isMobile} />
-*/
-var Switcher = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? "30rem" : _b, _c = _a.childGap, childGap = _c === void 0 ? "1rem" : _c, largeChild = _a.largeChild, largeChildSize = _a.largeChildSize, maxChildren = _a.maxChildren, _d = _a.maxChildrenOnly, maxChildrenOnly = _d === void 0 ? false : _d, _e = _a.padding, padding = _e === void 0 ? "0" : _e, children = _a.children, extraStyles = _a.extraStyles, _f = _a.constrainMobile, constrainMobile = _f === void 0 ? false : _f, rest = __rest(_a, ["breakpoint", "childGap", "largeChild", "largeChildSize", "maxChildren", "maxChildrenOnly", "padding", "children", "extraStyles", "constrainMobile"]);
-    return (React.createElement(SwitcherOuterContainer, null,
-        React.createElement(SwitcherInnerContainer, __assign({ breakpoint: breakpoint, childGap: childGap, largeChild: largeChild, largeChildSize: largeChildSize, maxChildren: maxChildren, maxChildrenOnly: maxChildrenOnly, padding: padding, extraStyles: extraStyles, constrainMobile: constrainMobile }, rest), safeChildren(children, React.createElement(Fragment, null)))));
-};
-export default Switcher;

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

@@ -1,2 +0,0 @@
-export const SwitcherOuterContainer: any;
-export const SwitcherInnerContainer: any;

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

@@ -1,42 +0,0 @@
-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, { css } from "styled-components";
-export var SwitcherOuterContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n"], ["\n  box-sizing: border-box;\n  display: block;\n"])));
-export var SwitcherInnerContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: ", ";\n  margin: ", ";\n  ", "\n\n  > * {\n    flex-grow: 1;\n    ", ";\n    ", "\n    ", "\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: ", ";\n  margin: ", ";\n  ", "\n\n  > * {\n    flex-grow: 1;\n    ", ";\n    ", "\n    ", "\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
-    var padding = _a.padding;
-    return padding;
-}, function (_a) {
-    var childGap = _a.childGap;
-    return "calc((".concat(childGap, " / 2) * -1)");
-}, function (_a) {
-    var constrainMobile = _a.constrainMobile;
-    return constrainMobile && "max-width: 100%; margin-left: 0; margin-right: 0;";
-}, function (_a) {
-    var maxChildrenOnly = _a.maxChildrenOnly, breakpoint = _a.breakpoint, childGap = _a.childGap;
-    return !maxChildrenOnly
-        ? "flex-basis: calc((".concat(breakpoint, " - (100% - ").concat(childGap, ")) * 999);")
-        : "";
-}, function (_a) {
-    var childGap = _a.childGap;
-    return "margin: calc(".concat(childGap, " / 2);");
-}, function (_a) {
-    var constrainMobile = _a.constrainMobile;
-    return constrainMobile && "margin-left: 0; margin-right: 0;";
-}, function (_a) {
-    var largeChild = _a.largeChild, largeChildSize = _a.largeChildSize;
-    return largeChild && largeChildSize
-        ? "> :nth-child(".concat(largeChild, ") {\n      flex-grow: ").concat(largeChildSize, ";\n    }")
-        : "";
-}, function (_a) {
-    var maxChildren = _a.maxChildren;
-    return maxChildren
-        ? "> :nth-last-child(".concat(maxChildren +
-            1, "), > :nth-last-child(").concat(maxChildren + 1, ") ~ * {\n      flex-basis: 100%;\n    }")
-        : "";
-}, function (_a) {
-    var extraStyles = _a.extraStyles;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), extraStyles);
-});
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/components/atoms/layouts/examples/FixedSizeContainer.d.ts

@@ -1,9 +0,0 @@
-export default FixedSizeContainer;
-declare function FixedSizeContainer({ width, height, border, floatingLabel, margin, children }: {
-    width: any;
-    height?: string | undefined;
-    border?: string | undefined;
-    floatingLabel: any;
-    margin: any;
-    children: any;
-}): JSX.Element;

package/dist/src/components/atoms/layouts/examples/FixedSizeContainer.js

@@ -1,12 +0,0 @@
-import React, { Fragment } from "react";
-import { FixedSize, FloatingLabel } from "./FixedSizeContainer.styled";
-import { safeChildren } from "../../../../util/general";
-import { TROUT_GREY } from "../../../../constants/colors";
-var FixedSizeContainer = function (_a) {
-    var width = _a.width, _b = _a.height, height = _b === void 0 ? "auto" : _b, _c = _a.border, border = _c === void 0 ? "2px solid ".concat(TROUT_GREY) : _c, floatingLabel = _a.floatingLabel, margin = _a.margin, children = _a.children;
-    return (React.createElement(FixedSize, { width: width, height: height, border: border, margin: margin },
-        safeChildren(children),
-        React.createElement(Fragment, null,
-            React.createElement(FloatingLabel, null, floatingLabel))));
-};
-export default FixedSizeContainer;

package/dist/src/components/atoms/layouts/examples/FixedSizeContainer.styled.d.ts

@@ -1,2 +0,0 @@
-export const FixedSize: any;
-export const FloatingLabel: any;

package/dist/src/components/atoms/layouts/examples/FixedSizeContainer.styled.js

@@ -1,21 +0,0 @@
-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 { TROUT_GREY } from "../../../../constants/colors";
-export var FixedSize = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: ", ";\n  height: ", ";\n  padding: 0.5rem;\n  border: ", ";\n  border-radius: 4px;\n  position: relative;\n  margin: ", ";\n"], ["\n  box-sizing: border-box;\n  width: ", ";\n  height: ", ";\n  padding: 0.5rem;\n  border: ", ";\n  border-radius: 4px;\n  position: relative;\n  margin: ", ";\n"])), function (_a) {
-    var width = _a.width;
-    return width;
-}, function (_a) {
-    var height = _a.height;
-    return height;
-}, function (_a) {
-    var border = _a.border;
-    return border;
-}, function (_a) {
-    var margin = _a.margin;
-    return margin;
-});
-export var FloatingLabel = styled.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: 0.5rem;\n  font-size: 1rem;\n  color: ", ";\n"], ["\n  position: absolute;\n  left: 0.5rem;\n  font-size: 1rem;\n  color: ", ";\n"])), TROUT_GREY);
-var templateObject_1, templateObject_2;

package/dist/src/components/atoms/layouts/examples/LayoutContentBlock.d.ts

@@ -1,11 +0,0 @@
-export default LayoutContentBlock;
-declare function LayoutContentBlock({ layoutName, bgColor, textColor, borderColor, width, height, padding, margin }: {
-    layoutName: any;
-    bgColor?: string | undefined;
-    textColor?: string | undefined;
-    borderColor?: string | undefined;
-    width?: string | undefined;
-    height?: string | undefined;
-    padding?: string | undefined;
-    margin: any;
-}): JSX.Element;

package/dist/src/components/atoms/layouts/examples/LayoutContentBlock.js

@@ -1,9 +0,0 @@
-import React from "react";
-import { LayoutBlock } from "./LayoutContentBlock.styled";
-import Text from "../../text";
-var LayoutContentBlock = function (_a) {
-    var layoutName = _a.layoutName, _b = _a.bgColor, bgColor = _b === void 0 ? "#AAA" : _b, _c = _a.textColor, textColor = _c === void 0 ? "#111" : _c, _d = _a.borderColor, borderColor = _d === void 0 ? "#666" : _d, _e = _a.width, width = _e === void 0 ? "100%" : _e, _f = _a.height, height = _f === void 0 ? "auto" : _f, _g = _a.padding, padding = _g === void 0 ? "1rem" : _g, margin = _a.margin;
-    return (React.createElement(LayoutBlock, { width: width, height: height, bgColor: bgColor, borderColor: borderColor, padding: padding, margin: margin },
-        React.createElement(Text, { color: textColor }, layoutName)));
-};
-export default LayoutContentBlock;

package/dist/src/components/atoms/layouts/examples/LayoutContentBlock.styled.d.ts

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

package/dist/src/components/atoms/layouts/examples/LayoutContentBlock.styled.js

@@ -1,25 +0,0 @@
-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 LayoutBlock = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 2px solid ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: ", ";\n  max-width: 100%;\n  margin: ", ";\n"], ["\n  box-sizing: border-box;\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 2px solid ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: ", ";\n  max-width: 100%;\n  margin: ", ";\n"])), function (_a) {
-    var width = _a.width;
-    return width;
-}, function (_a) {
-    var height = _a.height;
-    return height;
-}, function (_a) {
-    var bgColor = _a.bgColor;
-    return bgColor;
-}, function (_a) {
-    var borderColor = _a.borderColor;
-    return borderColor;
-}, function (_a) {
-    var padding = _a.padding;
-    return padding;
-}, function (_a) {
-    var margin = _a.margin;
-    return margin;
-});
-var templateObject_1;

package/dist/src/components/atoms/layouts/examples/ResizingContainer.d.ts

@@ -1,9 +0,0 @@
-export default ResizeContainer;
-declare function ResizeContainer({ children, animate, containerMax, containerMin, padding, height }: {
-    children: any;
-    animate?: string | undefined;
-    containerMax?: string | undefined;
-    containerMin?: string | undefined;
-    padding?: string | undefined;
-    height?: string | undefined;
-}): JSX.Element;

package/dist/src/components/atoms/layouts/examples/ResizingContainer.js

@@ -1,26 +0,0 @@
-import React, { useState, useRef, useEffect, Fragment } from "react";
-import { ResizeOuterContainer, ResizeInnerContainer } from "./ResizingContainer.styled";
-import { safeChildren } from "../../../../util/general";
-var ResizeContainer = function (_a) {
-    var children = _a.children, _b = _a.animate, animate = _b === void 0 ? "pause" : _b, _c = _a.containerMax, containerMax = _c === void 0 ? "500px" : _c, _d = _a.containerMin, containerMin = _d === void 0 ? "100%" : _d, _e = _a.padding, padding = _e === void 0 ? "0.5rem" : _e, _f = _a.height, height = _f === void 0 ? "auto" : _f;
-    var ref = useRef();
-    var _g = useState(0), width = _g[0], setWidth = _g[1];
-    useEffect(function () {
-        var resizeObserver = new ResizeObserver(function (entries) {
-            if (!Array.isArray(entries)) {
-                return;
-            }
-            if (!entries.length) {
-                return;
-            }
-            var entry = entries[0];
-            setWidth(entry.contentRect.width);
-        });
-        resizeObserver.observe(ref.current);
-        return function () { return resizeObserver.unobserve(ref.current); };
-    }, []);
-    console.warn("width is", width);
-    return (React.createElement(ResizeOuterContainer, null,
-        React.createElement(ResizeInnerContainer, { ref: ref, animate: animate, containerMax: containerMax, containerMin: containerMin, padding: padding, height: height }, safeChildren(children, React.createElement(Fragment, null)))));
-};
-export default ResizeContainer;

package/dist/src/components/atoms/layouts/examples/ResizingContainer.styled.d.ts

@@ -1,2 +0,0 @@
-export const ResizeOuterContainer: any;
-export const ResizeInnerContainer: any;

package/dist/src/components/atoms/layouts/examples/ResizingContainer.styled.js

@@ -1,23 +0,0 @@
-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, { keyframes, css } from "styled-components";
-import { TROUT_GREY } from "../../../../constants/colors";
-var squeeze = function (containerMin, containerMax) { return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    width: ", ";\n  }\n  100% {\n    width: ", ";\n  }\n"], ["\n  0% {\n    width: ", ";\n  }\n  100% {\n    width: ", ";\n  }\n"])), containerMax, containerMin); };
-export var ResizeOuterContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n"])));
-export var ResizeInnerContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 2px solid ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  margin-left: auto;\n  margin-right: auto;\n  height: ", ";\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: ", ";\n  ", ";\n"], ["\n  border: 2px solid ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  margin-left: auto;\n  margin-right: auto;\n  height: ", ";\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: ", ";\n  ", ";\n"])), TROUT_GREY, function (_a) {
-    var padding = _a.padding;
-    return padding;
-}, function (_a) {
-    var height = _a.height;
-    return height;
-}, function (_a) {
-    var containerMax = _a.containerMax;
-    return containerMax;
-}, function (_a) {
-    var animate = _a.animate, containerMin = _a.containerMin, containerMax = _a.containerMax;
-    return animate === "play"
-        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          animation: 5s linear infinite alternate\n            ", ";\n        "], ["\n          animation: 5s linear infinite alternate\n            ", ";\n        "])), squeeze(containerMin, containerMax)) : "";
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/components/atoms/layouts/examples/box-example/BoxExample.stories.d.ts

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

package/dist/src/components/atoms/layouts/examples/box-example/BoxExample.stories.js

@@ -1,19 +0,0 @@
-import React from "react";
-import { text, radios, select } from "@storybook/addon-knobs";
-import page from "../../../../../../.storybook/page";
-import Box from "../../Box";
-import LayoutContentBlock from "../LayoutContentBlock";
-var as = { default: "", button: "button" };
-var textAlign = {
-    left: "left",
-    center: "center",
-    right: "right"
-};
-var groupId = "props";
-export default page({
-    title: "Layouts|Basic Layouts/Box",
-    Component: Box
-});
-export var box = function () { return (React.createElement(Box, { padding: text("padding", "16px", groupId), borderSize: text("borderSize", "0px", groupId), borderColor: text("borderColor", "transparent", groupId), borderRadius: text("borderRadius", "0px", groupId), boxShadow: text("boxShadow", "none", groupId), background: text("background", "", groupId), color: text("color", "", groupId), minHeight: text("minHeight", "", groupId), width: text("width", "", groupId), minWidth: text("minWidth", "", groupId), maxWidth: text("maxWidth", "", groupId), borderWidthOverride: text("borderWidthOverride", "", groupId), border: text("border", "", groupId), as: radios("as", as, "default", groupId), textAlign: select("textAlign", textAlign, "left", groupId), hoverStyles: text("hoverStyles", "", groupId), activeStyles: text("activeStyles", "", groupId), disabledStyles: text("disabledStyles", "", groupId), hiddenStyles: text("hiddenStyles", "", groupId), extraStyles: text("extraStyles", "", groupId), onClick: text("onClick", function () { }, groupId), onKeyDown: text("onKeyDown", function () { }, groupId), onMouseEnter: text("onMouseEnter", function () { }, groupId), onMouseLeave: text("onMouseLeave", function () { }, groupId), onFocus: text("onFocus", function () { }, groupId), onBlur: text("onBlur", function () { }, groupId), onTouchEnd: text("onTouchEnd", function () { }, groupId) },
-    "Text Child",
-    React.createElement(LayoutContentBlock, { height: "3.5rem", width: "8rem", layoutName: "Component Child" }))); };

package/dist/src/components/atoms/layouts/examples/center-example/CenterExample.stories.d.ts

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

package/dist/src/components/atoms/layouts/examples/center-example/CenterExample.stories.js

@@ -1,13 +0,0 @@
-import React from "react";
-import { text, boolean } from "@storybook/addon-knobs";
-import page from "../../../../../../.storybook/page";
-import Center from "../../Center";
-import LayoutContentBlock from "../LayoutContentBlock";
-var groupId = "props";
-export default page({
-    title: "Layouts|Basic Layouts/Center",
-    Component: Center
-});
-export var center = function () { return (React.createElement(Center, { maxWidth: text("maxWidth", "", groupId), gutters: text("gutters", "", groupId), intrinsic: boolean("intrinsic", false, groupId) },
-    "Text Child",
-    React.createElement(LayoutContentBlock, { height: "3.5rem", width: "8rem", layoutName: "Component Child" }))); };

package/dist/src/components/atoms/layouts/examples/cluster-example/ClusterExample.d.ts

@@ -1,6 +0,0 @@
-export default ClusterExample;
-declare function ClusterExample({ justify, align, children }: {
-    justify: any;
-    align: any;
-    children: any;
-}): JSX.Element;

package/dist/src/components/atoms/layouts/examples/cluster-example/ClusterExample.js

@@ -1,7 +0,0 @@
-import React from "react";
-import Cluster from "../../Cluster";
-var ClusterExample = function (_a) {
-    var justify = _a.justify, align = _a.align, children = _a.children;
-    return (React.createElement(Cluster, { justify: justify, align: align, childGap: "1rem" }, children));
-};
-export default ClusterExample;

package/dist/src/components/atoms/layouts/examples/cluster-example/ClusterExample.stories.d.ts

@@ -1,21 +0,0 @@
-declare namespace _default {
-    export const title: string;
-    export { ClusterExample as component };
-    export const decorators: ((storyFn: any) => JSX.Element)[];
-}
-export default _default;
-export function basicCluster(): JSX.Element;
-export namespace basicCluster {
-    const storyName: string;
-}
-export function formButtonCluster(): JSX.Element;
-export namespace formButtonCluster {
-    const storyName_1: string;
-    export { storyName_1 as storyName };
-}
-export function formInputCluster(): JSX.Element;
-export namespace formInputCluster {
-    const storyName_2: string;
-    export { storyName_2 as storyName };
-}
-import ClusterExample from "./ClusterExample";