@thecb/components 7.5.1 → 7.5.2

package/dist/src/components/atoms/form-layouts/FormLayouts.stories.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { select, text } from "@storybook/addon-knobs";
+import FormContainer from "./FormContainer";
+import FormInput from "./FormInput";
+import FormInputColumn from "./FormInputColumn";
+import FormInputRow from "./FormInputRow";
+import page from "../../../../.storybook/page";
+var variantsLabel = "variant";
+var variants = {
+    default: "default",
+    disabled: "disabled",
+    checkout: "checkout",
+    collapsible: "collapsible"
+};
+var defaultValue = "primary";
+var groupId = "props";
+var data = {
+    test: {
+        rawValue: "Form Layouts"
+    }
+};
+export var formLayouts = function () {
+    return (React.createElement(FormContainer, { variant: select(variantsLabel, variants, defaultValue, groupId), role: "form", "aria-label": "Storybook Form" },
+        React.createElement(FormInputRow, { childGap: text("rowChildGap", "1rem", "props") },
+            React.createElement(FormInput, { labelTextWhenNoError: "Form Layouts 1", errorMessages: "Error", field: data.test })),
+        React.createElement(FormInputRow, { childGap: text("rowChildGap", "1rem", "props") },
+            React.createElement(FormInputColumn, { childGap: text("columnChildGap", "0.5rem", "props") },
+                React.createElement(FormInput, { labelTextWhenNoError: "Form Layouts 2", errorMessages: "Error", field: data.test }),
+                React.createElement(FormInput, { labelTextWhenNoError: "Form Layouts 3", errorMessages: "Error", field: data.test })),
+            React.createElement(FormInputColumn, { childGap: text("columnChildGap", "0.5rem", "props") },
+                React.createElement(FormInput, { labelTextWhenNoError: "Form Layouts 4", errorMessages: "Error", field: data.test }),
+                React.createElement(FormInput, { labelTextWhenNoError: "Form Layouts 5", errorMessages: "Error", field: data.test })))));
+};
+var story = page({
+    title: "Components|Atoms/FormContainer",
+    Component: FormContainer
+});
+export default story;

package/dist/src/components/atoms/form-layouts/FormLayouts.theme.d.ts

@@ -0,0 +1,86 @@
+export namespace fallbackValues {
+    export { linkColor };
+    export { formBackgroundColor };
+    export { inputBackgroundColor };
+    export { color };
+    export { labelColor };
+    export { borderColor };
+    export { lineHeight };
+    export { fontSize };
+    export { errorFontSize };
+    export { fontWeight };
+    export { hoverFocusStyles };
+    export { formFooterPanel };
+}
+declare namespace linkColor {
+    const _default: string;
+    export { _default as default };
+    export const disabled: string;
+}
+declare namespace formBackgroundColor {
+    const _default_1: string;
+    export { _default_1 as default };
+    const disabled_1: string;
+    export { disabled_1 as disabled };
+    export const checkout: string;
+    export const collapsible: string;
+}
+declare namespace inputBackgroundColor {
+    const _default_2: string;
+    export { _default_2 as default };
+    const disabled_2: string;
+    export { disabled_2 as disabled };
+}
+declare namespace color {
+    const _default_3: string;
+    export { _default_3 as default };
+    const disabled_3: string;
+    export { disabled_3 as disabled };
+}
+declare namespace labelColor {
+    const _default_4: string;
+    export { _default_4 as default };
+    const disabled_4: string;
+    export { disabled_4 as disabled };
+}
+declare namespace borderColor {
+    const _default_5: string;
+    export { _default_5 as default };
+    const disabled_5: string;
+    export { disabled_5 as disabled };
+}
+declare namespace lineHeight {
+    const _default_6: string;
+    export { _default_6 as default };
+    const disabled_6: string;
+    export { disabled_6 as disabled };
+}
+declare namespace fontSize {
+    const _default_7: string;
+    export { _default_7 as default };
+    const disabled_7: string;
+    export { disabled_7 as disabled };
+}
+declare namespace errorFontSize {
+    const _default_8: string;
+    export { _default_8 as default };
+    const disabled_8: string;
+    export { disabled_8 as disabled };
+}
+declare namespace fontWeight {
+    const _default_9: string;
+    export { _default_9 as default };
+    const disabled_9: string;
+    export { disabled_9 as disabled };
+}
+declare namespace hoverFocusStyles {
+    const _default_10: string;
+    export { _default_10 as default };
+    const disabled_10: string;
+    export { disabled_10 as disabled };
+}
+declare namespace formFooterPanel {
+    const _default_11: string;
+    export { _default_11 as default };
+}
+export {};

