@thecb/components 7.5.2 → 7.6.0

package/dist/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -1,60 +0,0 @@
-import React, { Fragment } from "react";
-import { fallbackValues } from "./CollapsibleSection.theme";
-import { AnimatePresence } from "framer-motion";
-import { themeComponent } from "../../../util/themeUtils";
-import Title from "../../atoms/title";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
-import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
-import { ChevronIcon } from "../../atoms/icons";
-import { noop } from "../../../util/general";
-var CollapsibleSection = function (_a) {
-    var _b;
-    var isOpen = _a.isOpen, toggleSection = _a.toggleSection, themeValues = _a.themeValues, isMobile = _a.isMobile, supportsTouch = _a.supportsTouch, title = _a.title, customPadding = _a.customPadding, _c = _a.initiallyOpen, initiallyOpen = _c === void 0 ? true : _c, _d = _a.openHeight, openHeight = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.customTitle, customTitle = _e === void 0 ? false : _e, _f = _a.stackTitle, stackTitle = _f === void 0 ? false : _f, stackTitleContent = _a.stackTitleContent, _g = _a.sectionGap, sectionGap = _g === void 0 ? "0.5rem" : _g, _h = _a.name, name = _h === void 0 ? "" : _h, _j = _a.index, index = _j === void 0 ? 1 : _j;
-    var handleKeyDown = function (e) {
-        if (e.keyCode === 13) {
-            toggleSection();
-        }
-    };
-    var numChildren = typeof children === "Array" ? children.length : 1;
-    var label = name !== "" ? name : !customTitle ? title : "collapsible section";
-    var id = "".concat((_b = label === null || label === void 0 ? void 0 : label.replaceAll(" ", "-")) === null || _b === void 0 ? void 0 : _b.toLowerCase(), "-").concat(index);
-    var wrapper = {
-        open: {
-            height: openHeight,
-            transition: {
-                duration: 0.3,
-                ease: [0.04, 0.62, 0.23, 0.98],
-                staggerChildren: 0.15
-            }
-        },
-        closed: {
-            height: 0,
-            transition: {
-                duration: 0.3,
-                ease: [0.04, 0.62, 0.23, 0.98],
-                staggerChildren: 0.15,
-                staggerDirection: -1,
-                delay: numChildren * 0.35
-            }
-        }
-    };
-    var icon = {
-        open: {
-            rotate: "90deg"
-        },
-        closed: {
-            rotate: "0deg"
-        }
-    };
-    return (React.createElement(Motion, { padding: "0", hoverStyles: "outline: none;", animate: isOpen ? "open" : "closed", positionTransition: true },
-        stackTitle && React.createElement(Fragment, null, stackTitleContent),
-        React.createElement(Stack, { childGap: isOpen && !isMobile ? sectionGap : "0rem" },
-            React.createElement(Box, { padding: "0", role: "heading", "aria-label": label, "aria-level": 3 },
-                React.createElement(Box, { padding: customPadding ? customPadding : "0", background: themeValues.headingBackgroundColor, onClick: isMobile && supportsTouch ? noop : toggleSection, onTouchEnd: isMobile && supportsTouch ? toggleSection : noop, key: "header", hoverStyles: "cursor: pointer;", tabIndex: "0", onKeyDown: handleKeyDown, extraStyles: "z-index: 25;", role: "button", "aria-expanded": isOpen.toString(), "aria-controls": id, id: "".concat(id, "-button") },
-                    React.createElement(Cluster, { justify: "space-between", align: "center" },
-                        customTitle ? (React.createElement(Box, { width: "calc(100% - 36px)", padding: "0px" }, title)) : (React.createElement(Title, { weight: FONT_WEIGHT_SEMIBOLD, color: themeValues.titleColor, as: "h6", variant: "small" }, title)),
-                        React.createElement(Motion, { variants: icon, extraStyles: "display: flex; align-items: center;" },
-                            React.createElement(ChevronIcon, null))))),
-            React.createElement(AnimatePresence, { initial: false }, isOpen && (React.createElement(Motion, { padding: "0", background: themeValues.bodyBackgroundColor, key: "content", positionTransition: true, initial: initiallyOpen ? "open" : "closed", exit: "closed", variants: wrapper, extraStyles: "transform-origin: 100% 0; overflow-y: hidden;", id: "".concat(id, "-content"), role: "region", "aria-labelledby": "".concat(id, "-button") }, children))))));
-};
-export default themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues);

