@thecb/components 7.5.1 → 7.5.2

package/dist/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.d.ts

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

package/dist/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.js

@@ -0,0 +1,27 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import Heading from "../../atoms/heading";
+import Paragraph from "../../atoms/paragraph";
+import { Box, Cluster } from "../../atoms/layouts";
+import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
+import ButtonWithLink from "../../atoms/button-with-link";
+import { ForgotPasswordIcon } from "../../atoms/icons";
+import withWindowSize from "../../withWindowSize";
+import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
+var ResetConfirmationForm = function () {
+    var isMobile = useContext(ThemeContext).isMobile;
+    return (React.createElement(Box, { padding: "0", width: isMobile ? "auto" : "576px", borderRadius: "4px", background: WHITE, boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)" },
+        React.createElement(Box, { background: GRECIAN_GREY, minWidth: "100%", padding: "0.5rem" },
+            React.createElement(Cluster, { justify: "center", align: "center" },
+                React.createElement(ForgotPasswordIcon, null))),
+        React.createElement(FormContainer, { role: "form", "aria-label": "Reset password confirmation" },
+            React.createElement(FormInputColumn, { childGap: "0.5rem" },
+                React.createElement(Box, { padding: "0" },
+                    React.createElement(Heading, { color: CHARADE_GREY, variant: "h5", weight: "600" }, "Password reset link sent")),
+                React.createElement(Box, { padding: "0" },
+                    React.createElement(Paragraph, { variant: "p", color: CHARADE_GREY }, "Your password link was sent successfully. Check your email for a reset password link."))),
+            React.createElement(Box, { padding: isMobile ? "1rem 0 0" : "1.5rem 0 0" },
+                React.createElement(Cluster, { justify: "center", align: "center" },
+                    React.createElement(ButtonWithLink, { url: "/login", text: "Back to Login", variant: "primary", extraStyles: "width: 100%;", linkExtraStyles: "width: 100%;" }))))));
+};
+export default withWindowSize(ResetConfirmationForm);

package/dist/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.stories.d.ts

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

package/dist/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.stories.js

@@ -0,0 +1,9 @@
+import React from "react";
+import ResetConfirmationForm from "./ResetConfirmationForm";
+import page from "../../../../.storybook/page";
+var story = page({
+    title: "Components|Molecules/ResetConfirmationForm",
+    Component: ResetConfirmationForm
+});
+export default story;
+export var resetConfirmationForm = function () { return React.createElement(ResetConfirmationForm, null); };

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

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

package/dist/src/components/molecules/reset-confirmation-form/index.js

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

package/dist/src/components/molecules/reset-password-form/ResetPasswordForm.d.ts

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

package/dist/src/components/molecules/reset-password-form/ResetPasswordForm.js

@@ -0,0 +1,30 @@
+import React, { useEffect } from "react";
+import { required, hasLength, matchesField, hasNumber, hasLowercaseLetter, hasUppercaseLetter, hasSpecialCharacter } 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 ResetPasswordForm = function (_a) {
+    var _b, _c;
+    var _d = _a.handleSubmit, handleSubmit = _d === void 0 ? noop : _d, clearOnDismount = _a.clearOnDismount, fields = _a.fields, actions = _a.actions, showErrors = _a.showErrors, isMobile = _a.isMobile;
+    if (clearOnDismount) {
+        useEffect(function () { return function () { return actions.form.clear(); }; }, []);
+    }
+    var passwordErrorMessages = (_b = {},
+        _b[required.error] = "Password is required",
+        _b[hasLength.error] = "Password must have at least 8 characters",
+        _b[hasNumber.error] = "Password must contain at least one number",
+        _b[hasLowercaseLetter.error] = "Password must contain at least one lowercase letter",
+        _b[hasUppercaseLetter.error] = "Password must contain at least one uppercase letter",
+        _b[hasSpecialCharacter.error] = "Password must contain at least one special character (!@#$%^&*.?)",
+        _b);
+    var confirmPasswordErrorMessages = (_c = {},
+        _c[matchesField.error] = "Confirm password must match password",
+        _c);
+    return (React.createElement(FormInputColumn, { role: "form", "aria-label": "Reset password" },
+        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: "0" },
+            React.createElement(PasswordRequirements, { password: fields.password, isMobile: isMobile }))));
+};
+export default ResetPasswordForm;