package/dist/src/components/atoms/form-layouts/FormLayouts.theme.js

@@ -0,0 +1,44 @@
+import { CHARADE_GREY, MATISSE_BLUE, WHITE, SEASHELL_WHITE, MINESHAFT_GREY, DUSTY_GREY, ATHENS_GREY, INFO_BLUE, STORM_GREY } from "../../../constants/colors";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+var linkColor = { default: "".concat(MATISSE_BLUE), disabled: "".concat(MATISSE_BLUE) };
+var formBackgroundColor = {
+    default: "".concat(WHITE),
+    disabled: "".concat(WHITE),
+    checkout: "".concat(ATHENS_GREY),
+    collapsible: "".concat(ATHENS_GREY)
+};
+var inputBackgroundColor = {
+    default: "".concat(WHITE),
+    disabled: "".concat(SEASHELL_WHITE)
+};
+var color = { default: "".concat(MINESHAFT_GREY), disabled: "".concat(DUSTY_GREY) };
+var labelColor = { default: "".concat(CHARADE_GREY), disabled: "".concat(CHARADE_GREY) };
+var borderColor = { default: "".concat(STORM_GREY), disabled: "".concat(STORM_GREY) };
+var lineHeight = { default: "1rem", disabled: "1rem" };
+var fontSize = { default: "0.875rem", disabled: "0.875rem" };
+var errorFontSize = { default: "0.75rem", disabled: "0.75rem" };
+var fontWeight = {
+    default: "".concat(FONT_WEIGHT_REGULAR),
+    disabled: "".concat(FONT_WEIGHT_REGULAR)
+};
+var hoverFocusStyles = {
+    default: "color: #0E506D; outline: none; text-decoration: underline;  ",
+    disabled: "color: #6D717E;"
+};
+var formFooterPanel = {
+    default: "".concat(INFO_BLUE)
+};
+export var fallbackValues = {
+    linkColor: linkColor,
+    formBackgroundColor: formBackgroundColor,
+    inputBackgroundColor: inputBackgroundColor,
+    color: color,
+    labelColor: labelColor,
+    borderColor: borderColor,
+    lineHeight: lineHeight,
+    fontSize: fontSize,
+    errorFontSize: errorFontSize,
+    fontWeight: fontWeight,
+    hoverFocusStyles: hoverFocusStyles,
+    formFooterPanel: formFooterPanel
+};

package/dist/src/components/atoms/form-layouts/index.d.ts

@@ -0,0 +1,6 @@
+import FormInput from "./FormInput";
+import FormInputRow from "./FormInputRow";
+import FormInputColumn from "./FormInputColumn";
+import FormContainer from "./FormContainer";
+import FormFooterPanel from "./FormFooterPanel";
+export { FormInput, FormInputRow, FormInputColumn, FormContainer, FormFooterPanel };

package/dist/src/components/atoms/form-layouts/index.js

@@ -0,0 +1,6 @@
+import FormInput from "./FormInput";
+import FormInputRow from "./FormInputRow";
+import FormInputColumn from "./FormInputColumn";
+import FormContainer from "./FormContainer";
+import FormFooterPanel from "./FormFooterPanel";
+export { FormInput, FormInputRow, FormInputColumn, FormContainer, FormFooterPanel };

