@thecb/components 7.5.2 → 7.6.0

package/dist/src/components/atoms/icons/index.js

@@ -1,59 +0,0 @@
-import AccountsIcon from "./AccountsIcon";
-import AccountsAddIcon from "./AccountsAddIcon";
-import ForgotPasswordIcon from "./ForgotPasswordIcon";
-import GoToEmailIcon from "./GoToEmailIcon";
-import VerifiedEmailIcon from "./VerifiedEmailIcon";
-import PaymentMethodIcon from "./PaymentMethodIcon";
-import AccountsIconSmall from "./AccountsIconSmall";
-import PaymentsIconSmall from "./PaymentsIconSmall";
-import PaymentMethodAddIcon from "./PaymentMethodAddIcon";
-import ProfileIconSmall from "./ProfileIconSmall";
-import SettingsIconSmall from "./SettingsIconSmall";
-import ChevronIcon from "./ChevronIcon";
-import PropertiesAddIcon from "./PropertiesAddIcon";
-import PropertiesIconSmall from "./PropertiesIconSmall";
-import AccountNumberImage from "./AccountNumberImage";
-import RoutingNumberImage from "./RoutingNumberImage";
-import CheckmarkIcon from "./CheckmarkIcon";
-import BankIcon from "./BankIcon";
-import GenericCard from "./GenericCard";
-import PaymentIcon from "./PaymentIcon";
-import IconAdd from "./IconAdd";
-import IconQuitLarge from "./IconQuitLarge";
-import TimeoutImage from "./TimeoutImage";
-import AutopayOnIcon from "./AutopayOnIcon";
-import NotFoundIcon from "./NotFoundIcon";
-import SearchIcon from "./SearchIcon";
-import WalletIcon from "./WalletIcon";
-import AchReturnIcon from "./AchReturnIcon";
-import AllocatedIcon from "./AllocatedIcon";
-import CalendarIcon from "./CalendarIcon";
-import ChargebackIcon from "./ChargebackIcon";
-import ChargebackReversalIcon from "./ChargebackReversalIcon";
-import DuplicateIcon from "./DuplicateIcon";
-import ErroredIcon from "./ErroredIcon";
-import ExternalLinkIcon from "./ExternalLinkIcon";
-import FailedIcon from "./FailedIcon";
-import PendingIcon from "./PendingIcon";
-import RefundIcon from "./RefundIcon";
-import RejectedIcon from "./RejectedIcon";
-import RejectedVelocityIcon from "./RejectedVelocityIcon";
-import SuccessfulIcon from "./SuccessfulIcon";
-import VoidedIcon from "./VoidedIcon";
-import StatusUnknownIcon from "./StatusUnknownIcon";
-import CarrotIcon from "./CarrotIcon";
-import ProfileIcon from "./ProfileIcon";
-import GenericCardLarge from "./GenericCardLarge";
-import EmptyCartIcon from "./EmptyCartIcon";
-import ShoppingCartIcon from "./ShoppingCartIcon";
-import TrashIcon from "./TrashIcon";
-import NoCustomerResultsIcon from "./NoCustomerResultsIcon";
-import NoPaymentResultsIcon from "./NoPaymentResultsIcon";
-import CustomerSearchIcon from "./CustomerSearchIcon";
-import PaymentSearchIcon from "./PaymentSearchIcon";
-import ResetPasswordIcon from "./ResetPasswordIcon";
-import PeriscopeFailedIcon from "./PeriscopeFailedIcon";
-import CheckIcon from "./CheckIcon";
-import WarningIconXS from "./WarningIconXS";
-import CashIcon from "./CashIcon";
-export { AccountsIcon, AccountsAddIcon, ForgotPasswordIcon, GoToEmailIcon, VerifiedEmailIcon, PaymentMethodIcon, AccountsIconSmall, PaymentsIconSmall, PaymentMethodAddIcon, ProfileIconSmall, SettingsIconSmall, ChevronIcon, PropertiesAddIcon, PropertiesIconSmall, AccountNumberImage, RoutingNumberImage, CheckmarkIcon, BankIcon, GenericCard, PaymentIcon, IconAdd, IconQuitLarge, TimeoutImage, AutopayOnIcon, NotFoundIcon, SearchIcon, WalletIcon, AchReturnIcon, AllocatedIcon, CalendarIcon, ChargebackIcon, ChargebackReversalIcon, DuplicateIcon, ErroredIcon, ExternalLinkIcon, FailedIcon, PendingIcon, RefundIcon, RejectedIcon, RejectedVelocityIcon, SuccessfulIcon, VoidedIcon, StatusUnknownIcon, CarrotIcon, ProfileIcon, GenericCardLarge, EmptyCartIcon, ShoppingCartIcon, TrashIcon, NoCustomerResultsIcon, NoPaymentResultsIcon, CustomerSearchIcon, PaymentSearchIcon, ResetPasswordIcon, PeriscopeFailedIcon, CheckIcon, WarningIconXS, CashIcon };

