@thecb/components 7.5.1 → 7.5.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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