@thecb/components 7.5.2 → 7.6.0

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

@@ -1,71 +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";
-/* 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

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

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

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

package/dist/src/components/atoms/layouts/Cover.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 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

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

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

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

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

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

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

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

@@ -1,38 +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, { useRef, useState, useLayoutEffect, Fragment } from "react";
-import { GridWrapper } from "./Grid.styled";
-import { safeChildren } from "../../../util/general";
-var Grid = function (_a) {
-    var columnGap = _a.columnGap, _b = _a.minColWidth, minColWidth = _b === void 0 ? 20 : _b, _c = _a.maxColWidth, maxColWidth = _c === void 0 ? "1fr" : _c, children = _a.children, rest = __rest(_a, ["columnGap", "minColWidth", "maxColWidth", "children"]);
-    var ref = useRef();
-    var _d = useState(0), width = _d[0], setWidth = _d[1];
-    var _e = useState(true), aboveMin = _e[0], setAboveMin = _e[1];
-    useLayoutEffect(function () {
-        var currentWidth = ref.current.getBoundingClientRect().width;
-        setWidth(currentWidth);
-        setAboveMin(currentWidth >= minColWidth * 16);
-    }, [ref.current, width]);
-    return (React.createElement(GridWrapper, __assign({ ref: ref, columnGap: columnGap, aboveMin: aboveMin, minColWidth: typeof minColWidth === "number" ? "".concat(minColWidth, "rem") : minColWidth, maxColWidth: typeof maxColWidth === "number" ? "".concat(maxColWidth, "rem") : maxColWidth }, rest), safeChildren(children, React.createElement(Fragment, null))));
-};
-export default Grid;

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

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

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

@@ -1,24 +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 GridWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-gap: ", ";\n  grid-template-columns: ", ";\n\n  @supports (width: min(", ", 100%)) {\n    & {\n      grid-template-columns: repeat(\n        auto-fill,\n        minmax(\n          ", ",\n          ", "\n        )\n      );\n    }\n  }\n"], ["\n  display: grid;\n  grid-gap: ", ";\n  grid-template-columns: ", ";\n\n  @supports (width: min(", ", 100%)) {\n    & {\n      grid-template-columns: repeat(\n        auto-fill,\n        minmax(\n          ", ",\n          ", "\n        )\n      );\n    }\n  }\n"])), function (_a) {
-    var columnGap = _a.columnGap;
-    return columnGap;
-}, function (_a) {
-    var aboveMin = _a.aboveMin, minColWidth = _a.minColWidth, maxColWidth = _a.maxColWidth;
-    return aboveMin
-        ? "repeat(auto-fill, minmax(".concat(minColWidth, ", ").concat(maxColWidth, "))")
-        : "100%";
-}, function (_a) {
-    var minColWidth = _a.minColWidth;
-    return minColWidth;
-}, function (_a) {
-    var minColWidth = _a.minColWidth;
-    return minColWidth;
-}, function (_a) {
-    var maxColWidth = _a.maxColWidth;
-    return maxColWidth;
-});
-var templateObject_1;

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

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

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

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

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

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

package/dist/src/components/atoms/layouts/Imposter.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 ImposterWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: ", ";\n  top: ", ";\n  left: ", ";\n  display: ", ";\n\n  ", "\n\n  ", "\n  ", ";\n"], ["\n  position: ", ";\n  top: ", ";\n  left: ", ";\n  display: ", ";\n\n  ", "\n\n  ", "\n  ", ";\n"])), function (_a) {
-    var fixed = _a.fixed;
-    return (fixed ? "fixed" : "absolute");
-}, function (_a) {
-    var top = _a.top;
-    return top;
-}, function (_a) {
-    var left = _a.left;
-    return left;
-}, function (_a) {
-    var visible = _a.visible;
-    return (visible ? "block" : "none");
-}, function (_a) {
-    var centered = _a.centered;
-    return (centered ? "transform: translate(-50%, -50%);" : "");
-}, function (_a) {
-    var breakout = _a.breakout, verticalMargin = _a.verticalMargin, horizontalMargin = _a.horizontalMargin;
-    return breakout
-        ? ""
-        : "\n    overflow: auto;\n    max-width: calc(100% - (".concat(horizontalMargin, " * 2));\n    max-height: calc(100% - (").concat(verticalMargin, " * 2));\n  ");
-}, function (_a) {
-    var extraStyles = _a.extraStyles;
-    return extraStyles;
-});
-var templateObject_1;

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

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

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

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

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

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

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

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

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

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

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

@@ -1,36 +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 { ReelStyled } from "./Reel.styled";
-/*
-  Safari has a bug where it refuses to recognize <ul /> tags as lists when list-style: none is used
-  This affects the apple voice over (mainly used on iOS devices)
-  The solution is to explicitly include "role=List"
-*/
-var Reel = function (_a) {
-    var _b = _a.childGap, childGap = _b === void 0 ? "1rem" : _b, _c = _a.height, height = _c === void 0 ? "auto" : _c, _d = _a.childWidth, childWidth = _d === void 0 ? "auto" : _d, _e = _a.padding, padding = _e === void 0 ? "1rem" : _e, _f = _a.justifyContent, justifyContent = _f === void 0 ? "flex-start" : _f, _g = _a.disableScroll, disableScroll = _g === void 0 ? false : _g, _h = _a.useOrderedList, useOrderedList = _h === void 0 ? false : _h, _j = _a.useUnorderedList, useUnorderedList = _j === void 0 ? false : _j, children = _a.children, rest = __rest(_a, ["childGap", "height", "childWidth", "padding", "justifyContent", "disableScroll", "useOrderedList", "useUnorderedList", "children"]);
-    var elementType = useOrderedList ? "ol" : useUnorderedList ? "ul" : "div";
-    return (React.createElement(ReelStyled, __assign({ childGap: childGap, height: height, childWidth: childWidth, padding: padding, justifyContent: justifyContent, disableScroll: disableScroll, as: elementType, useOrderedList: useOrderedList, useUnorderedList: useUnorderedList }, rest, { role: useOrderedList || useUnorderedList ? "list" : "section" }), safeChildren(children, React.createElement(Fragment, null))));
-};
-export default Reel;

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

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