package/dist/src/components/molecules/collapsible-section/CollapsibleSection.stories.d.ts

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

package/dist/src/components/molecules/collapsible-section/CollapsibleSection.stories.js

@@ -1,30 +0,0 @@
-import React, { useState } from "react";
-import { text, boolean } from "@storybook/addon-knobs";
-import CollapsibleSection from "./CollapsibleSection";
-import DisplayCard from "../../atoms/display-card";
-import { Stack, Motion } from "../../atoms/layouts";
-import page from "../../../../.storybook/page";
-var content = {
-    open: {
-        x: "0",
-        opacity: 1
-    },
-    closed: {
-        x: "-7.5%",
-        opacity: 0
-    }
-};
-export var collapsibleSection = function () {
-    var _a = useState(false), open = _a[0], setOpen = _a[1];
-    return (React.createElement(CollapsibleSection, { title: text("title", "Collapsible Section Storybook", "props"), toggleSection: function () { return setOpen(!open); }, initiallyOpen: boolean("initiallyOpen", false, "props"), isOpen: open, key: "security-section" },
-        React.createElement(Stack, { childGap: "16px" },
-            React.createElement(Motion, { padding: "0", variants: content, transition: { duration: 0.3 }, positionTransition: true, extraStyles: "transform-origin: 100% 0;" },
-                React.createElement(DisplayCard, { title: "Password", item: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", buttonText: "Change Password", link: true, url: "" })),
-            React.createElement(Motion, { padding: "0", variants: content, transition: { duration: 0.3 }, positionTransition: true, extraStyles: "transform-origin: 100% 0;" },
-                React.createElement(DisplayCard, { title: "Name", item: "Hello Citybase", buttonText: "Edit Name", link: true, url: "" })))));
-};
-var story = page({
-    title: "Components|Molecules/CollapsibleSection",
-    Component: CollapsibleSection
-});
-export default story;

package/dist/src/components/molecules/collapsible-section/CollapsibleSection.theme.d.ts

@@ -1,9 +0,0 @@
-export namespace fallbackValues {
-    export { titleColor };
-    export { headingBackgroundColor };
-    export { bodyBackgroundColor };
-}
-declare const titleColor: "#292A33";
-declare const headingBackgroundColor: "transparent";
-declare const bodyBackgroundColor: "transparent";
-export {};

package/dist/src/components/molecules/collapsible-section/CollapsibleSection.theme.js

@@ -1,8 +0,0 @@
-var titleColor = "#292A33";
-var headingBackgroundColor = "transparent";
-var bodyBackgroundColor = "transparent";
-export var fallbackValues = {
-    titleColor: titleColor,
-    headingBackgroundColor: headingBackgroundColor,
-    bodyBackgroundColor: bodyBackgroundColor
-};

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

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

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

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

package/dist/src/components/molecules/edit-name-form/EdidNameForm.stories.d.ts

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

package/dist/src/components/molecules/edit-name-form/EdidNameForm.stories.js

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

package/dist/src/components/molecules/edit-name-form/EditNameForm.d.ts

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

package/dist/src/components/molecules/edit-name-form/EditNameForm.js

@@ -1,22 +0,0 @@
-import React, { useEffect } from "react";
-import { required } from "redux-freeform";
-import { FormInput, FormContainer, FormInputColumn } from "../../atoms/form-layouts";
-import { noop } from "../../../util/general";
-var EditNameForm = function (_a) {
-    var _b, _c;
-    var fields = _a.fields, actions = _a.actions, clearOnDismount = _a.clearOnDismount, showErrors = _a.showErrors, _d = _a.handleSubmit, handleSubmit = _d === void 0 ? noop : _d;
-    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);
-    return (React.createElement(FormContainer, { role: "form", "aria-label": "Edit name" },
-        React.createElement(FormInputColumn, null,
-            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" }))));
-};
-export default EditNameForm;

package/dist/src/components/molecules/edit-name-form/EditNameForm.state.d.ts

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

package/dist/src/components/molecules/edit-name-form/EditNameForm.state.js

@@ -1,11 +0,0 @@
-var _a;
-import { createFormState, required } from "redux-freeform";
-var formConfig = {
-    firstName: {
-        validators: [required()]
-    },
-    lastName: {
-        validators: [required()]
-    }
-};
-export var reducer = (_a = createFormState(formConfig), _a.reducer), mapStateToProps = _a.mapStateToProps, mapDispatchToProps = _a.mapDispatchToProps;

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

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

package/dist/src/components/molecules/edit-name-form/index.js

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

package/dist/src/components/molecules/editable-list/EditableList.d.ts

@@ -1,23 +0,0 @@
-export default EditableList;
-declare function EditableList({ title, titleWeight, canAdd, addItem, removeItem, editItem, itemName, renderItem, items, canEdit, canRemove, listItemSize, maxItems, useModal, modal, modalProps, autoPayMethods, as, qaPrefix, ariaLabel }: {
-    title?: string | undefined;
-    titleWeight?: string | undefined;
-    canAdd?: boolean | undefined;
-    addItem: any;
-    removeItem: any;
-    editItem: any;
-    itemName: any;
-    renderItem: any;
-    items: any;
-    canEdit?: boolean | undefined;
-    canRemove?: boolean | undefined;
-    listItemSize?: string | undefined;
-    maxItems: any;
-    useModal?: boolean | undefined;
-    modal: any;
-    modalProps: any;
-    autoPayMethods: any;
-    as?: string | undefined;
-    qaPrefix: any;
-    ariaLabel: any;
-}): JSX.Element;

package/dist/src/components/molecules/editable-list/EditableList.js

@@ -1,49 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React, { useState } from "react";
-import { EditableListItem, EditableListItemControls } from "./EditableList.styled";
-import { Box, Stack } from "../../atoms/layouts";
-import Placeholder from "../../atoms/placeholder";
-import ButtonWithAction from "../../atoms/button-with-action";
-import Text from "../../atoms/text";
-import Title from "../../atoms/title";
-import { STORM_GREY, BOSTON_BLUE, CHARADE_GREY } from "../../../constants/colors";
-var ACTIVE = "ACTIVE";
-var EXPIRED = "EXPIRED";
-var EditableList = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? "" : _b, _c = _a.titleWeight, titleWeight = _c === void 0 ? "400" : _c, _d = _a.canAdd, canAdd = _d === void 0 ? true : _d, addItem = _a.addItem, removeItem = _a.removeItem, editItem = _a.editItem, itemName = _a.itemName, renderItem = _a.renderItem, items = _a.items, _e = _a.canEdit, canEdit = _e === void 0 ? true : _e, _f = _a.canRemove, canRemove = _f === void 0 ? true : _f, _g = _a.listItemSize, listItemSize = _g === void 0 ? "small" : _g, maxItems = _a.maxItems, _h = _a.useModal, useModal = _h === void 0 ? false : _h, Modal = _a.modal, modalProps = _a.modalProps, autoPayMethods = _a.autoPayMethods, _j = _a.as, as = _j === void 0 ? "p" : _j, qaPrefix = _a.qaPrefix, ariaLabel = _a.ariaLabel;
-    var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
-    return (React.createElement(Box, { padding: "0rem 0rem 1.5rem 0rem", as: "section", "aria-labelledby": "li" },
-        React.createElement(Stack, { childGap: "0rem" },
-            title !== "" && (React.createElement(Box, { padding: "0rem 0rem 0.5rem 0rem" },
-                React.createElement(Title, { as: as, weight: titleWeight, color: CHARADE_GREY, extraStyles: "letter-spacing: 0.29px; font-size: 1.125rem;" }, title))),
-            React.createElement(Box, { padding: "0", borderRadius: "4px", extraStyles: "box-shadow: 0px 2px 14px 0px rgb(246, 246, 249),\n    0px 3px 8px 0px rgb(202, 206, 216);" }, items.map(function (item) {
-                var _a;
-                var _b = useState(false), modalOpen = _b[0], toggleModal = _b[1];
-                var expiredItem = (_a = item === null || item === void 0 ? void 0 : item.expirationStatus) !== null && _a !== void 0 ? _a : ACTIVE;
-                return (React.createElement(EditableListItem, { listItemSize: !!item.id &&
-                        (autoPayMethods === null || autoPayMethods === void 0 ? void 0 : autoPayMethods.some(function (methodID) { return methodID === item.id; }))
-                        ? "big"
-                        : listItemSize, key: item.id || item, disabled: expiredItem === EXPIRED },
-                    React.createElement(Text, { variant: "p", color: CHARADE_GREY }, renderItem(item)),
-                    React.createElement(EditableListItemControls, null,
-                        item.isPrimary && (React.createElement(Text, { variant: "p", color: STORM_GREY, extraStyles: "font-style: italic;", key: "Default ".concat(itemName) },
-                            "Default ",
-                            itemName)),
-                        canRemove && (React.createElement(Box, { padding: "0 0.5rem", border: "2px solid transparent", extraStyles: ":not(:first-child) { border-left: 2px solid ".concat(BOSTON_BLUE, ";}"), dataQa: qaPrefix + " Remove", key: "Remove ".concat(item.id) }, useModal ? (React.createElement(Modal, __assign({ item: __assign({}, item) }, modalProps, { modalOpen: modalOpen, toggleModal: toggleModal }))) : (React.createElement(ButtonWithAction, { variant: "smallGhost", text: "Remove", action: function () { return removeItem(item.id); }, extraStyles: "min-width: 0;", "aria-label": "Remove ".concat(ariaLabel || itemName) })))),
-                        canEdit && (React.createElement(Box, { padding: "0 0.5rem", border: "2px solid transparent", extraStyles: ":not(:first-child) { border-left: 2px solid ".concat(BOSTON_BLUE, ";}"), dataQa: qaPrefix + " Edit", key: "Edit ".concat(item.id) },
-                            React.createElement(ButtonWithAction, { variant: "smallGhost", text: "Edit", action: function () { return editItem(item.id); }, extraStyles: "min-width: 0;", "aria-label": "Edit ".concat(ariaLabel || itemName) }))))));
-            })),
-            canAdd && (!maxItems || items.length < maxItems) && (React.createElement(Box, { padding: items.length === 0 ? "0" : "1rem 0 0" },
-                React.createElement(Placeholder, { text: addText, action: addItem, dataQa: "Add " + qaPrefix, "aria-label": addText }))))));
-};
-export default EditableList;

package/dist/src/components/molecules/editable-list/EditableList.styled.d.ts

@@ -1,2 +0,0 @@
-export const EditableListItem: any;
-export const EditableListItemControls: any;

package/dist/src/components/molecules/editable-list/EditableList.styled.js

@@ -1,15 +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 { WHITE, GHOST_GREY } from "../../../constants/colors";
-export var EditableListItem = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  background: ", ";\n  border-color: ", ";\n  height: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  :not(:last-child),\n  :not(:first-child) {\n    box-shadow: inset 0px -1px 0px 0px rgb(202, 206, 216);\n  }\n  :first-child {\n    border-top-left-radius: 3px;\n    border-top-right-radius: 3px;\n  }\n  :last-child {\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    box-shadow: none;\n  }\n"], ["\n  box-sizing: border-box;\n  background: ", ";\n  border-color: ", ";\n  height: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  :not(:last-child),\n  :not(:first-child) {\n    box-shadow: inset 0px -1px 0px 0px rgb(202, 206, 216);\n  }\n  :first-child {\n    border-top-left-radius: 3px;\n    border-top-right-radius: 3px;\n  }\n  :last-child {\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    box-shadow: none;\n  }\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return disabled ? "rgba(246, 246, 249, 0.7)" : WHITE;
-}, GHOST_GREY, function (_a) {
-    var listItemSize = _a.listItemSize;
-    return (listItemSize === "big" ? "120px" : "72px");
-});
-export var EditableListItemControls = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n"])));
-var templateObject_1, templateObject_2;

package/dist/src/components/molecules/editable-list/index.d.ts

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

package/dist/src/components/molecules/editable-list/index.js

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

package/dist/src/components/molecules/editable-table/EditableTable.d.ts

@@ -1,7 +0,0 @@
-export default EditableTable;
-declare function EditableTable({ title, renderItem, items, isMobile }: {
-    title: any;
-    renderItem: any;
-    items: any;
-    isMobile: any;
-}): JSX.Element;

package/dist/src/components/molecules/editable-table/EditableTable.js

@@ -1,16 +0,0 @@
-import React, { Fragment } from "react";
-import { EditableTableContainer, TableWrapper } from "./EditableTable.styled";
-import { Box } from "../../atoms/layouts";
-import Paragraph from "../../atoms/paragraph";
-import { GHOST_GREY } from "../../../constants/colors";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
-import { safeChildren } from "../../../util/general";
-var EditableTable = function (_a) {
-    var title = _a.title, renderItem = _a.renderItem, items = _a.items, isMobile = _a.isMobile;
-    var titleChild = title && (React.createElement(Box, { padding: "0 0 0.5rem 0.5rem", borderSize: "1px", borderColor: GHOST_GREY, borderWidthOverride: "0 0 1px 0" },
-        React.createElement(Paragraph, { variant: "pL", weight: FONT_WEIGHT_SEMIBOLD }, title)));
-    return (React.createElement(EditableTableContainer, { isMobile: isMobile },
-        safeChildren(titleChild, React.createElement(Fragment, null)),
-        React.createElement(TableWrapper, null, renderItem(items))));
-};
-export default EditableTable;

package/dist/src/components/molecules/editable-table/EditableTable.styled.d.ts

@@ -1,9 +0,0 @@
-export const EditableTableContainer: any;
-export const EditableTableListItem: any;
-export const EditableListItemControls: any;
-export const EditableListAction: any;
-export const ItemWrapper: any;
-export const ActionWrapper: any;
-export const TableItemKey: any;
-export const TableItemValue: any;
-export const TableWrapper: any;

package/dist/src/components/molecules/editable-table/EditableTable.styled.js

@@ -1,61 +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 { BRIGHT_GREY, STORM_GREY, GHOST_GREY, MATISSE_BLUE } from "../../../constants/colors";
-export var EditableTableContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  flex-direction: column;\n  flex: 1;\n"], ["\n  display: ", ";\n  flex-direction: column;\n  flex: 1;\n"])), function (_a) {
-    var hide = _a.hide;
-    return (hide ? "none" : "flex");
-});
-export var EditableTableListItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  ", ";\n  align-items: ", ";\n  flex-direction: ", ";\n  flex: 1;\n  ", ";\n"], ["\n  width: 100%;\n  display: flex;\n  ", ";\n  align-items: ", ";\n  flex-direction: ", ";\n  flex: 1;\n  ", ";\n"])), function (_a) {
-    var isMobile = _a.isMobile;
-    return isMobile && "justify-content: center";
-}, function (_a) {
-    var isMobile = _a.isMobile;
-    return (isMobile ? "flex-start" : "center");
-}, function (_a) {
-    var isMobile = _a.isMobile;
-    return (isMobile ? "column" : "row");
-}, function (_a) {
-    var isMobile = _a.isMobile;
-    return isMobile ? "padding: 1rem 0.5rem" : "padding: 0 0.5rem";
-});
-export var EditableListItemControls = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n"])));
-export var EditableListAction = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  align-items: center;\n  font-size: 1rem;\n  padding-right: 1rem;\n  cursor: pointer;\n  display: ", ";\n"], ["\n  color: ", ";\n  align-items: center;\n  font-size: 1rem;\n  padding-right: 1rem;\n  cursor: pointer;\n  display: ", ";\n"])), MATISSE_BLUE, function (_a) {
-    var hide = _a.hide;
-    return (hide ? "none" : "flex");
-});
-export var ItemWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  width: 100%;\n  border-bottom: 1px solid ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  width: 100%;\n  border-bottom: 1px solid ", ";\n"])), GHOST_GREY);
-export var ActionWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-self: center;\n  justify-content: flex-end;\n  ", ";\n  flex: 1;\n"], ["\n  display: flex;\n  align-self: center;\n  justify-content: flex-end;\n  ", ";\n  flex: 1;\n"])), function (_a) {
-    var isMobile = _a.isMobile;
-    return isMobile && "display: none";
-});
-export var TableItemKey = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  font-size: ", ";\n  color: ", ";\n"], ["\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  font-size: ", ";\n  color: ", ";\n"])), function (_a) {
-    var isMobile = _a.isMobile;
-    return !isMobile && "flex: 1";
-}, function (_a) {
-    var isMobile = _a.isMobile;
-    return isMobile && "align-items: center";
-}, function (_a) {
-    var isMobile = _a.isMobile;
-    return !isMobile && "padding: 1.25rem 0";
-}, function (_a) {
-    var isMobile = _a.isMobile;
-    return (isMobile ? "1rem" : "1.125rem");
-}, STORM_GREY);
-export var TableItemValue = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  font-size: ", ";\n  color: ", ";\n"], ["\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  font-size: ", ";\n  color: ", ";\n"])), function (_a) {
-    var isMobile = _a.isMobile;
-    return !isMobile && "flex: 1";
-}, function (_a) {
-    var isMobile = _a.isMobile;
-    return !isMobile && "padding: 1.25rem 0";
-}, function (_a) {
-    var isMobile = _a.isMobile;
-    return isMobile && "align-items: center";
-}, function (_a) {
-    var isMobile = _a.isMobile;
-    return (isMobile ? "1.125rem" : "1.0625rem");
-}, BRIGHT_GREY);
-export var TableWrapper = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  width: 100%;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/components/molecules/editable-table/TableListItem.d.ts

