@thecb/components 7.3.2-beta.5 → 7.4.0

package/dist/src/components/molecules/payment-form-card/PaymentFormCard.state.js

@@ -1,41 +0,0 @@
-var _a;
-import { createFormState, required, onlyIntegers, hasLength, matchesRegex, validateWhen, dateAfterToday, isValidMonth, onlyExpirationDate } from "redux-freeform";
-//TODO: Will make zip code able to have more than 5 digits once we add in the FormattedInput because it will have issues with format of 60606-1111.
-var formConfig = {
-    country: {
-        defaultValue: "US",
-        validators: [required()]
-    },
-    nameOnCard: {
-        validators: [required()]
-    },
-    creditCardNumber: {
-        validators: [required(), hasLength(15, 16)],
-        constraints: [onlyIntegers(), hasLength(0, 16)]
-    },
-    expirationDate: {
-        validators: [
-            required(),
-            hasLength(4, 4),
-            isValidMonth(0),
-            dateAfterToday("MMYY", "month", true)
-        ],
-        constraints: [onlyExpirationDate(), hasLength(0, 4)]
-    },
-    cvv: {
-        validators: [required(), hasLength(3, 4)],
-        constraints: [onlyIntegers(), hasLength(0, 4)]
-    },
-    zipCode: {
-        validators: [
-            required(),
-            validateWhen(validateWhen(hasLength(5, 5), hasLength(0, 5)), matchesRegex("US"), "country"),
-            validateWhen(validateWhen(hasLength(9, 9), hasLength(6, 9)), matchesRegex("US"), "country")
-        ],
-        constraints: [
-            validateWhen(onlyIntegers(), matchesRegex("US"), "country"),
-            validateWhen(hasLength(0, 9), matchesRegex("US"), "country")
-        ]
-    }
-};
-export var reducer = (_a = createFormState(formConfig), _a.reducer), mapStateToProps = _a.mapStateToProps, mapDispatchToProps = _a.mapDispatchToProps;

package/dist/src/components/molecules/payment-form-card/PaymentFormCard.stories.d.ts

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

package/dist/src/components/molecules/payment-form-card/PaymentFormCard.stories.js

@@ -1,16 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { boolean } from "@storybook/addon-knobs";
-import PaymentFormCard from "./PaymentFormCard";
-import page from "../../../../.storybook/page";
-import * as PaymentFormCardState from "./PaymentFormCard.state";
-var story = page({
-    title: "Components|Molecules/PaymentFormCard",
-    Component: PaymentFormCard,
-    reducer: PaymentFormCardState.reducer,
-    mapStateToProps: PaymentFormCardState.mapStateToProps,
-    mapDispatchToProps: PaymentFormCardState.mapDispatchToProps
-});
-export default story;
-var ConnectedForm = connect(PaymentFormCardState.mapStateToProps, PaymentFormCardState.mapDispatchToProps)(PaymentFormCard);
-export var paymentFormCard = function () { return (React.createElement(ConnectedForm, { showErrors: boolean("showErrors", false, "props") })); };

package/dist/src/components/molecules/payment-form-card/index.d.ts

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

package/dist/src/components/molecules/payment-form-card/index.js

@@ -1,6 +0,0 @@
-import PaymentFormCard from "./PaymentFormCard";
-import { reducer, mapStateToProps, mapDispatchToProps } from "./PaymentFormCard.state";
-PaymentFormCard.reducer = reducer;
-PaymentFormCard.mapStateToProps = mapStateToProps;
-PaymentFormCard.mapDispatchToProps = mapDispatchToProps;
-export default PaymentFormCard;

package/dist/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashBoardIframe.stories.d.ts

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

package/dist/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashBoardIframe.stories.js

