@thecb/components 7.5.1 → 7.5.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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