@@ -1,9 +0,0 @@
-export default TableListItem;
-declare function TableListItem({ title, value, canEdit, canRemove, isMobile, borderTopItem }: {
-    title: any;
-    value: any;
-    canEdit?: boolean | undefined;
-    canRemove?: boolean | undefined;
-    isMobile: any;
-    borderTopItem: any;
-}): JSX.Element;

package/dist/src/components/molecules/editable-table/TableListItem.js

@@ -1,21 +0,0 @@
-import React, { Fragment } from "react";
-import { EditableTableListItem, EditableListAction, ItemWrapper, ActionWrapper, TableItemKey, TableItemValue } from "./EditableTable.styled";
-import { Box } from "../../atoms/layouts";
-import Text from "../../atoms/text";
-import { CHARADE_GREY, GHOST_GREY } from "../../../constants/colors";
-var TableListItem = function (_a) {
-    var title = _a.title, value = _a.value, _b = _a.canEdit, canEdit = _b === void 0 ? false : _b, _c = _a.canRemove, canRemove = _c === void 0 ? false : _c, isMobile = _a.isMobile, borderTopItem = _a.borderTopItem;
-    return (React.createElement(Box, { padding: "0px", extraStyles: "&:last-child {\n    > * {\n      border-bottom: none;\n    }\n  }\n  ".concat(isMobile &&
-            borderTopItem &&
-            "&:first-child {\n    > * {\n      border-top: 1px solid ".concat(GHOST_GREY, ";\n    }\n  }"), "\n  ") },
-        React.createElement(ItemWrapper, null,
-            React.createElement(EditableTableListItem, { isMobile: isMobile },
-                React.createElement(TableItemKey, { isMobile: isMobile },
-                    React.createElement(Text, { variant: "pS", color: CHARADE_GREY }, title)),
-                React.createElement(TableItemValue, { isMobile: isMobile },
-                    React.createElement(Text, { variant: "p", color: CHARADE_GREY }, value)),
-                canRemove || canEdit ? (React.createElement(ActionWrapper, { isMobile: isMobile },
-                    React.createElement(EditableListAction, { hide: !canRemove, onClick: function () { return console.log("Remove Item Coming Soon..."); } }, "Remove"),
-                    React.createElement(EditableListAction, { hide: !canEdit, onClick: function () { return console.log("Edit Item Coming Soon..."); } }, "Edit"))) : (React.createElement(Fragment, null))))));
-};
-export default TableListItem;