@@ -1,10 +0,0 @@
-import React from "react";
-import PeriscopeDashboardIframe from "./PeriscopeDashboardIframe";
-import page from "../../../../.storybook/page";
-import { boolean } from "@storybook/addon-knobs";
-export var periscopeDashboardIframe = function () { return (React.createElement(PeriscopeDashboardIframe, { url: "www.example.com", requestDashboardUrl: function () { }, periscopeDataPending: boolean("dataPending", true), periscopeDataSuccess: boolean("dataSuccess", false), periscopeDataFailure: boolean("dataFailure", false), periscopeDataRequestSuccess: boolean("requestSuccess", false), periscopeDataRequestFailure: boolean("requestFailure", false) })); };
-var story = page({
-    title: "Components|Molecules/PeriscopeDashboardIframe",
-    Component: PeriscopeDashboardIframe
-});
-export default story;

package/dist/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashboardIframe.d.ts

@@ -1,11 +0,0 @@
-export default PeriscopeDashboardIframe;
-declare function PeriscopeDashboardIframe({ url, requestDashboardUrl, periscopeDataPending, periscopeDataSuccess, periscopeDataFailure, periscopeDataRequestSuccess, periscopeDataRequestFailure, timerMS }: {
-    url: any;
-    requestDashboardUrl: any;
-    periscopeDataPending: any;
-    periscopeDataSuccess: any;
-    periscopeDataFailure: any;
-    periscopeDataRequestSuccess: any;
-    periscopeDataRequestFailure: any;
-    timerMS?: number | undefined;
-}): JSX.Element;

package/dist/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashboardIframe.js

@@ -1,70 +0,0 @@
-import React, { useLayoutEffect, useState, useEffect, Fragment } from "react";
-import { BoxWithShadow, Center, Box, PeriscopeFailedIcon, Heading, Paragraph, Cover, Spinner } from "../../atoms";
-import { DashboardIframe } from "./PeriscopeDashboardIframe.styled";
-/**
- * Component: PeriscopeDashboardIframe
- *
- * Used for rendering Citybase's periscope reporting dashboards in iframes.
- * Receives action props to trigger a request on mount for the iframe's url.
- * Receives a string prop if/when we receive the url result.
- * And receives action props to emit errors from failed iframe loading.
- *
- * The logic and api client methods to handle requests/response,
- * store the url, etc. should be provided from the app consuming this library.
- *
- * If the url request is pending, render a spinner.
- * If the url request failed, render a UI error state.
- **/
-var DASHBOARD_SIZE_MESSAGE_TYPE = "dashboard_resize";
-var PERISCOPE_ORIGIN = "https://app.periscopedata.com";
-var isValidMessage = function (message) {
-    return message.isTrusted &&
-        message.origin === PERISCOPE_ORIGIN &&
-        message.data &&
-        message.data.event_type === DASHBOARD_SIZE_MESSAGE_TYPE;
-};
-var PeriscopeDashboardIframe = function (_a) {
-    var url = _a.url, requestDashboardUrl = _a.requestDashboardUrl, periscopeDataPending = _a.periscopeDataPending, periscopeDataSuccess = _a.periscopeDataSuccess, periscopeDataFailure = _a.periscopeDataFailure, periscopeDataRequestSuccess = _a.periscopeDataRequestSuccess, periscopeDataRequestFailure = _a.periscopeDataRequestFailure, _b = _a.timerMS, timerMS = _b === void 0 ? 20000 : _b;
-    var _c = useState(0), height = _c[0], setHeight = _c[1];
-    var time = { timer: null };
-    useEffect(function () {
-        time.timer = setTimeout(function () {
-            if (!periscopeDataSuccess) {
-                periscopeDataRequestFailure();
-            }
-        }, timerMS);
-        return function () { return clearTimeout(time.timer); };
-    }, [periscopeDataSuccess]);
-    var Dashboard = function (height) { return function (url) { return (React.createElement(DashboardIframe, { src: url, width: "100%", height: height, "data-qa": "DashboardIframe", onLoad: function () {
-            var iframe = document.querySelector("iframe");
-            iframe.style.display = "initial";
-        } })); }; };
-    var validatePeriscope = function (message) {
-        if (isValidMessage(message)) {
-            setHeight(message.data.dashboard_height + 100);
-            if (!periscopeDataSuccess) {
-                clearTimeout(time.timer);
-                periscopeDataRequestSuccess();
-            }
-        }
-    };
-    useLayoutEffect(function () {
-        window.addEventListener("message", validatePeriscope);
-        requestDashboardUrl();
-        return function () { return window.removeEventListener("message", validatePeriscope); };
-    }, [requestDashboardUrl]);
-    return (React.createElement(Fragment, null,
-        React.createElement(BoxWithShadow, { padding: "0", minWidth: "100%", minHeight: "592px", variant: "baseStandard", background: "#fff", borderRadius: "4px", extraStyles: "display: flex; justify-content: center; align-items: center; flex-direction: column;" },
-            periscopeDataPending && !periscopeDataSuccess && (React.createElement(Cover, { minHeight: "100%", singleChild: true },
-                React.createElement(Center, { intrinsic: true },
-                    React.createElement(Spinner, { size: "100" })))),
-            periscopeDataFailure && !periscopeDataSuccess && (React.createElement(Box, { padding: "64px" },
-                React.createElement(Center, { intrinsic: true },
-                    React.createElement(Box, { padding: "0 0 2rem" },
-                        React.createElement(PeriscopeFailedIcon, null)),
-                    React.createElement(Heading, { variant: "h3", weight: "700" }, "Something Went Wrong"),
-                    React.createElement(Paragraph, { variant: "p", extraStyles: "text-align: center;" }, "There was an issue trying to load the dashboard."),
-                    React.createElement(Paragraph, { variant: "p", extraStyles: "text-align: center;" }, "Your organization may not have a dashboard configured.")))),
-            !periscopeDataFailure && url && Dashboard(height)(url))));
-};
-export default PeriscopeDashboardIframe;

