@thecb/components 7.5.1 → 7.5.2

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

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

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

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

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

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

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

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

package/dist/src/components/atoms/layouts/examples/FixedSizeContainer.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";
+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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { text, radios } from "@storybook/addon-knobs";
+import ClusterExample from "./ClusterExample";
+import Cover from "../../Cover";
+import Center from "../../Center";
+import FixedSizeContainer from "../FixedSizeContainer";
+import ResizingContainer from "../ResizingContainer";
+import LayoutContentBlock from "../LayoutContentBlock";
+export default {
+    title: "Layouts/Basic Layouts/Cluster",
+    component: ClusterExample,
+    decorators: [
+        function (storyFn) { return (React.createElement(Cover, null,
+            React.createElement("div", null),
+            React.createElement(Center, null, storyFn()),
+            React.createElement("div", null))); }
+    ]
+};
+var label = "Animate";
+var options = {
+    play: "play",
+    pause: "pause"
+};
+var defaultValue = "pause";
+var groupID = "RADIO-GROUP-1";
+export var basicCluster = function () { return (React.createElement(ResizingContainer, { animate: radios(label, options, defaultValue, groupID), containerMax: text("Container Max", "60rem"), containerMin: text("Container Min", "20rem") },
+    React.createElement(ClusterExample, { justify: "space-between", align: "center" },
+        React.createElement(LayoutContentBlock, { height: "3.5rem", width: "8rem", layoutName: "City Logo" }),
+        React.createElement(ClusterExample, { justify: "flex-start", align: "center" },
+            React.createElement(LayoutContentBlock, { height: "2.5rem", width: "4.5rem", layoutName: "Profile" }),
+            React.createElement(LayoutContentBlock, { height: "2.5rem", width: "4.5rem", layoutName: "Settings" }),
+            React.createElement(LayoutContentBlock, { height: "2.5rem", width: "4.5rem", layoutName: "Accounts" }))))); };
+basicCluster.storyName = "Resizing Nav Cluster";
+export var formButtonCluster = function () { return (React.createElement(FixedSizeContainer, { width: text("Container Width", "40rem"), floatingLabel: "Cluster" },
+    React.createElement(ClusterExample, { justify: "flex-end", align: "center" },
+        React.createElement(LayoutContentBlock, { height: "3rem", width: "6rem", layoutName: "Back" }),
+        React.createElement(LayoutContentBlock, { height: "3rem", width: "6rem", layoutName: "Submit" })))); };
+formButtonCluster.storyName = "Form Button Cluster";
+export var formInputCluster = function () { return (React.createElement(ResizingContainer, { animate: radios(label, options, defaultValue, groupID), containerMax: text("Container Max", "40rem"), containerMin: text("Container Min", "20rem") },
+    React.createElement(ClusterExample, { justify: "flex-start", align: "center" },
+        React.createElement(LayoutContentBlock, { height: "1.5rem", width: "3rem", layoutName: "Label" }),
+        React.createElement(LayoutContentBlock, { height: "3rem", width: "20rem", layoutName: "Form Input" })))); };
+formInputCluster.storyName = "Form Input Cluster";

package/dist/src/components/atoms/layouts/examples/cover-example/CoverExample.stories.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};
+export default _default;
+export function cover(): JSX.Element;
+export namespace cover {
+    const storyName: string;
+}
+export function coverSingleChild(): JSX.Element;
+export namespace coverSingleChild {
+    const storyName_1: string;
+    export { storyName_1 as storyName };
+}

package/dist/src/components/atoms/layouts/examples/cover-example/CoverExample.stories.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import page from "../../../../../../.storybook/page";
+import Cover from "../../Cover";
+import LayoutContentBlock from "../LayoutContentBlock";
+var groupId = "props";
+export default page({
+    title: "Layouts|Basic Layouts/Cover",
+    Component: Cover
+});
+export var cover = function () { return (React.createElement(Cover, { minHeight: text("minHeight", "100vh", groupId), childGap: text("childGap", "", groupId), padding: text("padding", "", groupId), fillCenter: boolean("fillCenter", false, groupId), singleChild: boolean("singleChild", false, groupId), centerOverride: boolean("centerOverride", false, groupId) },
+    React.createElement(LayoutContentBlock, { height: "3.5rem", width: "100%", layoutName: "Header" }),
+    "Text Child",
+    React.createElement(LayoutContentBlock, { height: "3.5rem", width: "100%", layoutName: "Footer" }))); };
+cover.storyName = "Cover with Multiple Children";
+export var coverSingleChild = function () { return (React.createElement(Cover, { minHeight: text("minHeight", "100vh", groupId), childGap: text("childGap", "", groupId), padding: text("padding", "", groupId), fillCenter: boolean("fillCenter", false, groupId), singleChild: boolean("singleChild", true, groupId), centerOverride: boolean("centerOverride", false, groupId) },
+    React.createElement(LayoutContentBlock, { height: "3.5rem", width: "100%", layoutName: "Child Component" }))); };
+coverSingleChild.storyName = "Cover with Single Child";

package/dist/src/components/atoms/layouts/examples/frame-example/FrameExample.stories.d.ts

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