package/dist/src/components/molecules/editable-table/index.d.ts

@@ -1,3 +0,0 @@
-import EditableTable from "./EditableTable";
-import TableListItem from "./TableListItem";
-export { EditableTable, TableListItem };

package/dist/src/components/molecules/editable-table/index.js

@@ -1,3 +0,0 @@
-import EditableTable from "./EditableTable";
-import TableListItem from "./TableListItem";
-export { EditableTable, TableListItem };

package/dist/src/components/molecules/email-form/EmailForm.d.ts

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

package/dist/src/components/molecules/email-form/EmailForm.js

@@ -1,23 +0,0 @@
-import React, { useEffect } from "react";
-import { required, isProbablyEmail } from "redux-freeform";
-import { FormInput, FormContainer, FormInputColumn } from "../../atoms/form-layouts";
-import Checkbox from "../../atoms/checkbox";
-import Paragraph from "../../atoms/paragraph";
-import { noop } from "../../../util/general";
-var EmailForm = function (_a) {
-    var _b;
-    var _c = _a.variant, variant = _c === void 0 ? "default" : _c, clearOnDismount = _a.clearOnDismount, fields = _a.fields, actions = _a.actions, showErrors = _a.showErrors, guestCheckout = _a.guestCheckout, _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 emailFieldErrorMessages = (_b = {},
-        _b[required.error] = "Email address is required",
-        _b[isProbablyEmail.error] = "Invalid email address",
-        _b);
-    return (React.createElement(FormContainer, { variant: variant, role: "form", "aria-label": "Email address" },
-        guestCheckout && (React.createElement(Paragraph, { margin: "0 0 1.125rem 0" }, "If desired, you can create a wallet later for faster checkout")),
-        React.createElement(FormInputColumn, null,
-            React.createElement(FormInput, { labelTextWhenNoError: "Email address", errorMessages: emailFieldErrorMessages, type: "email", field: fields.email, fieldActions: actions.fields.email, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, isEmail: true, autocomplete: "email" }),
-            showWalletCheckbox && (React.createElement(Checkbox, { name: "email checkbox", title: "Save email address to wallet", checked: walletCheckboxMarked, onChange: saveToWallet })))));
-};
-export default EmailForm;