package/dist/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashboardIframe.styled.d.ts

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

package/dist/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashboardIframe.styled.js

@@ -1,8 +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 { ALTO_GREY } from "../../../constants/colors";
-export var DashboardIframe = styled.iframe(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  box-shadow: 0 0 5px 0 ", ";\n  display: none;\n"], ["\n  border: none;\n  box-shadow: 0 0 5px 0 ", ";\n  display: none;\n"])), ALTO_GREY);
-var templateObject_1;

package/dist/src/components/molecules/periscope-dashboard-iframe/index.d.ts

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

package/dist/src/components/molecules/periscope-dashboard-iframe/index.js

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

package/dist/src/components/molecules/phone-form/PhoneForm.d.ts

@@ -1,12 +0,0 @@
-export default PhoneForm;
-declare function PhoneForm({ variant, fields, actions, clearOnDismount, showErrors, handleSubmit, showWalletCheckbox, saveToWallet, walletCheckboxMarked }: {
-    variant?: string | undefined;
-    fields: any;
-    actions: any;
-    clearOnDismount: any;
-    showErrors: any;
-    handleSubmit?: (() => void) | undefined;
-    showWalletCheckbox: any;
-    saveToWallet: any;
-    walletCheckboxMarked: any;
-}): JSX.Element;

package/dist/src/components/molecules/phone-form/PhoneForm.js

@@ -1,23 +0,0 @@
-import React, { useEffect } from "react";
-import { required, hasLength } from "redux-freeform";
-import { createFormat } from "formatted-input";
-import { FormInput, FormContainer, FormInputColumn } from "../../atoms/form-layouts";
-import Checkbox from "../../atoms/checkbox";
-import { noop } from "../../../util/general";
-import { phoneFormats, formatDelimiter } from "../../../util/formats";
-var PhoneForm = function (_a) {
-    var _b;
-    var _c = _a.variant, variant = _c === void 0 ? "default" : _c, fields = _a.fields, actions = _a.actions, clearOnDismount = _a.clearOnDismount, showErrors = _a.showErrors, _d = _a.handleSubmit, handleSubmit = _d === void 0 ? noop : _d, showWalletCheckbox = _a.showWalletCheckbox, saveToWallet = _a.saveToWallet, walletCheckboxMarked = _a.walletCheckboxMarked;
-    if (clearOnDismount) {
-        useEffect(function () { return function () { return actions.form.clear(); }; }, []);
-    }
-    var phoneErrorMessage = (_b = {},
-        _b[required.error] = "Phone number is required",
-        _b[hasLength.error] = "Phone number must be 10 digits",
-        _b);
-    return (React.createElement(FormContainer, { variant: variant, role: "form", "aria-label": "Phone number" },
-        React.createElement(FormInputColumn, null,
-            React.createElement(FormInput, { labelTextWhenNoError: "Phone number", errorMessages: phoneErrorMessage, field: fields.phone, fieldActions: actions.fields.phone, showErrors: showErrors, formatter: createFormat(phoneFormats, formatDelimiter), onKeyUp: function (e) { return e.key === "Enter" && handleSubmit(e); }, isNum: true, autocomplete: "tel" }),
-            showWalletCheckbox && (React.createElement(Checkbox, { name: "phone checkbox", title: "Save phone number to wallet", checked: walletCheckboxMarked, onChange: saveToWallet })))));
-};
-export default PhoneForm;

package/dist/src/components/molecules/phone-form/PhoneForm.state.d.ts

@@ -1,3 +0,0 @@
-export const reducer: any;
-export const mapStateToProps: any;
-export const mapDispatchToProps: any;

package/dist/src/components/molecules/phone-form/PhoneForm.state.js

@@ -1,9 +0,0 @@
-var _a;
-import { createFormState, required, onlyIntegers, hasLength } from "redux-freeform";
-var formConfig = {
-    phone: {
-        validators: [required(), hasLength(10, 10)],
-        constraints: [onlyIntegers(), hasLength(0, 10)]
-    }
-};
-export var reducer = (_a = createFormState(formConfig), _a.reducer), mapStateToProps = _a.mapStateToProps, mapDispatchToProps = _a.mapDispatchToProps;

package/dist/src/components/molecules/phone-form/PhoneForm.stories.d.ts

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

package/dist/src/components/molecules/phone-form/PhoneForm.stories.js

@@ -1,16 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { boolean } from "@storybook/addon-knobs";
-import PhoneForm from "./PhoneForm";
-import page from "../../../../.storybook/page";
-import * as PhoneFormState from "./PhoneForm.state";
-var story = page({
-    title: "Components|Molecules/PhoneForm",
-    Component: PhoneForm,
-    reducer: PhoneFormState.reducer,
-    mapStateToProps: PhoneFormState.mapStateToProps,
-    mapDispatchToProps: PhoneFormState.mapDispatchToProps
-});
-export default story;
-var ConnectedForm = connect(PhoneFormState.mapStateToProps, PhoneFormState.mapDispatchToProps)(PhoneForm);
-export var phoneForm = function () { return (React.createElement(ConnectedForm, { showErrors: boolean("showErrors", false, "props") })); };

package/dist/src/components/molecules/phone-form/index.d.ts

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

package/dist/src/components/molecules/phone-form/index.js

@@ -1,6 +0,0 @@
-import PhoneForm from "./PhoneForm";
-import { reducer, mapStateToProps, mapDispatchToProps } from "./PhoneForm.state";
-PhoneForm.reducer = reducer;
-PhoneForm.mapStateToProps = mapStateToProps;
-PhoneForm.mapDispatchToProps = mapDispatchToProps;
-export default PhoneForm;

package/dist/src/components/molecules/radio-section/RadioSection.d.ts

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

package/dist/src/components/molecules/radio-section/RadioSection.js

@@ -1,126 +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 React, { Fragment, useState } from "react";
-import styled from "styled-components";
-import { themeComponent } from "../../../util/themeUtils";
-import { fallbackValues } from "./RadioSection.theme";
-import { AnimatePresence } from "framer-motion";
-import RadioButton from "../../atoms/radio-button";
-import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
-import { noop } from "../../../util/general";
-import Text from "../../atoms/text";
-import { CHARADE_GREY, ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
-/*
-  Takes an array of section objects, each object should look like:
-    {
-      title: <React Component(s)>,
-      id: <String> "identifier of section",
-      disabled: boolean, (displays section and grayed out radio but disables interaction)
-      hideRadioButton: boolean, (keeps section displayed but hides radio and disables open/close function),
-      hidden: boolean, (hides section entirely)
-      dataQa: string,
-      content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work)
-    }
-  
-  Also takes an "openSection" which should equal the id of the section that should be open
-  And a toggleOpenSection. RadioSection will call this function with the id of the section
-  that it is in. It is up to the user to store the open section value in state up from the component
-  using a useState() hook, or reducer.
-
-  The section itself comes with some motion to open/close. To add more motion to the content,
-  wrap your content with a Motion layout primitive and provide appropriate props.
-
-*/
-var ACTIVE = "ACTIVE";
-var EXPIRING_SOON = "EXPIRING_SOON";
-var EXPIRED = "EXPIRED";
-var RadioSection = function (_a) {
-    var themeValues = _a.themeValues, isMobile = _a.isMobile, supportsTouch = _a.supportsTouch, _b = _a.sections, sections = _b === void 0 ? [] : _b, _c = _a.openSection, openSection = _c === void 0 ? "" : _c, toggleOpenSection = _a.toggleOpenSection, _d = _a.staggeredAnimation, staggeredAnimation = _d === void 0 ? false : _d, _e = _a.initiallyOpen, initiallyOpen = _e === void 0 ? true : _e, _f = _a.openHeight, openHeight = _f === void 0 ? "auto" : _f;
-    var handleKeyDown = function (id, e) {
-        if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
-            toggleOpenSection(id);
-        }
-    };
-    var renderCardStatus = function (item) {
-        var expirationStatus = item.expirationStatus, expireDate = item.expireDate;
-        switch (expirationStatus) {
-            case ACTIVE:
-                return (React.createElement(Text, { variant: "pXS", color: ASH_GREY, extraStyles: "text-align: right;" },
-                    "Exp Date ",
-                    expireDate));
-            case EXPIRING_SOON:
-                return (React.createElement(Text, { variant: "pXS", color: FIRE_YELLOW, extraStyles: "text-align: right;" },
-                    "Expiring Soon ",
-                    expireDate));
-            case EXPIRED:
-                return (React.createElement(Text, { variant: "pXS", color: ASH_GREY, extraStyles: "text-align: right;" }, "Expired"));
-            default:
-                null;
-        }
-    };
-    var wrapper = {
-        open: {
-            height: openHeight,
-            opacity: 1,
-            transition: {
-                duration: 0.3,
-                ease: [0.04, 0.62, 0.23, 0.98],
-                staggerChildren: staggeredAnimation ? 0.15 : 0
-            }
-        },
-        closed: {
-            height: 0,
-            opacity: 0,
-            transition: {
-                duration: 0.3,
-                ease: [0.04, 0.62, 0.23, 0.98],
-                staggerChildren: staggeredAnimation ? 0.15 : 0,
-                staggerDirection: -1
-            }
-        }
-    };
-    var borderStyles = "\n    border-width: 0 0 1px 0;\n    border-color: ".concat(themeValues.borderColor, ";\n    border-style: solid;\n    border-radius: 0px;\n    transform-origin: 100% 0;\n\n    &:last-child {\n      border-width: 0;\n    }\n  ");
-    var RightIcon = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", ";\n    width: ", ";\n    ", "\n    transition: opacity 0.3s ease;\n  "], ["\n    height: ", ";\n    width: ", ";\n    ", "\n    transition: opacity 0.3s ease;\n  "])), function (_a) {
-        var isMobile = _a.isMobile;
-        return (isMobile ? "14px" : "18px");
-    }, function (_a) {
-        var isMobile = _a.isMobile;
-        return (isMobile ? "22px" : "28px");
-    }, function (_a) {
-        var fade = _a.fade;
-        return fade && "opacity: 0.4;";
-    });
-    var _g = useState(null), focused = _g[0], setFocused = _g[1];
-    return (React.createElement(Box, { padding: "1px", border: "1px solid ".concat(themeValues.borderColor), borderRadius: "4px" },
-        React.createElement(Stack, { childGap: "0" }, sections
-            .filter(function (section) { return !section.hidden; })
-            .map(function (section) { return (React.createElement(Motion, { tabIndex: section.hideRadioButton || section.disabled ? "-1" : "0", onKeyDown: function (e) { return handleKeyDown(section.id, e); }, onFocus: function () { return setFocused(section.id); }, onBlur: function () { return setFocused(null); }, hoverStyles: themeValues.focusStyles, animate: openSection === section.id ? "open" : "closed", initial: initiallyOpen ? "open" : "closed", key: "item-".concat(section.id), extraStyles: borderStyles },
-            React.createElement(Stack, { childGap: "0" },
-                React.createElement(Box, { padding: section.hideRadioButton
-                        ? "1.5rem"
-                        : "1.25rem 1.5rem 1.25rem 1.25rem", background: section.disabled
-                        ? themeValues.headingDisabledColor
-                        : themeValues.headingBackgroundColor, onClick: (isMobile && supportsTouch) || section.disabled
-                        ? noop
-                        : function () { return toggleOpenSection(section.id); }, onTouchEnd: (isMobile && supportsTouch) || !section.disabled
-                        ? function () { return toggleOpenSection(section.id); }
-                        : noop, key: "header-".concat(section.id), borderSize: "0px", borderColor: themeValues.borderColor, borderWidthOverride: openSection === section.id && !!section.content
-                        ? "0px 0px 1px 0px"
-                        : "", extraStyles: !section.disabled ? "cursor: pointer;" : "", dataQa: section.dataQa ? section.dataQa : section.id },
-                    React.createElement(Cluster, { justify: "space-between", align: "center", childGap: "0.5rem", nowrap: true },
-                        React.createElement(Cluster, { justify: "flex-start", align: "center", nowrap: true },
-                            !section.hideRadioButton && (React.createElement(Box, { padding: "0" },
-                                React.createElement(RadioButton, { name: section.id, radioOn: openSection === section.id, radioFocused: focused === section.id, toggleRadio: section.disabled
-                                        ? noop
-                                        : function () { return toggleOpenSection(section.id); }, tabIndex: "-1" }))),
-                            section.titleIcon && (React.createElement(Cluster, { align: "center" }, section.titleIcon)),
-                            React.createElement(Box, { padding: section.titleIcon ? "0 0 0 8px" : "0" },
-                                React.createElement(Text, { variant: "p", color: CHARADE_GREY }, section.title))),
-                        section.rightIcons && (React.createElement(Cluster, { childGap: "0.5rem" }, section.rightIcons.map(function (icon) { return (React.createElement(RightIcon, { src: icon.img, key: icon.img, fade: !icon.enabled, isMobile: isMobile, alt: icon.altText })); }))),
-                        section.shouldDisplayCardExpiration && (React.createElement(Fragment, null, renderCardStatus(section))))),
-                React.createElement(AnimatePresence, { initial: false }, openSection === section.id && (React.createElement(Motion, { key: "content-".concat(section.id), padding: "0", background: themeValues.bodyBackgroundColor, layoutTransition: true, initial: "closed", animate: "open", exit: "closed", variants: wrapper, extraStyles: "transform-origin: 100% 0;" }, section.content)))))); }))));
-};
-export default themeComponent(RadioSection, "RadioSection", fallbackValues);
-var templateObject_1;