package/dist/src/components/atoms/layouts/examples/frame-example/FrameExample.stories.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+import page from "../../../../../../.storybook/page";
+import Frame from "../../Frame";
+import LayoutContentBlock from "../LayoutContentBlock";
+var groupId = "props";
+export default page({
+    title: "Layouts|Basic Layouts/Frame",
+    Component: Frame
+});
+export var frame = function () { return (React.createElement(Frame, { numerator: text("numerator", "1", groupId), denominator: text("denominator", "1", groupId) },
+    React.createElement(LayoutContentBlock, { height: "100%", width: "100%", layoutName: "Image" }))); };

package/dist/src/components/atoms/layouts/examples/grid-example/GridExample.d.ts

@@ -0,0 +1,7 @@
+export default GridExample;
+declare function GridExample({ minColWidth, maxColWidth, columnGap, numChildren }: {
+    minColWidth: any;
+    maxColWidth: any;
+    columnGap?: string | undefined;
+    numChildren: any;
+}): JSX.Element;

package/dist/src/components/atoms/layouts/examples/grid-example/GridExample.js

@@ -0,0 +1,32 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from "react";
+import Grid from "../../Grid";
+import Stack from "../../Stack";
+import FixedSizeContainer from "../FixedSizeContainer";
+import LayoutContentBlock from "../LayoutContentBlock";
+var generateChildren = function (number) {
+    var childArray = [];
+    for (var count = 0; count < number; count++) {
+        childArray = __spreadArray(__spreadArray([], childArray, true), [
+            React.createElement(FixedSizeContainer, { key: "card-".concat(count), width: "12rem", height: "14rem", margin: "0 0 1rem 0" },
+                React.createElement(Stack, { fullHeight: true, bottomItem: 3 },
+                    React.createElement(LayoutContentBlock, { key: "1", height: "2rem", layoutName: "Card Title" }),
+                    React.createElement(LayoutContentBlock, { key: "2", height: "6rem", layoutName: "Card Content ".concat(count + 1) }),
+                    React.createElement(LayoutContentBlock, { key: "3", height: "2rem", layoutName: "Card Footer" })))
+        ], false);
+    }
+    return childArray;
+};
+var GridExample = function (_a) {
+    var minColWidth = _a.minColWidth, maxColWidth = _a.maxColWidth, _b = _a.columnGap, columnGap = _b === void 0 ? "0.5rem" : _b, numChildren = _a.numChildren;
+    return (React.createElement(Grid, { minColWidth: minColWidth, maxColWidth: maxColWidth, columnGap: columnGap }, generateChildren(numChildren)));
+};
+export default GridExample;

package/dist/src/components/atoms/layouts/examples/grid-example/GridExample.stories.d.ts

@@ -0,0 +1,11 @@
+declare namespace _default {
+    export const title: string;
+    export { GridExample as component };
+    export const decorators: ((storyFn: any) => JSX.Element)[];
+}
+export default _default;
+export function basicGrid(): JSX.Element;
+export namespace basicGrid {
+    const storyName: string;
+}
+import GridExample from "./GridExample";

package/dist/src/components/atoms/layouts/examples/grid-example/GridExample.stories.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { text, radios, number } from "@storybook/addon-knobs";
+import GridExample from "./GridExample";
+import Cover from "../../Cover";
+import Center from "../../Center";
+import ResizingContainer from "../ResizingContainer";
+export default {
+    title: "Layouts/Basic Layouts/Grid",
+    component: GridExample,
+    decorators: [
+        function (storyFn) { return (React.createElement(Cover, null,
+            React.createElement("div", null),
+            React.createElement(Center, null, storyFn()),
+            React.createElement("div", null))); }
+    ]
+};
+var label = "Animate";
+var options = {
+    play: "play",
+    pause: "pause"
+};
+var defaultValue = "pause";
+var groupID = "RADIO-GROUP-1";
+export var basicGrid = function () { return (React.createElement(ResizingContainer, { animate: radios(label, options, defaultValue, groupID), containerMax: text("Container Max", "60rem"), containerMin: text("Container Min", "25rem"), padding: "1rem" },
+    React.createElement(GridExample, { numChildren: number("Number of Cards", 8), minColWidth: 13 }))); };
+basicGrid.storyName = "Grid of cards";

package/dist/src/components/atoms/layouts/examples/imposter-example/ImposterExample.stories.d.ts

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

package/dist/src/components/atoms/layouts/examples/imposter-example/ImposterExample.stories.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import page from "../../../../../../.storybook/page";
+import Box from "../../Box";
+import Imposter from "../../Imposter";
+import LayoutContentBlock from "../LayoutContentBlock";
+var groupId = "props";
+export default page({
+    title: "Layouts|Basic Layouts/Imposter",
+    Component: Imposter
+});
+export var imposter = function () { return (React.createElement(Box, { minHeight: "50vh", background: "#F6F6F9" },
+    React.createElement(Imposter, { fixed: boolean("fixed", false, groupId), verticalMargin: text("verticalMargin", "0px", groupId), horizontalMargin: text("horizontalMargin", "0px", groupId), breakout: boolean("breakout", true, groupId), top: text("top", "50%", groupId), left: text("left", "50%", groupId), centered: boolean("centered", false, groupId), visible: boolean("visible", true, groupId) },
+        React.createElement(LayoutContentBlock, { height: "100%", width: "100%", layoutName: "Component Child" })))); };

package/dist/src/components/atoms/layouts/examples/motion-example/MotionExample.stories.d.ts

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