package/dist/src/components/molecules/email-form/EmailForm.state.d.ts

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

package/dist/src/components/molecules/email-form/EmailForm.state.js

@@ -1,8 +0,0 @@
-var _a;
-import { createFormState, required, isProbablyEmail } from "redux-freeform";
-var formConfig = {
-    email: {
-        validators: [required(), isProbablyEmail()]
-    }
-};
-export var reducer = (_a = createFormState(formConfig), _a.reducer), mapStateToProps = _a.mapStateToProps, mapDispatchToProps = _a.mapDispatchToProps;

package/dist/src/components/molecules/email-form/EmailForm.stories.d.ts

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

package/dist/src/components/molecules/email-form/EmailForm.stories.js

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

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

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

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

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

package/dist/src/components/molecules/forgot-password-form/ForgotPasswordForm.d.ts

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

package/dist/src/components/molecules/forgot-password-form/ForgotPasswordForm.js

@@ -1,17 +0,0 @@
-import React, { useEffect } from "react";
-import { required, isProbablyEmail } from "redux-freeform";
-import { FormInput } from "../../atoms/form-layouts";
-import { noop } from "../../../util/general";
-var ForgotPasswordForm = function (_a) {
-    var _b;
-    var fields = _a.fields, actions = _a.actions, clearOnDismount = _a.clearOnDismount, showErrors = _a.showErrors, _c = _a.handleSubmit, handleSubmit = _c === void 0 ? noop : _c;
-    if (clearOnDismount) {
-        useEffect(function () { return function () { return actions.form.clear(); }; }, []);
-    }
-    var EmailErrorMessages = (_b = {},
-        _b[required.error] = "Email address is required",
-        _b[isProbablyEmail.error] = "Email address is not valid",
-        _b);
-    return (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); }, isEmail: true, autocomplete: "email" }));
-};
-export default ForgotPasswordForm;

package/dist/src/components/molecules/forgot-password-form/ForgotPasswordForm.state.d.ts

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

package/dist/src/components/molecules/forgot-password-form/ForgotPasswordForm.state.js

@@ -1,8 +0,0 @@
-var _a;
-import { createFormState, required, isProbablyEmail } from "redux-freeform";
-var formConfig = {
-    email: {
-        validators: [required(), isProbablyEmail()]
-    }
-};
-export var reducer = (_a = createFormState(formConfig), _a.reducer), mapStateToProps = _a.mapStateToProps, mapDispatchToProps = _a.mapDispatchToProps;