package/dist/src/components/molecules/radio-section/RadioSection.stories.d.ts

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

package/dist/src/components/molecules/radio-section/RadioSection.stories.js

@@ -1,18 +0,0 @@
-import React, { useState } from "react";
-import { boolean } from "@storybook/addon-knobs";
-import RadioSection from "./RadioSection";
-import page from "../../../../.storybook/page";
-var story = page({
-    title: "Components|Atoms/RadioSection",
-    Component: RadioSection
-});
-export default story;
-var sections = [
-    { id: "foo", title: "Foo", content: React.createElement("div", null, "Content 0") },
-    { id: "bar", title: "Bar", content: React.createElement("div", null, "Content 1") },
-    { id: "baz", title: "Baz", content: React.createElement("div", null, "Content 2") }
-];
-export var radioSection = function () {
-    var _a = useState(""), openSection = _a[0], setOpenSection = _a[1];
-    return (React.createElement(RadioSection, { isMobile: boolean("isMobile", false, "props"), supportsTouch: boolean("isMobile", false, "props"), toggleOpenSection: setOpenSection, openSection: openSection, staggeredAnimation: boolean("staggeredAnimation", false, "props"), sections: sections }));
-};

package/dist/src/components/molecules/radio-section/RadioSection.theme.d.ts