package/dist/src/components/atoms/index.d.ts

@@ -1,45 +0,0 @@
-export { default as AddObligation } from "./add-obligation";
-export { default as Alert } from "./alert";
-export { default as AmountCallout } from "./amount-callout";
-export { default as BoxWithShadow } from "./box-with-shadow";
-export { default as Breadcrumb } from "./breadcrumb";
-export { default as ButtonWithAction } from "./button-with-action";
-export { default as ButtonWithLink } from "./button-with-link";
-export { default as cardRegistry } from "./welcome-card";
-export { default as Checkbox } from "./checkbox";
-export { default as CheckboxList } from "./checkbox-list";
-export { default as CountryDropdown } from "./country-dropdown";
-export { default as Detail } from "./detail";
-export { default as DisplayBox } from "./display-box";
-export { default as DisplayCard } from "./display-card";
-export { default as Dropdown } from "./dropdown";
-export * from "./form-layouts";
-export * from "./icons";
-export * from "./layouts";
-export * from "./link";
-export { default as FormSelect } from "./form-select";
-export { default as FormattedAddress } from "./formatted-address";
-export { default as FormattedCreditCard } from "./formatted-credit-card";
-export { default as HamburgerButton } from "./hamburger-button";
-export { default as Heading } from "./heading";
-export { default as Jumbo } from "./jumbo";
-export { default as LabeledAmount } from "./labeled-amount";
-export { default as LineItem } from "./line-item";
-export { default as Loading } from "./loading";
-export { default as NavFooter } from "./nav-footer";
-export { default as NavHeader } from "./nav-header";
-export { default as Paragraph } from "./paragraph";
-export { default as PasswordRequirements } from "./password-requirements";
-export { default as Placeholder } from "./placeholder";
-export { default as ProcessingFee } from "./processing-fee";
-export { default as RadioButton } from "./radio-button";
-export { default as SearchableSelect } from "./searchable-select";
-export { default as SolidDivider } from "./solid-divider";
-export { default as Spinner } from "./spinner";
-export { default as StateProvinceDropdown } from "./state-province-dropdown";
-export { default as Text } from "./text";
-export { default as Title } from "./title";
-export { default as ToggleSwitch } from "./toggle-switch";
-export { default as TypeaheadInput } from "./typeahead-input";
-export { default as Card } from "./card";
-export { default as NavTabs } from "./nav-tabs";

package/dist/src/components/atoms/index.js

@@ -1,45 +0,0 @@
-export { default as AddObligation } from "./add-obligation";
-export { default as Alert } from "./alert";
-export { default as AmountCallout } from "./amount-callout";
-export { default as BoxWithShadow } from "./box-with-shadow";
-export { default as Breadcrumb } from "./breadcrumb";
-export { default as ButtonWithAction } from "./button-with-action";
-export { default as ButtonWithLink } from "./button-with-link";
-export { default as cardRegistry } from "./welcome-card";
-export { default as Checkbox } from "./checkbox";
-export { default as CheckboxList } from "./checkbox-list";
-export { default as CountryDropdown } from "./country-dropdown";
-export { default as Detail } from "./detail";
-export { default as DisplayBox } from "./display-box";
-export { default as DisplayCard } from "./display-card";
-export { default as Dropdown } from "./dropdown";
-export * from "./form-layouts";
-export { default as FormSelect } from "./form-select";
-export { default as FormattedAddress } from "./formatted-address";
-export { default as FormattedCreditCard } from "./formatted-credit-card";
-export { default as HamburgerButton } from "./hamburger-button";
-export { default as Heading } from "./heading";
-export * from "./icons";
-export { default as Jumbo } from "./jumbo";
-export { default as LabeledAmount } from "./labeled-amount";
-export * from "./layouts";
-export { default as LineItem } from "./line-item";
-export { default as Loading } from "./loading";
-export * from "./link";
-export { default as NavFooter } from "./nav-footer";
-export { default as NavHeader } from "./nav-header";
-export { default as Paragraph } from "./paragraph";
-export { default as PasswordRequirements } from "./password-requirements";
-export { default as Placeholder } from "./placeholder";
-export { default as ProcessingFee } from "./processing-fee";
-export { default as RadioButton } from "./radio-button";
-export { default as SearchableSelect } from "./searchable-select";
-export { default as SolidDivider } from "./solid-divider";
-export { default as Spinner } from "./spinner";
-export { default as StateProvinceDropdown } from "./state-province-dropdown";
-export { default as Text } from "./text";
-export { default as Title } from "./title";
-export { default as ToggleSwitch } from "./toggle-switch";
-export { default as TypeaheadInput } from "./typeahead-input";
-export { default as Card } from "./card";
-export { default as NavTabs } from "./nav-tabs";