package/dist/src/components/molecules/reset-password-form/ResetPasswordForm.state.d.ts

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

package/dist/src/components/molecules/reset-password-form/ResetPasswordForm.state.js

@@ -0,0 +1,18 @@
+var _a;
+import { createFormState, required, matchesField, hasLength, hasNumber, hasLowercaseLetter, hasUppercaseLetter, hasSpecialCharacter } from "redux-freeform";
+var formConfig = {
+    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/reset-password-form/ResetPasswordForm.stories.d.ts

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

package/dist/src/components/molecules/reset-password-form/ResetPasswordForm.stories.js

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

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

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

package/dist/src/components/molecules/reset-password-form/index.js

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

package/dist/src/components/molecules/reset-password-success/ResetPasswordSuccess.d.ts

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

package/dist/src/components/molecules/reset-password-success/ResetPasswordSuccess.js

@@ -0,0 +1,27 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import Heading from "../../atoms/heading";
+import Paragraph from "../../atoms/paragraph";
+import { Box, Cluster } from "../../atoms/layouts";
+import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
+import ButtonWithLink from "../../atoms/button-with-link";
+import { ForgotPasswordIcon } from "../../atoms/icons";
+import withWindowSize from "../../withWindowSize";
+import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
+var ResetConfirmationForm = function () {
+    var isMobile = useContext(ThemeContext).isMobile;
+    return (React.createElement(Box, { padding: "0", width: isMobile ? "auto" : "576px", borderRadius: "4px", background: WHITE, boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)" },
+        React.createElement(Box, { background: GRECIAN_GREY, minWidth: "100%", padding: "0.5rem" },
+            React.createElement(Cluster, { justify: "center", align: "center" },
+                React.createElement(ForgotPasswordIcon, null))),
+        React.createElement(FormContainer, { role: "form", "aria-label": "Reset password success" },
+            React.createElement(FormInputColumn, { childGap: "0.5rem" },
+                React.createElement(Box, { padding: "0" },
+                    React.createElement(Heading, { color: CHARADE_GREY, variant: "h5", weight: "600" }, "Password reset successful")),
+                React.createElement(Box, { padding: "0" },
+                    React.createElement(Paragraph, { variant: "p", color: CHARADE_GREY }, "You can now log in using your new password")),
+                React.createElement(Box, { padding: isMobile ? "0.5rem 0 0" : "1rem 0 0" },
+                    React.createElement(Cluster, { justify: "center", align: "center" },
+                        React.createElement(ButtonWithLink, { url: "/login", text: "Log in", variant: "primary", extraStyles: "width: 100%;", linkExtraStyles: "width: 100%;" })))))));
+};
+export default withWindowSize(ResetConfirmationForm);

package/dist/src/components/molecules/reset-password-success/ResetPasswordSuccess.stories.d.ts

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

package/dist/src/components/molecules/reset-password-success/ResetPasswordSuccess.stories.js

@@ -0,0 +1,9 @@
+import React from "react";
+import ResetPasswordSuccess from "./ResetPasswordSuccess";
+import page from "../../../../.storybook/page";
+var story = page({
+    title: "Components|Molecules/ResetPasswordSuccess",
+    Component: ResetPasswordSuccess
+});
+export default story;
+export var resetPasswordSuccess = function () { return React.createElement(ResetPasswordSuccess, null); };

package/dist/src/components/molecules/reset-password-success/index.d.ts

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

package/dist/src/components/molecules/reset-password-success/index.js

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

package/dist/src/components/molecules/tab-sidebar/TabSidebar.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/tab-sidebar/TabSidebar.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Box, Switcher, Cluster } from "../../atoms/layouts";
+import { BRIGHT_GREY, GHOST_GREY, TRANSPARENT, COOL_GREY_05 } from "../../../constants/colors";
+import Text from "../../atoms/text";
+import { InternalLink } from "../../atoms/link";
+import { FONT_WEIGHT_BOLD, FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./TabSidebar.theme";
+var TabSidebar = function (_a) {
+    var links = _a.links, isMobile = _a.isMobile, themeValues = _a.themeValues;
+    return (React.createElement(Box, { padding: "0", background: COOL_GREY_05, minHeight: "100%", role: "region", "aria-label": "Profile tabs", boxShadow: isMobile && "inset 0px -1px 0px 0px rgb(202, 206, 216)" },
+        React.createElement(Switcher, { breakpoint: "20rem", childGap: "0.1px", padding: "0", extraStyles: !isMobile && "overflow: visible;" }, links.map(function (_a, index) {
+            var route = _a.route, text = _a.text, active = _a.active, icon = _a.icon;
+            return (React.createElement(InternalLink, { to: route, key: "".concat(route, "-").concat(index), extraStyles: "&:hover {\n            text-decoration: none; \n            ".concat(active
+                    ? "> * {\n                background-color: ".concat(themeValues.activeTabHover, ";\n              }")
+                    : "> * { \n                background-color: rgba(8, 27, 43, 0.05);\n              }", "}") },
+                React.createElement(Box, { padding: isMobile ? "6px 4px" : "18px 16px", background: active ? themeValues.activeTabBackground : "transparent", borderSize: active ? "3px" : "1px", borderColor: active ? themeValues.activeTabAccent : TRANSPARENT, borderWidthOverride: "0 0 3px 0", boxShadow: active
+                        ? "0px 2px 4px 0px ".concat(GHOST_GREY, ", 0px 2px 9px 1px ").concat(GHOST_GREY)
+                        : "0px 2px 4px 0px ".concat(TRANSPARENT, ", 0px 2px 9px 1px ").concat(TRANSPARENT), minWidth: "100%", borderRadius: "4px 4px 0 0" },
+                    React.createElement(Box, { padding: "0", minWidth: "100%", extraStyles: isMobile ? "text-align: center;" : "text-align: left;" },
+                        React.createElement(Cluster, { justify: isMobile ? "center" : "flex-start", align: "center" },
+                            icon,
+                            React.createElement(Text, { variant: isMobile ? "pXXS" : "pS", weight: active ? FONT_WEIGHT_BOLD : FONT_WEIGHT_REGULAR, color: active ? themeValues.activeTabAccent : BRIGHT_GREY, extraStyles: "text-transform: uppercase; ".concat(isMobile
+                                    ? "width: 100%; padding-top: 4px;"
+                                    : "padding-left: 8px;") }, text))))));
+        }))));
+};
+export default themeComponent(TabSidebar, "ProfileTab", fallbackValues);

package/dist/src/components/molecules/tab-sidebar/TabSidebar.stories.d.ts

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

package/dist/src/components/molecules/tab-sidebar/TabSidebar.stories.js

@@ -0,0 +1,52 @@
+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, { Fragment } from "react";
+import { boolean, object } from "@storybook/addon-knobs";
+import TabSidebar from "./TabSidebar";
+import page from "../../../../.storybook/page";
+import * as Icons from "../../atoms/icons";
+var groupId = "props";
+var defaultLinks = [
+    {
+        route: "/profile/accounts",
+        text: "Accounts",
+        active: true,
+        icon: "AccountsIconSmall"
+    },
+    {
+        route: "/profile/settings",
+        text: "Settings",
+        active: false,
+        icon: "SettingsIconSmall"
+    },
+    {
+        route: "/profile/properties",
+        text: "Properties",
+        active: false,
+        icon: "PropertiesIconSmall"
+    }
+];
+var isRouteActive = function (route) { return location.pathname.includes(route); };
+// should TabSidebar be updated to just take the name of an icon per tab? instead of a full component
+var getIcon = function (link) {
+    var Icon = Icons[link.icon];
+    return Icon ? (React.createElement(Icon, { variant: isRouteActive(link) ? "primary" : "secondary" })) : (React.createElement(Fragment, null));
+};
+export var tabSidebar = function () {
+    var links = object("links", defaultLinks, groupId);
+    return (React.createElement(TabSidebar, { links: links.map(function (link) { return (__assign(__assign({}, link), { icon: getIcon(link) })); }), isMobile: boolean("isMobile", false, groupId) }));
+};
+var story = page({
+    title: "Components|Molecules/TabSidebar",
+    Component: TabSidebar
+});
+export default story;

package/dist/src/components/molecules/tab-sidebar/TabSidebar.theme.d.ts

@@ -0,0 +1,9 @@
+export namespace fallbackValues {
+    export { activeTabBackground };
+    export { activeTabAccent };
+    export { activeTabHover };
+}
+declare const activeTabBackground: "#FFFFFF";
+declare const activeTabAccent: "#15749D";
+declare const activeTabHover: "#B8D5E1";
+export {};

package/dist/src/components/molecules/tab-sidebar/TabSidebar.theme.js

@@ -0,0 +1,8 @@
+var activeTabBackground = "#FFFFFF";
+var activeTabAccent = "#15749D";
+var activeTabHover = "#B8D5E1";
+export var fallbackValues = {
+    activeTabBackground: activeTabBackground,
+    activeTabAccent: activeTabAccent,
+    activeTabHover: activeTabHover
+};

package/dist/src/components/molecules/tab-sidebar/index.d.ts

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

package/dist/src/components/molecules/tab-sidebar/index.js

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

package/dist/src/components/molecules/tabs/Tabs.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/tabs/Tabs.js

@@ -0,0 +1,33 @@
+import React, { useState, Fragment } from "react";
+import { Stack, Box, Cluster } from "../../atoms/layouts";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./Tabs.theme";
+import Tab from "../../atoms/tab";
+var HORIZONTAL = "horizontal";
+var Tabs = function (_a) {
+    var tabsConfig = _a.tabsConfig, tabsDisplayMode = _a.tabsDisplayMode // can be either HORIZONTAL or VERTICAL
+    ;
+    var _b = useState(tabsConfig.tabs[0].label), activeTab = _b[0], toggleActiveTab = _b[1];
+    var createTabs = function (tabConfig, activeTab) {
+        return tabConfig.tabs.map(function (tab) {
+            return (React.createElement(Tab, { activeTab: activeTab, key: tab.label, label: tab.label, setActiveTab: function () { return toggleActiveTab(tab.label); } }));
+        });
+    };
+    var showHorozontal = function (tabsConfig, activeTab) {
+        return (React.createElement(Cluster, { justify: "space-around" }, createTabs(tabsConfig, activeTab)));
+    };
+    var showVertical = function (tabsConfig, activeTab) {
+        return React.createElement(Stack, null, createTabs(tabsConfig, activeTab));
+    };
+    return (React.createElement(Box, { className: "tabs" },
+        React.createElement(Box, { className: "tab-list" }, tabsDisplayMode == HORIZONTAL
+            ? showHorozontal(tabsConfig, activeTab)
+            : showVertical(tabsConfig, activeTab)),
+        React.createElement(Box, { className: "tab-content" },
+            React.createElement(Box, null, tabsConfig.tabs.map(function (tab, idx) {
+                if (tab.label !== activeTab)
+                    return undefined;
+                return React.createElement(Fragment, { key: idx }, tab.content);
+            })))));
+};
+export default themeComponent(Tabs, "NavigationTab", fallbackValues);

package/dist/src/components/molecules/tabs/Tabs.stories.d.ts

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

package/dist/src/components/molecules/tabs/Tabs.stories.js

@@ -0,0 +1,186 @@
+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 from "react";
+import { createStore } from "redux";
+import Tabs from "./Tabs";
+import page from "../../../../.storybook/page";
+import Text from "../../atoms/text";
+import { createFormState, onlyIntegers, required } from "redux-freeform";
+import DisplayBox from "../../atoms/display-box";
+import { Box } from "../../atoms/layouts";
+// Including commented out configs as a preliminary work for
+// https://citybase.atlassian.net/browse/KCORE-2973
+// https://citybase.atlassian.net/browse/KCORE-2974
+// https://citybase.atlassian.net/browse/KCORE-2975
+var ButtonTest = function () { return (React.createElement(DisplayBox, null,
+    React.createElement(Text, null, "Test Button Clicks"),
+    React.createElement(Box, null,
+        React.createElement("button", { onClick: function () { return console.log("BUTTON TEST;"); } }, "Click me")))); };
+//const creditCardFormConfig = {
+//  amount: {
+//    defaultValue: "100.00",
+//    validators: [required()]
+//  }
+//};
+var checkFormConfig = {
+    amount: {
+        defaultValue: "100.00",
+        validators: [required()]
+    },
+    name: {
+        validators: [required()]
+    },
+    accountNumber: {
+        validators: [onlyIntegers()]
+    },
+    routingNumber: {
+        validators: [onlyIntegers()]
+    },
+    checkType: {
+        defaultValue: "Personal"
+    }
+};
+//const cashFormConfig = {
+//  amount: {
+//    defaultValue: "100.00",
+//    validators: [required()]
+//  }
+//};
+//
+//const MyCreditCardForm = ({ actions, fields }) => {
+//  return (
+//    <div>
+//      {fields.amount.hasErrors && fields.amount.errors.includes(required.error)
+//        ? "Amount"
+//        : "Amount"}
+//      <input
+//        value={fields.amount.rawValue}
+//        onChange={evt => actions.fields.amount.set(evt.target.value)}
+//        type="text"
+//      />
+//    </div>
+//  );
+//};
+var MyCheckForm = function (_a) {
+    var actions = _a.actions, fields = _a.fields;
+    return (React.createElement("div", null,
+        fields.amount.hasErrors && fields.amount.errors.includes(required.error)
+            ? "AmountError"
+            : "Amount",
+        React.createElement("input", { value: fields.amount.rawValue, onChange: function (evt) { return actions.fields.amount.set(evt.target.value); }, type: "text" }),
+        fields.name.hasErrors && fields.name.errors.includes(required.error)
+            ? "Name Error"
+            : "Name",
+        React.createElement("input", { value: fields.name.rawValue, onChange: function (evt) { return actions.fields.name.set(evt.target.value); }, type: "text" }),
+        fields.accountNumber.hasErrors &&
+            fields.accountNumber.errors.includes(required.error)
+            ? "Account Number Error"
+            : "Account Number",
+        React.createElement("input", { value: fields.accountNumber.rawValue, onChange: function (evt) { return actions.fields.accountNumber.set(evt.target.value); }, type: "text" }),
+        fields.routingNumber.hasErrors &&
+            fields.routingNumber.errors.includes(required.error)
+            ? "Routing Number Error"
+            : "Routing Number",
+        React.createElement("input", { value: fields.routingNumber.rawValue, onChange: function (evt) { return actions.fields.routingNumber.set(evt.target.value); }, type: "text" }),
+        fields.checkType.hasErrors &&
+            fields.checkType.errors.includes(required.error)
+            ? "Check Type Error"
+            : "Check Type",
+        React.createElement("input", { value: fields.checkType.rawValue, onChange: function (evt) { return actions.fields.checkType.set(evt.target.value); }, type: "text" })));
+};
+//const MyCashForm = ({ actions, fields }) => (
+//  <div>
+//    {fields.amount.hasErrors && fields.amount.errors.includes(required.error)
+//      ? "Amount Error"
+//      : "Amount"}
+//    <input
+//      value={fields.amount.rawValue}
+//      onChange={evt => actions.fields.amount.set(evt.target.value)}
+//      type="text"
+//    />
+//  </div>
+//);
+//const {
+//  reducer: cardReducer,
+//  mapStateToProps: cardMapStateToProps,
+//  mapDispatchToProps: cardMapDispatchToProps
+//} = createFormState(creditCardFormConfig);
+var _a = createFormState(checkFormConfig), checkReducer = _a.reducer, checkMapStateToProps = _a.mapStateToProps, checkMapDispatchToProps = _a.mapDispatchToProps;
+//const {
+//  reducer: cashReducer,
+//  mapStateToProps: cashMapStateToProps,
+//  mapDispatchToProps: cashMapDispatchToProps
+//} = createFormState(cashFormConfig);
+//const cardStore = createStore(
+//  cardReducer,
+//  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+//);
+var checkStore = createStore(checkReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
+//const cashStore = createStore(
+//  cashReducer,
+//  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+//);
+//const tabsConfig = {
+//  tabs: [
+//    {
+//      label: 'Credit Card',
+//      active: true,
+//      content: MyCreditCardForm(
+//        {...cardMapStateToProps(cardStore.getState())},
+//        {...cardMapDispatchToProps(cardStore.dispatch)}
+//      )
+//    },
+//    {
+//      label: 'Check',
+//      active: true,
+//      content: MyCheckForm(
+//        {...checkMapStateToProps(checkStore.getState())},
+//        {...checkMapDispatchToProps(checkStore.dispatch)}
+//      )
+//    },
+//    {
+//      true: 'Cash',
+//      active: true,
+//      content: MyCashForm(
+//        {...cashMapStateToProps(cashStore.getState())},
+//        {...cashMapDispatchToProps(cashStore.dispatch)}
+//      )
+//    }
+//  ]
+//};
+var LOREM = "\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris\n  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia\n  deserunt mollit anim id est laborum.\n";
+var tabsConfig = {
+    tabs: [
+        {
+            label: "Credit Card",
+            active: true,
+            content: React.createElement(Text, null, LOREM)
+        },
+        {
+            label: "Check",
+            active: true,
+            content: MyCheckForm(__assign({}, checkMapStateToProps(checkStore.getState())), __assign({}, checkMapDispatchToProps(checkStore.dispatch)))
+        },
+        {
+            label: "Cash",
+            active: true,
+            content: React.createElement(ButtonTest, null)
+        }
+    ]
+};
+var HORIZONTAL = "horizontal";
+export var tabs = function () { return (React.createElement(Tabs, { tabsConfig: tabsConfig, tabsDisplayMode: HORIZONTAL })); };
+var story = page({
+    title: "Components|Molecules/Tabs",
+    Component: Tabs
+});
+export default story;

package/dist/src/components/molecules/tabs/Tabs.theme.d.ts

@@ -0,0 +1,9 @@
+export namespace fallbackValues {
+    export { activeTabBackground };
+    export { activeTabAccent };
+    export { activeTabHover };
+}
+declare const activeTabBackground: "#FFFFFF";
+declare const activeTabAccent: "#15749D";
+declare const activeTabHover: "#B8D5E1";
+export {};

package/dist/src/components/molecules/tabs/Tabs.theme.js

@@ -0,0 +1,8 @@
+var activeTabBackground = "#FFFFFF";
+var activeTabAccent = "#15749D";
+var activeTabHover = "#B8D5E1";
+export var fallbackValues = {
+    activeTabBackground: activeTabBackground,
+    activeTabAccent: activeTabAccent,
+    activeTabHover: activeTabHover
+};

package/dist/src/components/molecules/tabs/index.d.ts

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

package/dist/src/components/molecules/tabs/index.js

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

package/dist/src/components/molecules/terms-and-conditions/TermsAndConditions.d.ts

@@ -0,0 +1,8 @@
+export default TermsAndConditions;
+declare function TermsAndConditions({ onCheck, isChecked, html, terms, error }: {
+    onCheck: any;
+    isChecked: any;
+    html: any;
+    terms: any;
+    error?: boolean | undefined;
+}): JSX.Element;