@@ -1,13 +0,0 @@
-export namespace fallbackValues {
-    export { headingBackgroundColor };
-    export { headingDisabledColor };
-    export { bodyBackgroundColor };
-    export { borderColor };
-    export { focusStyles };
-}
-declare const headingBackgroundColor: string;
-declare const headingDisabledColor: string;
-declare const bodyBackgroundColor: "#eeeeee";
-declare const borderColor: string;
-declare const focusStyles: "outline: none;";
-export {};

package/dist/src/components/molecules/radio-section/RadioSection.theme.js

@@ -1,13 +0,0 @@
-import { WHITE, GREY_CHATEAU, ATHENS_GREY } from "../../../constants/colors";
-var headingBackgroundColor = "".concat(WHITE);
-var headingDisabledColor = "".concat(ATHENS_GREY);
-var bodyBackgroundColor = "#eeeeee";
-var borderColor = "".concat(GREY_CHATEAU);
-var focusStyles = "outline: none;";
-export var fallbackValues = {
-    headingBackgroundColor: headingBackgroundColor,
-    headingDisabledColor: headingDisabledColor,
-    bodyBackgroundColor: bodyBackgroundColor,
-    borderColor: borderColor,
-    focusStyles: focusStyles
-};

package/dist/src/components/molecules/radio-section/index.d.ts

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