package/dist/src/components/atoms/jumbo/Jumbo.d.ts

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

package/dist/src/components/atoms/jumbo/Jumbo.js

@@ -1,25 +0,0 @@
-import React, { useContext } from "react";
-import { ThemeContext } from "styled-components";
-import ButtonWithLink from "../button-with-link";
-import { Box, Cluster, Center, Cover, Switcher } from "../layouts";
-import Heading from "../heading";
-import Title from "../title";
-import withWindowSize from "../../withWindowSize";
-var Jumbo = function (_a) {
-    var showButton = _a.showButton, heading = _a.heading, buttonLink = _a.buttonLink, subHeading = _a.subHeading, buttonText = _a.buttonText, slug = _a.slug, _b = _a.largeSide, largeSide = _b === void 0 ? "right" : _b, _c = _a.largeSideSize, largeSideSize = _c === void 0 ? "2" : _c, CartStatus = _a.cartStatus, total = _a.total, itemsCount = _a.itemsCount, _d = _a.showCartStatus, showCartStatus = _d === void 0 ? false : _d, openCartSlider = _a.openCartSlider;
-    var isMobile = useContext(ThemeContext).isMobile;
-    return (React.createElement(Box, { padding: "0 20px", minHeight: "65px", id: "heroImage-".concat(slug), className: "themeJumboBackground" },
-        React.createElement(Center, { maxWidth: "76.5rem" },
-            React.createElement(Cover, { singleChild: true, minHeight: "65px" },
-                React.createElement(Switcher, { breakpoint: isMobile ? "999px" : "700px", largeChild: largeSide === "right" ? "2" : "1", largeChildSize: largeSideSize, childGap: "0.25rem" },
-                    React.createElement(Cluster, { minHeight: "100%", justify: isMobile && !showCartStatus
-                            ? "center"
-                            : showButton || showCartStatus
-                                ? "space-between"
-                                : "left", align: "center", nowrap: showCartStatus },
-                        React.createElement(Title, { variant: isMobile ? "small" : "large", as: "h1", color: "#ffffff", className: "themeJumboHeading", extraStyles: showCartStatus && isMobile && "max-width: 60%;" }, heading),
-                        subHeading && (React.createElement(Heading, { variant: isMobile ? "h6" : "h2", color: "#ffffff", className: "themeJumboSubheading" }, subHeading)),
-                        showButton && (React.createElement(ButtonWithLink, { url: buttonLink, text: buttonText || "Browse Services", variant: "primary", extraStyles: "margin: 0 0 65px 0; min-width: 320px;" })),
-                        showCartStatus && (React.createElement(CartStatus, { total: total, itemsCount: itemsCount, openCart: openCartSlider }))))))));
-};
-export default withWindowSize(Jumbo);

package/dist/src/components/atoms/jumbo/index.d.ts

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

package/dist/src/components/atoms/jumbo/index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/src/components/atoms/layouts/Center.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";
-export var CenterWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: content-box;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n"], ["\n  box-sizing: content-box;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n"])), function (_a) {
-    var maxWidth = _a.maxWidth;
-    return maxWidth;
-}, function (_a) {
-    var gutters = _a.gutters;
-    return gutters;
-}, function (_a) {
-    var gutters = _a.gutters;
-    return gutters;
-}, function (_a) {
-    var intrinsic = _a.intrinsic;
-    return intrinsic
-        ? "\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  "
-        : "";
-});
-var templateObject_1;

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

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

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

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

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

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