package/dist/src/components/atoms/form-select/FormSelect.d.ts

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

package/dist/src/components/atoms/form-select/FormSelect.js

@@ -0,0 +1,36 @@
+import React, { useState, useRef, useEffect } from "react";
+import Dropdown from "../dropdown";
+import Text from "../text";
+import { ERROR_COLOR } from "../../../constants/colors";
+import { SelectContainer } from "./FormSelect.styled";
+import { fallbackValues } from "./FormSelect.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box, Cluster, Stack } from "../layouts";
+import { createIdFromString } from "../../../util/general";
+var FormSelect = function (_a) {
+    var fieldActions = _a.fieldActions, labelTextWhenNoError = _a.labelTextWhenNoError, errorMessages = _a.errorMessages, options = _a.options, field = _a.field, showErrors = _a.showErrors, onChange = _a.onChange, dropdownMaxHeight = _a.dropdownMaxHeight, disabledValues = _a.disabledValues, disabled = _a.disabled, themeValues = _a.themeValues, _b = _a.hasTitles, hasTitles = _b === void 0 ? false : _b, autocompleteValue = _a.autocompleteValue, // browser autofill value, like country-name or address-level1 for state
+    _c = _a.smoothScroll // whether the browser should animate scroll to selected item on first open
+    , // browser autofill value, like country-name or address-level1 for state
+    smoothScroll = _c === void 0 ? true : _c // whether the browser should animate scroll to selected item on first open
+    ;
+    var _d = useState(false), open = _d[0], setOpen = _d[1];
+    var dropdownRef = useRef(null);
+    var handleClickAway = function (event) {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            setOpen(false);
+        }
+    };
+    useEffect(function () {
+        document.addEventListener("mousedown", handleClickAway);
+        return function () {
+            document.removeEventListener("mousedown", handleClickAway);
+        };
+    });
+    return (React.createElement(SelectContainer, { ref: dropdownRef, disabled: disabled },
+        React.createElement(Box, { padding: "0", minWidth: "100%" },
+            React.createElement(Cluster, { justify: "space-between", align: "center" },
+                React.createElement(Text, { as: "label", variant: "pS", color: themeValues.labelColor, weight: themeValues.fontWeight, extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }", id: createIdFromString(labelTextWhenNoError) }, labelTextWhenNoError))),
+        React.createElement(Dropdown, { ariaLabelledby: createIdFromString(labelTextWhenNoError), ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"), maxHeight: dropdownMaxHeight, hasTitles: hasTitles, placeholder: options[0] ? options[0].text : "", options: options, value: field.rawValue, disabledValues: disabledValues, isOpen: open, isError: (field.hasErrors && field.dirty) || (field.hasErrors && showErrors), onSelect: onChange ? function (value) { return onChange(value); } : function (value) { return fieldActions.set(value); }, onClick: function () { return setOpen(!open); }, disabled: disabled, autocompleteValue: autocompleteValue, smoothScroll: smoothScroll }),
+        React.createElement(Stack, { direction: "row", justify: "space-between" }, (field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (React.createElement(Text, { color: ERROR_COLOR, variant: "pXS", weight: themeValues.fontWeight, extraStyles: "word-break: break-word;\n                font-family: Public Sans;\n                &::first-letter {\n                  text-transform: uppercase;\n                }", id: createIdFromString(labelTextWhenNoError, "error message") }, errorMessages[field.errors[0]])) : (React.createElement(Text, { extraStyles: "height: ".concat(themeValues.lineHeight, ";") })))));
+};
+export default themeComponent(FormSelect, "FormSelect", fallbackValues, "default");

package/dist/src/components/atoms/form-select/FormSelect.stories.d.ts

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

package/dist/src/components/atoms/form-select/FormSelect.stories.js

@@ -0,0 +1,36 @@
+var _a;
+import React from "react";
+import { connect } from "react-redux";
+import { createFormState, required } from "redux-freeform";
+import FormSelect from "./FormSelect";
+import page from "../../../../.storybook/page";
+var _b = createFormState({
+    thing: {
+        validators: [required()]
+    }
+}), mapStateToProps = _b.mapStateToProps, mapDispatchToProps = _b.mapDispatchToProps, reducer = _b.reducer;
+var errorMessages = (_a = {},
+    _a[required.error] = "thing is required",
+    _a);
+var options = [
+    { value: "", text: "choose name" },
+    { value: "foo", text: "foo" },
+    { value: "bar", text: "bar" },
+    { value: "baz", text: "baz" },
+    { value: "disabled", text: "disabled" }
+];
+var story = page({
+    title: "Components|Atoms/FormSelect",
+    Component: FormSelect,
+    reducer: reducer,
+    mapStateToProps: mapStateToProps,
+    mapDispatchToProps: mapDispatchToProps,
+    height: "500px"
+});
+var FormWrapper = function (_a) {
+    var fields = _a.fields, actions = _a.actions;
+    return (React.createElement(FormSelect, { labelTextWhenNoError: "Form Select", errorMessages: errorMessages, options: options, field: fields.thing, fieldActions: actions.fields.thing, disabledValues: ["disabled"] }));
+};
+export default story;
+var ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
+export var formSelect = function () { return React.createElement(ConnectedForm, null); };

package/dist/src/components/atoms/form-select/FormSelect.styled.d.ts

@@ -0,0 +1,3 @@
+export const SelectContainer: any;
+export const SelectField: any;
+export const SelectOption: any;

package/dist/src/components/atoms/form-select/FormSelect.styled.js

@@ -0,0 +1,22 @@
+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 { GHOST_GREY, ERROR_COLOR, MATISSE_BLUE } from "../../../constants/colors";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+export var SelectContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n  > * + * {\n    margin-top: 0.25rem;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n  > * + * {\n    margin-top: 0.25rem;\n  }\n"])));
+export var SelectField = styled.select(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"], ["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"])), function (_a) {
+    var field = _a.field, showErrors = _a.showErrors;
+    return (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
+        ? ERROR_COLOR
+        : GHOST_GREY;
+}, FONT_WEIGHT_REGULAR, function (_a) {
+    var themeValues = _a.themeValues;
+    return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
+}, function (_a) {
+    var themeValues = _a.themeValues;
+    return themeValues.color && themeValues.color;
+}, MATISSE_BLUE);
+export var SelectOption = styled.option(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/components/atoms/form-select/FormSelect.theme.d.ts

@@ -0,0 +1,81 @@
+export namespace fallbackValues {
+    export { linkColor };
+    export { formBackgroundColor };
+    export { inputBackgroundColor };
+    export { color };
+    export { labelColor };
+    export { borderColor };
+    export { lineHeight };
+    export { fontSize };
+    export { errorFontSize };
+    export { fontWeight };
+    export { hoverFocusStyles };
+}
+declare namespace linkColor {
+    const _default: string;
+    export { _default as default };
+    export const disabled: string;
+}
+declare namespace formBackgroundColor {
+    const _default_1: string;
+    export { _default_1 as default };
+    const disabled_1: string;
+    export { disabled_1 as disabled };
+    export const checkout: string;
+    export const collapsible: string;
+}
+declare namespace inputBackgroundColor {
+    const _default_2: string;
+    export { _default_2 as default };
+    const disabled_2: string;
+    export { disabled_2 as disabled };
+}
+declare namespace color {
+    const _default_3: string;
+    export { _default_3 as default };
+    const disabled_3: string;
+    export { disabled_3 as disabled };
+}
+declare namespace labelColor {
+    const _default_4: string;
+    export { _default_4 as default };
+    const disabled_4: string;
+    export { disabled_4 as disabled };
+}
+declare namespace borderColor {
+    const _default_5: string;
+    export { _default_5 as default };
+    const disabled_5: string;
+    export { disabled_5 as disabled };
+}
+declare namespace lineHeight {
+    const _default_6: string;
+    export { _default_6 as default };
+    const disabled_6: string;
+    export { disabled_6 as disabled };
+}
+declare namespace fontSize {
+    const _default_7: string;
+    export { _default_7 as default };
+    const disabled_7: string;
+    export { disabled_7 as disabled };
+}
+declare namespace errorFontSize {
+    const _default_8: string;
+    export { _default_8 as default };
+    const disabled_8: string;
+    export { disabled_8 as disabled };
+}
+declare namespace fontWeight {
+    const _default_9: string;
+    export { _default_9 as default };
+    const disabled_9: string;
+    export { disabled_9 as disabled };
+}
+declare namespace hoverFocusStyles {
+    const _default_10: string;
+    export { _default_10 as default };
+    const disabled_10: string;
+    export { disabled_10 as disabled };
+}
+export {};

package/dist/src/components/atoms/form-select/FormSelect.theme.js

@@ -0,0 +1,40 @@
+import { CHARADE_GREY, MATISSE_BLUE, WHITE, SEASHELL_WHITE, MINESHAFT_GREY, DUSTY_GREY, GREY_CHATEAU, ATHENS_GREY } from "../../../constants/colors";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+var linkColor = { default: "".concat(MATISSE_BLUE), disabled: "".concat(MATISSE_BLUE) };
+var formBackgroundColor = {
+    default: "".concat(WHITE),
+    disabled: "".concat(WHITE),
+    checkout: "".concat(ATHENS_GREY),
+    collapsible: "".concat(ATHENS_GREY)
+};
+var inputBackgroundColor = {
+    default: "".concat(WHITE),
+    disabled: "".concat(SEASHELL_WHITE)
+};
+var color = { default: "".concat(MINESHAFT_GREY), disabled: "".concat(DUSTY_GREY) };
+var labelColor = { default: "".concat(CHARADE_GREY), disabled: "".concat(CHARADE_GREY) };
+var borderColor = { default: "".concat(GREY_CHATEAU), disabled: "".concat(GREY_CHATEAU) };
+var lineHeight = { default: "1rem", disabled: "1rem" };
+var fontSize = { default: "0.875rem", disabled: "0.875rem" };
+var errorFontSize = { default: "0.75rem", disabled: "0.75rem" };
+var fontWeight = {
+    default: "".concat(FONT_WEIGHT_REGULAR),
+    disabled: "".concat(FONT_WEIGHT_REGULAR)
+};
+var hoverFocusStyles = {
+    default: "color: #0E506D; outline: none; text-decoration: underline;  ",
+    disabled: "color: #6D717E;"
+};
+export var fallbackValues = {
+    linkColor: linkColor,
+    formBackgroundColor: formBackgroundColor,
+    inputBackgroundColor: inputBackgroundColor,
+    color: color,
+    labelColor: labelColor,
+    borderColor: borderColor,
+    lineHeight: lineHeight,
+    fontSize: fontSize,
+    errorFontSize: errorFontSize,
+    fontWeight: fontWeight,
+    hoverFocusStyles: hoverFocusStyles
+};

package/dist/src/components/atoms/form-select/index.d.ts

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

package/dist/src/components/atoms/form-select/index.js

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

package/dist/src/components/atoms/formatted-address/FormattedAddress.d.ts

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

package/dist/src/components/atoms/formatted-address/FormattedAddress.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Text from "../text";
+import Box from "../layouts/Box";
+import { fallbackValues } from "./FormattedAddress.theme";
+import { themeComponent } from "../../../util/themeUtils";
+var FormattedAddress = function (_a) {
+    var street1 = _a.street1, city = _a.city, stateProvince = _a.stateProvince, country = _a.country, zip = _a.zip, _b = _a.street2, street2 = _b === void 0 ? null : _b, _c = _a.name, name = _c === void 0 ? null : _c, themeValues = _a.themeValues, _d = _a.qaPrefix, qaPrefix = _d === void 0 ? "address" : _d;
+    return (React.createElement(Box, { padding: themeValues.padding },
+        name && (React.createElement(Text, { variant: "p", color: themeValues.color, dataQa: "".concat(qaPrefix, "-name") }, name)),
+        React.createElement(Box, { padding: "0" },
+            React.createElement(Text, { variant: "p", color: themeValues.color, dataQa: "".concat(qaPrefix, "-1") }, street1),
+            street2 && (React.createElement(Text, { variant: "p", dataQa: "".concat(qaPrefix, "-2") },
+                ", ",
+                street2))),
+        React.createElement(Box, { padding: "0" },
+            React.createElement(Text, { variant: "p", color: themeValues.color, dataQa: "".concat(qaPrefix, "-3") },
+                city,
+                ", ",
+                stateProvince, " ".concat(zip),
+                country ? " ".concat(country) : ""))));
+};
+export default themeComponent(FormattedAddress, "FormattedAddress", fallbackValues, "default");

package/dist/src/components/atoms/formatted-address/FormattedAddress.stories.d.ts

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

package/dist/src/components/atoms/formatted-address/FormattedAddress.stories.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { select, text } from "@storybook/addon-knobs";
+import FormattedAddress from "./FormattedAddress";
+import page from "../../../../.storybook/page";
+var variantsLabel = "variant";
+var variants = {
+    default: "default",
+    radio: "radio",
+    None: undefined
+};
+var defaultValue = "default";
+var groupId = "props";
+export var formattedAddress = function () { return (React.createElement(FormattedAddress, { variant: select(variantsLabel, variants, defaultValue, groupId), street1: text("street1", "30 North Lasalle", groupId), city: text("city", "Chicago", groupId), stateProvince: text("stateProvince", "Illinois", groupId), country: text("country", "USA", groupId), zip: text("zip", "60606", groupId), street2: text("street2", "", groupId), name: text("name", "Citybase", groupId) })); };
+var story = page({
+    title: "Components|Atoms/FormattedAddress",
+    Component: FormattedAddress
+});
+export default story;

package/dist/src/components/atoms/formatted-address/FormattedAddress.theme.d.ts

@@ -0,0 +1,23 @@
+export namespace fallbackValues {
+    export { fontSize };
+    export { padding };
+    export { color };
+}
+declare namespace fontSize {
+    const _default: string;
+    export { _default as default };
+    export const radio: string;
+}
+declare namespace padding {
+    const _default_1: string;
+    export { _default_1 as default };
+    const radio_1: string;
+    export { radio_1 as radio };
+}
+declare namespace color {
+    const _default_2: string;
+    export { _default_2 as default };
+    const radio_2: string;
+    export { radio_2 as radio };
+}
+export {};

package/dist/src/components/atoms/formatted-address/FormattedAddress.theme.js

@@ -0,0 +1,9 @@
+import { CHARADE_GREY, MINESHAFT_GREY } from "../../../constants/colors";
+var fontSize = { default: "1rem", radio: "1.0625rem" };
+var padding = { default: "0", radio: "0.625rem 0" };
+var color = { default: "".concat(CHARADE_GREY), radio: "".concat(MINESHAFT_GREY) };
+export var fallbackValues = {
+    fontSize: fontSize,
+    padding: padding,
+    color: color
+};

package/dist/src/components/atoms/formatted-address/index.d.ts

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

package/dist/src/components/atoms/formatted-address/index.js

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

package/dist/src/components/atoms/formatted-credit-card/FormattedCreditCard.d.ts

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

package/dist/src/components/atoms/formatted-credit-card/FormattedCreditCard.js

@@ -0,0 +1,47 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React, { Fragment } from "react";
+import styled from "styled-components";
+import GenericCard from "../icons/GenericCard";
+import Text from "../text";
+import Paragraph from "../paragraph";
+import { Box, Stack } from "../layouts";
+import { fallbackValues } from "./FormattedCreditCard.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
+var ACTIVE = "ACTIVE";
+var EXPIRING_SOON = "EXPIRING_SOON";
+var EXPIRED = "EXPIRED";
+export var CreditCardWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n"])));
+export var CCIconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 16px;\n  width: 30px;\n  height: auto;\n  display: flex;\n"], ["\n  margin-right: 16px;\n  width: 30px;\n  height: auto;\n  display: flex;\n"])));
+var FormattedCreditCard = function (_a) {
+    var lastFour = _a.lastFour, autoPay = _a.autoPay, expireDate = _a.expireDate, expirationStatus = _a.expirationStatus, themeValues = _a.themeValues;
+    var renderCardStatus = function () {
+        switch (expirationStatus) {
+            case ACTIVE:
+                return (React.createElement(Paragraph, { variant: "pXS", color: ASH_GREY, textAlign: "left" },
+                    "Exp Date ",
+                    expireDate));
+            case EXPIRING_SOON:
+                return (React.createElement(Paragraph, { variant: "pXS", color: FIRE_YELLOW, textAlign: "left" },
+                    "Expiring Soon ",
+                    expireDate));
+            case EXPIRED:
+                return (React.createElement(Paragraph, { variant: "pXS", color: ASH_GREY, textAlign: "left" }, "Expired"));
+            default:
+                null;
+        }
+    };
+    return (React.createElement(CreditCardWrapper, null,
+        React.createElement(CCIconWrapper, null,
+            React.createElement(GenericCard, null)),
+        React.createElement(Stack, { childGap: "0" },
+            React.createElement(Box, { padding: "0" },
+                React.createElement(Text, { variant: "p", padding: "0 0 0 8px", color: themeValues.textColor, textAlign: "left", extraStyles: "display: inline-block;" }, "Card ending in ".concat(lastFour)),
+                expireDate && React.createElement(Fragment, null, renderCardStatus())),
+            autoPay && (React.createElement(Text, { variant: "p", color: themeValues.autopayTextColor, extraStyles: "font-style: italic;" }, "Autopay Enabled")))));
+};
+export default themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues);
+var templateObject_1, templateObject_2;

package/dist/src/components/atoms/formatted-credit-card/FormattedCreditCard.theme.d.ts

@@ -0,0 +1,7 @@
+export namespace fallbackValues {
+    export { textColor };
+    export { autopayTextColor };
+}
+declare const textColor: string;
+declare const autopayTextColor: string;
+export {};

package/dist/src/components/atoms/formatted-credit-card/FormattedCreditCard.theme.js

@@ -0,0 +1,7 @@
+import { CHARADE_GREY, REGENT_GREY } from "../../../constants/colors";
+var textColor = "".concat(CHARADE_GREY);
+var autopayTextColor = "".concat(REGENT_GREY);
+export var fallbackValues = {
+    textColor: textColor,
+    autopayTextColor: autopayTextColor
+};

package/dist/src/components/atoms/formatted-credit-card/index.d.ts

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

package/dist/src/components/atoms/formatted-credit-card/index.js

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

package/dist/src/components/atoms/hamburger-button/HamburgerButton.d.ts

@@ -0,0 +1,8 @@
+export default HamburgerButton;
+declare function HamburgerButton({ activeColor, inactiveColor, isActive, onClick, controls }: {
+    activeColor: any;
+    inactiveColor: any;
+    isActive: any;
+    onClick?: (() => void) | undefined;
+    controls: any;
+}): JSX.Element;