package/dist/src/components/molecules/radio-section/index.js

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

package/dist/src/components/molecules/registration-form/RegistrationForm.d.ts

@@ -1,9 +0,0 @@
-export default RegistrationForm;
-declare function RegistrationForm({ clearOnDismount, fields, actions, handleSubmit, showErrors, isMobile }: {
-    clearOnDismount: any;
-    fields: any;
-    actions: any;
-    handleSubmit?: (() => void) | undefined;
-    showErrors: any;
-    isMobile: any;
-}): JSX.Element;

package/dist/src/components/molecules/registration-form/RegistrationForm.js

@@ -1,43 +0,0 @@
-import React, { useEffect } from "react";
-import { required, hasLength, matchesField, hasNumber, hasLowercaseLetter, hasUppercaseLetter, hasSpecialCharacter, isProbablyEmail } from "redux-freeform";
-import PasswordRequirements from "../../atoms/password-requirements";
-import { Box } from "../../atoms/layouts";
-import { FormInput, FormInputColumn } from "../../atoms/form-layouts";
-import { noop } from "../../../util/general";
-var RegistrationForm = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var clearOnDismount = _a.clearOnDismount, fields = _a.fields, actions = _a.actions, _g = _a.handleSubmit, handleSubmit = _g === void 0 ? noop : _g, showErrors = _a.showErrors, isMobile = _a.isMobile;
-    if (clearOnDismount) {
-        useEffect(function () { return function () { return actions.form.clear(); }; }, []);
-    }
-    var firstNameErrorMessages = (_b = {},
-        _b[required.error] = "First name is required",
-        _b);
-    var lastNameErrorMessages = (_c = {},
-        _c[required.error] = "Last name is required",
-        _c);
-    var emailErrorMessages = (_d = {},
-        _d[required.error] = "Email is required",
-        _d[isProbablyEmail.error] = "Invalid email address",
-        _d);
-    var passwordErrorMessages = (_e = {},
-        _e[required.error] = "Password is required",
-        _e[hasLength.error] = "Password must have at least 8 characters",
-        _e[hasNumber.error] = "Password must contain at least one number",
-        _e[hasLowercaseLetter.error] = "Password must contain at least one lowercase letter",
-        _e[hasUppercaseLetter.error] = "Password must contain at least one uppercase letter",
-        _e[hasSpecialCharacter.error] = "Password must contain at least one special character (!@#$%^&*.?)",
-        _e);
-    var confirmPasswordErrorMessages = (_f = {},
-        _f[matchesField.error] = "Confirm password must match password",
-        _f);
-    return (React.createElement(FormInputColumn, { role: "form", "aria-label": "Registration" },
-        React.createElement(FormInput, { labelTextWhenNoError: "First name", errorMessages: firstNameErrorMessages, field: fields.firstName, fieldActions: actions.fields.firstName, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, autocomplete: "given-name" }),
-        React.createElement(FormInput, { labelTextWhenNoError: "Last name", errorMessages: lastNameErrorMessages, field: fields.lastName, fieldActions: actions.fields.lastName, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, autocomplete: "family-name" }),
-        React.createElement(FormInput, { labelTextWhenNoError: "Email address", errorMessages: emailErrorMessages, field: fields.email, fieldActions: actions.fields.email, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, type: "email", isEmail: true, autocomplete: "email" }),
-        React.createElement(FormInput, { labelTextWhenNoError: "Password", errorMessages: passwordErrorMessages, field: fields.password, fieldActions: actions.fields.password, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, type: "password", autocomplete: "new-password" }),
-        React.createElement(FormInput, { labelTextWhenNoError: "Confirm password", errorMessages: confirmPasswordErrorMessages, field: fields.confirmPassword, fieldActions: actions.fields.confirmPassword, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, type: "password", autocomplete: "new-password" }),
-        React.createElement(Box, { padding: isMobile ? "0" : "0.5rem 0 0" },
-            React.createElement(PasswordRequirements, { password: fields.password, isMobile: isMobile }))));
-};
-export default RegistrationForm;

package/dist/src/components/molecules/registration-form/RegistrationForm.state.d.ts

@@ -1,3 +0,0 @@
-export const reducer: any;
-export const mapStateToProps: any;
-export const mapDispatchToProps: any;

package/dist/src/components/molecules/registration-form/RegistrationForm.state.js

@@ -1,27 +0,0 @@
-var _a;
-import { createFormState, required, matchesField, hasLength, hasNumber, hasLowercaseLetter, hasUppercaseLetter, hasSpecialCharacter, isProbablyEmail } from "redux-freeform";
-var formConfig = {
-    firstName: {
-        validators: [required()]
-    },
-    lastName: {
-        validators: [required()]
-    },
-    email: {
-        validators: [required(), isProbablyEmail()]
-    },
-    password: {
-        validators: [
-            required(),
-            hasLength(8, 100),
-            hasNumber(),
-            hasLowercaseLetter(),
-            hasUppercaseLetter(),
-            hasSpecialCharacter()
-        ]
-    },
-    confirmPassword: {
-        validators: [required(), matchesField("password")]
-    }
-};
-export var reducer = (_a = createFormState(formConfig), _a.reducer), mapStateToProps = _a.mapStateToProps, mapDispatchToProps = _a.mapDispatchToProps;

package/dist/src/components/molecules/registration-form/RegistrationForm.stories.d.ts

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

package/dist/src/components/molecules/registration-form/RegistrationForm.stories.js

@@ -1,16 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { boolean } from "@storybook/addon-knobs";
-import RegistrationForm from "./RegistrationForm";
-import page from "../../../../.storybook/page";
-import * as RegistrationFormState from "./RegistrationForm.state";
-var story = page({
-    title: "Components|Molecules/RegistrationForm",
-    Component: RegistrationForm,
-    reducer: RegistrationFormState.reducer,
-    mapStateToProps: RegistrationFormState.mapStateToProps,
-    mapDispatchToProps: RegistrationFormState.mapDispatchToProps
-});
-export default story;
-var ConnectedForm = connect(RegistrationFormState.mapStateToProps, RegistrationFormState.mapDispatchToProps)(RegistrationForm);
-export var registrationForm = function () { return (React.createElement(ConnectedForm, { showErrors: boolean("showErrors", false, "props") })); };

package/dist/src/components/molecules/registration-form/index.d.ts

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

package/dist/src/components/molecules/registration-form/index.js

@@ -1,6 +0,0 @@
-import RegistrationForm from "./RegistrationForm";
-import { reducer, mapStateToProps, mapDispatchToProps } from "./RegistrationForm.state";
-RegistrationForm.reducer = reducer;
-RegistrationForm.mapStateToProps = mapStateToProps;
-RegistrationForm.mapDispatchToProps = mapDispatchToProps;
-export default RegistrationForm;