@thecb/components 7.3.1 → 7.3.2-beta.2

package/dist/src/components/atoms/password-requirements/PasswordRequirements.stories.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { boolean } from "@storybook/addon-knobs";
+import PasswordRequirements from "./PasswordRequirements";
+import { FormInput } from "../form-layouts";
+import { Box } from "../layouts";
+import page from "../../../../.storybook/page";
+import { connect } from "react-redux";
+import { createFormState, required, hasLength, hasNumber, hasLowercaseLetter, hasUppercaseLetter, hasSpecialCharacter } from "redux-freeform";
+var formConfig = {
+    password: {
+        validators: [
+            required(),
+            hasLength(8, 100),
+            hasNumber(),
+            hasLowercaseLetter(),
+            hasUppercaseLetter(),
+            hasSpecialCharacter()
+        ]
+    }
+};
+var passwordForm = createFormState(formConfig);
+var passwordRequirementsWrapper = function (_a) {
+    var _b;
+    var fields = _a.fields, actions = _a.actions, showErrors = _a.showErrors;
+    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);
+    return (React.createElement(Box, null,
+        React.createElement(FormInput, { labelTextWhenNoError: "Type in password", errorMessages: passwordErrorMessages, field: fields.password, fieldActions: actions.fields.password, showErrors: showErrors }),
+        React.createElement(PasswordRequirements, { password: fields.password })));
+};
+var story = page({
+    title: "Components|Atoms/PasswordRequirements",
+    Component: PasswordRequirements,
+    reducer: passwordForm.reducer,
+    mapStateToProps: passwordForm.mapStateToProps,
+    mapDispatchToProps: passwordForm.mapDispatchToProps
+});
+export default story;
+var ConnectedForm = connect(passwordForm.mapStateToProps, passwordForm.mapDispatchToProps)(passwordRequirementsWrapper);
+export var passwordRequirements = function () { return (React.createElement(ConnectedForm, { showErrors: boolean("showErrors", false, "props") })); };

package/dist/src/components/atoms/password-requirements/index.d.ts

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

package/dist/src/components/atoms/password-requirements/index.js

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

package/dist/src/components/atoms/placeholder/Placeholder.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/placeholder/Placeholder.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { tint } from "polished";
+import { Link } from "react-router-dom";
+import Text from "../text";
+import { Box, Switcher, Center, Cluster, Cover } from "../layouts";
+import { fallbackValues } from "./Placeholder.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { STORM_GREY, GRECIAN_GREY, CHARADE_GREY } from "../../../constants/colors";
+import { AccountsAddIcon, PropertiesAddIcon, IconAdd } from "../icons";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+var PlaceholderContentWrapper = function (_a) {
+    var isLink = _a.isLink, action = _a.action, destination = _a.destination, children = _a.children, dataQa = _a.dataQa;
+    return isLink ? (React.createElement(Link, { to: destination, "data-qa": dataQa },
+        React.createElement(Box, { padding: "0", minHeight: "100%", extraStyles: "cursor: pointer;" }, children))) : (React.createElement(Box, { onClick: action, padding: "0", minHeight: "100%", extraStyles: "cursor: pointer;", dataQa: dataQa }, children));
+};
+var Placeholder = function (_a) {
+    var text = _a.text, action = _a.action, _b = _a.visible, visible = _b === void 0 ? true : _b, _c = _a.isLink, isLink = _c === void 0 ? false : _c, destination = _a.destination, variant = _a.variant, largeIcon = _a.largeIcon, themeValues = _a.themeValues, dataQa = _a.dataQa;
+    return (React.createElement(PlaceholderContentWrapper, { isLink: isLink, action: action, destination: destination, dataQa: dataQa },
+        React.createElement(Box, { padding: "0", borderRadius: "4px", border: "none", minHeight: themeValues.height, hiddenStyles: !visible, extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"), hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : tint(0.9, themeValues.color), ";") },
+            React.createElement(Center, { maxWidth: "300px" },
+                React.createElement(Box, { padding: "0", tabIndex: "0", onKeyPress: function (e) { return e.key === "Enter" && action(); } },
+                    React.createElement(Cluster, { justify: "center", align: "center", minHeight: "100%" },
+                        React.createElement(Switcher, { maxChildren: 2, childGap: "0" },
+                            variant === "large" && React.createElement("div", null),
+                            React.createElement(Box, { padding: "0", extraStyles: ".fill { \n                    fill: ".concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  }") }, variant === "large" ? (React.createElement(Center, { intrinsic: true },
+                                largeIcon === "accounts" ? (React.createElement(AccountsAddIcon, null)) : (React.createElement(PropertiesAddIcon, null)),
+                                React.createElement(Text, { variant: "pS", color: themeValues.color, weight: FONT_WEIGHT_REGULAR, extraStyles: "text-align: center;" }, text))) : (React.createElement(Cover, { singleChild: true, minHeight: "100%" },
+                                React.createElement(Cluster, { justify: "center", align: "center" },
+                                    React.createElement(IconAdd, null),
+                                    React.createElement(Center, { intrinsic: true },
+                                        React.createElement(Text, { variant: "pS", color: themeValues.color, weight: FONT_WEIGHT_REGULAR, extraStyles: "padding: 0 0 0 8px; text-align: center;" }, text)))))))))))));
+};
+export default themeComponent(Placeholder, "Placeholder", fallbackValues, "default");

package/dist/src/components/atoms/placeholder/Placeholder.stories.d.ts

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

package/dist/src/components/atoms/placeholder/Placeholder.stories.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
+import Placeholder from "./Placeholder";
+import page from "../../../../.storybook/page";
+var variantsLabel = "variant";
+var variants = {
+    default: "default",
+    large: "large"
+};
+var defaultValue = "default";
+var groupId = "props";
+var icons = {
+    accounts: "accounts",
+    properties: "properties"
+};
+var iconLabel = "largeIcon";
+var defaultIcon = "accounts";
+export var placeholder = function () { return (React.createElement(Placeholder, { variant: select(variantsLabel, variants, defaultValue, groupId), isLink: true, destination: text("destination", "add-account", "props"), text: text("text", "Add an Account", "props"), largeIcon: select(iconLabel, icons, defaultIcon, groupId), key: "placeholder" })); };
+var story = page({
+    title: "Components|Atoms/Placeholder",
+    Component: Placeholder
+});
+export default story;

package/dist/src/components/atoms/placeholder/Placeholder.theme.d.ts

@@ -0,0 +1,16 @@
+export namespace fallbackValues {
+    export { color };
+    export { height };
+}
+declare namespace color {
+    const _default: string;
+    export { _default as default };
+    export const large: string;
+}
+declare namespace height {
+    const _default_1: string;
+    export { _default_1 as default };
+    const large_1: string;
+    export { large_1 as large };
+}
+export {};

package/dist/src/components/atoms/placeholder/Placeholder.theme.js

@@ -0,0 +1,7 @@
+import { BRIGHT_GREY, CHARADE_GREY } from "../../../constants/colors";
+var color = { default: "".concat(CHARADE_GREY), large: "".concat(BRIGHT_GREY) };
+var height = { default: "3rem", large: "192px" };
+export var fallbackValues = {
+    color: color,
+    height: height
+};

package/dist/src/components/atoms/placeholder/index.d.ts

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

package/dist/src/components/atoms/placeholder/index.js

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

package/dist/src/components/atoms/processing-fee/ProcessingFee.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/processing-fee/ProcessingFee.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { ifElse, isNil, always } from "ramda";
+import { fallbackValues } from "./ProcessingFee.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import Box from "../layouts/Box";
+import Alert from "../alert";
+import { displayCurrency, formatPercent } from "../../../util/general";
+var ProcessingFee = function (_a) {
+    var _b = _a.feeValue, feeValue = _b === void 0 ? 0 : _b, _c = _a.feeName, feeName = _c === void 0 ? "" : _c, feeType = _a.feeType, _d = _a.feeMinimum, feeMinimum = _d === void 0 ? 0 : _d, hide = _a.hide, themeValues = _a.themeValues;
+    return (React.createElement(Box, { padding: "0 1.5rem 1.5rem", background: themeValues.backgroundColor, hiddenStyles: hide },
+        React.createElement(Alert, { heading: "Processing Fee", text: "There is a processing fee of ".concat(feeType === "FLAT"
+                ? "".concat(displayCurrency(feeValue))
+                : "".concat(formatPercent(feeValue * 100), "%"), " ").concat(ifElse(isNil, always(""), function (a) { return "with a minimum of ".concat(displayCurrency(a), " "); })(feeMinimum), "on all ").concat(feeName, " payments."), variant: "info", showQuitLink: false })));
+};
+export default themeComponent(ProcessingFee, "ProcessingFee", fallbackValues, "default");

package/dist/src/components/atoms/processing-fee/ProcessingFee.stories.d.ts

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

package/dist/src/components/atoms/processing-fee/ProcessingFee.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import ProcessingFee from "./ProcessingFee";
+import page from "../../../../.storybook/page";
+var feeTypes = {
+    flat: "FLAT",
+    percentage: "PERCENTAGE",
+    None: undefined
+};
+var defaultValue = "FLAT";
+var groupId = "props";
+export var processingFee = function () { return (React.createElement(ProcessingFee, { feeValue: text("feeValue", "0", groupId), feeName: text("feeName", "Credit Card", groupId), feeType: select("feeTypes", feeTypes, defaultValue, groupId), feeMinimum: text("feeMinimum", "0", groupId), hide: boolean("hide", false, groupId) })); };
+var story = page({
+    title: "Components|Atoms/ProcessingFee",
+    Component: ProcessingFee
+});
+export default story;

package/dist/src/components/atoms/processing-fee/ProcessingFee.theme.d.ts

@@ -0,0 +1,8 @@
+export namespace fallbackValues {
+    export { backgroundColor };
+}
+declare namespace backgroundColor {
+    const _default: string;
+    export { _default as default };
+}
+export {};

package/dist/src/components/atoms/processing-fee/ProcessingFee.theme.js

@@ -0,0 +1,5 @@
+import { WHITE } from "../../../constants/colors";
+var backgroundColor = { default: "".concat(WHITE) };
+export var fallbackValues = {
+    backgroundColor: backgroundColor
+};

package/dist/src/components/atoms/processing-fee/index.d.ts

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

package/dist/src/components/atoms/processing-fee/index.js

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

package/dist/src/components/atoms/radio-button/RadioButton.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/radio-button/RadioButton.js

@@ -0,0 +1,68 @@
+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 from "react";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./RadioButton.theme";
+import { Motion } from "../layouts";
+import styled from "styled-components";
+var HiddenRadioButton = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  cursor: ", ";\n"], ["\n  opacity: 0;\n  position: absolute;\n  cursor: ", ";\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? "auto" : "pointer");
+});
+var RadioButton = function (_a) {
+    var _b = _a.radioOn, radioOn = _b === void 0 ? false : _b, _c = _a.radioFocused, radioFocused = _c === void 0 ? false : _c, toggleRadio = _a.toggleRadio, name = _a.name, _d = _a.disabled, disabled = _d === void 0 ? false : _d, themeValues = _a.themeValues;
+    var buttonBorder = {
+        onFocused: {
+            borderColor: themeValues.activeColor,
+            boxShadow: "0px 0px 4px 0px ".concat(themeValues.activeColor)
+        },
+        offFocused: {
+            borderColor: themeValues.activeColor,
+            boxShadow: "0px 0px 4px 0px ".concat(themeValues.activeColor)
+        },
+        on: {
+            borderColor: themeValues.activeColor,
+            boxShadow: "0px 0px 0px 0px #FFFFFF"
+        },
+        off: {
+            borderColor: themeValues.inactiveColor,
+            boxShadow: "0px 0px 0px 0px #FFFFFF"
+        }
+    };
+    var buttonCenter = {
+        on: {
+            backgroundColor: themeValues.activeColor,
+            height: "16px",
+            width: "16px"
+        },
+        onFocused: {
+            backgroundColor: themeValues.activeColor,
+            height: "16px",
+            width: "16px"
+        },
+        offFocused: {
+            backgroundColor: "transparent",
+            height: "0px",
+            width: "0px"
+        },
+        off: {
+            backgroundColor: "transparent",
+            height: "0px",
+            width: "0px"
+        }
+    };
+    return (React.createElement(Motion, { position: "relative", padding: "0", initial: "off", animate: radioOn
+            ? radioFocused
+                ? "onFocused"
+                : "on"
+            : radioFocused
+                ? "offFocused"
+                : "off" },
+        React.createElement(HiddenRadioButton, { id: "#radio-".concat(name), "aria-label": name, disabled: disabled, onClick: toggleRadio, tabIndex: "-1" }),
+        React.createElement(Motion, { borderWidth: "1px", borderStyle: "solid", borderRadius: "12px", margin: "4px 14px 4px 4px", height: "24px", width: "24px", variants: buttonBorder, display: "flex", extraStyles: "justify-content: center; align-items: center;" },
+            React.createElement(Motion, { variants: buttonCenter, borderRadius: "8px" }))));
+};
+export default themeComponent(RadioButton, "RadioButton", fallbackValues);
+var templateObject_1;

package/dist/src/components/atoms/radio-button/RadioButton.stories.d.ts

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

package/dist/src/components/atoms/radio-button/RadioButton.stories.js

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import { boolean } from "@storybook/addon-knobs";
+import RadioButton from "./RadioButton";
+import { Box } from "../layouts";
+import page from "../../../../.storybook/page";
+export var radioButtonsDefault = function () {
+    var _a = useState(null), selected = _a[0], setSelected = _a[1];
+    var _b = useState(null), focused = _b[0], setFocused = _b[1];
+    return (React.createElement(Box, { onFocus: function () { return setFocused(name); }, onBlur: function () { return setFocused(null); }, extraStyles: "outline: none;", tabIndex: "0" },
+        React.createElement(RadioButton, { name: "demo", radioOn: selected === name, radioFocused: focused === name, toggleRadio: function () { return setSelected(name); }, disabled: boolean("disabled", false, "props") })));
+};
+var story = page({
+    title: "Components|Atoms/RadioButton",
+    Component: RadioButton
+});
+export default story;

package/dist/src/components/atoms/radio-button/RadioButton.theme.d.ts

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

package/dist/src/components/atoms/radio-button/RadioButton.theme.js

@@ -0,0 +1,7 @@
+import { MATISSE_BLUE, GREY_CHATEAU } from "../../../constants/colors";
+var activeColor = "".concat(MATISSE_BLUE);
+var inactiveColor = "".concat(GREY_CHATEAU);
+export var fallbackValues = {
+    activeColor: activeColor,
+    inactiveColor: inactiveColor
+};

package/dist/src/components/atoms/radio-button/index.d.ts

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

package/dist/src/components/atoms/radio-button/index.js

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

package/dist/src/components/atoms/searchable-select/SearchableSelect.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/searchable-select/SearchableSelect.js

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from "react";
+import { fallbackValues } from "./SearchableSelect.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box, Stack } from "../layouts";
+import { FormInput } from "../form-layouts";
+import Checkbox from "../checkbox";
+var SELECT_ALL = "Select All";
+var SearchableSelect = function (_a) {
+    var items = _a.items, selectedItems = _a.selectedItems, allSelected = _a.allSelected, toggleSelectAllItems = _a.toggleSelectAllItems, selectItem = _a.selectItem, fields = _a.fields, actions = _a.actions, disabled = _a.disabled, themeValues = _a.themeValues;
+    var _b = useState([]), itemList = _b[0], setItemList = _b[1];
+    useEffect(function () { return setItemList(items); }, [items, selectedItems]);
+    useEffect(function () {
+        var filteredItems = items.filter(function (item) {
+            var _a, _b, _c;
+            return (_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes((_c = (_b = fields === null || fields === void 0 ? void 0 : fields.searchTerm) === null || _b === void 0 ? void 0 : _b.rawValue) === null || _c === void 0 ? void 0 : _c.toLowerCase());
+        });
+        setItemList(filteredItems);
+    }, [fields.searchTerm.rawValue]);
+    var handleSelect = function (value) {
+        if (value.name === SELECT_ALL) {
+            allSelected ? toggleSelectAllItems(false) : toggleSelectAllItems(true);
+        }
+        else {
+            selectItem(value);
+        }
+    };
+    return (React.createElement(Box, { padding: "1rem", border: themeValues.border, extraStyles: disabled &&
+            "color: #6e727e; background-color: #f7f7f7; pointer-events: none;" },
+        React.createElement(Stack, null,
+            React.createElement(FormInput, { errorMessages: {}, field: fields.searchTerm, fieldActions: actions.fields.searchTerm, placeholder: "Search agencies", disabled: disabled }),
+            React.createElement(Box, { padding: "0.5rem 0", extraStyles: "overflow-y: scroll; height: 250px;" },
+                React.createElement(Stack, null, itemList.map(function (value) {
+                    var _a;
+                    return (React.createElement(Checkbox, { key: value.name, title: value.name, name: value.name, checked: (_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(function (item) { return (item === null || item === void 0 ? void 0 : item.name) === (value === null || value === void 0 ? void 0 : value.name); })) !== null && _a !== void 0 ? _a : false, onChange: function () { return handleSelect(value); }, textExtraStyles: "margin: 0;", disabled: disabled, extraStyles: "margin: 0 0.5rem;" }));
+                }))))));
+};
+export default themeComponent(SearchableSelect, "SearchableSelect", fallbackValues, "default");

package/dist/src/components/atoms/searchable-select/SearchableSelect.theme.d.ts

@@ -0,0 +1,8 @@
+export namespace fallbackValues {
+    export { border };
+}
+declare namespace border {
+    const _default: string;
+    export { _default as default };
+}
+export {};

package/dist/src/components/atoms/searchable-select/SearchableSelect.theme.js

@@ -0,0 +1,6 @@
+var border = {
+    default: "1px solid #caced8"
+};
+export var fallbackValues = {
+    border: border
+};

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

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

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

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

package/dist/src/components/atoms/solid-divider/SolidDivider.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/solid-divider/SolidDivider.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { fallbackValues } from "./SolidDivider.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box } from "../layouts";
+var SolidDivider = function (_a) {
+    var themeValues = _a.themeValues;
+    return (React.createElement(Box, { padding: "0", minWidth: "100%", minHeight: "1px", borderColor: themeValues.borderColor, borderSize: themeValues.borderSize, borderWidthOverride: "0px 0px ".concat(themeValues.borderSize, " 0px") }));
+};
+export default themeComponent(SolidDivider, "SolidDivider", fallbackValues, "default");

package/dist/src/components/atoms/solid-divider/SolidDivider.stories.d.ts

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

package/dist/src/components/atoms/solid-divider/SolidDivider.stories.js

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

package/dist/src/components/atoms/solid-divider/SolidDivider.theme.d.ts

@@ -0,0 +1,13 @@
+export namespace fallbackValues {
+    export { borderColor };
+    export { borderSize };
+}
+declare namespace borderColor {
+    const _default: string;
+    export { _default as default };
+}
+declare namespace borderSize {
+    const _default_1: string;
+    export { _default_1 as default };
+}
+export {};

package/dist/src/components/atoms/solid-divider/SolidDivider.theme.js

@@ -0,0 +1,7 @@
+import { GREY_CHATEAU } from "../../../constants/colors";
+var borderColor = { default: "".concat(GREY_CHATEAU) };
+var borderSize = { default: "1px" };
+export var fallbackValues = {
+    borderColor: borderColor,
+    borderSize: borderSize
+};

package/dist/src/components/atoms/solid-divider/index.d.ts

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

package/dist/src/components/atoms/solid-divider/index.js

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

package/dist/src/components/atoms/spinner/Spinner.d.ts

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

package/dist/src/components/atoms/spinner/Spinner.js

@@ -0,0 +1,27 @@
+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 from "react";
+import styled from "styled-components";
+import { fallbackValues } from "./Spinner.theme";
+import { themeComponent } from "../../../util/themeUtils";
+var SpinnerSvgAnimation = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  animation: rotate 2s linear infinite;\n  margin: -25px 0 0 -25px;\n  width: ", "px;\n  height: ", "px;\n  & .path {\n    stroke: ", ";\n    stroke-linecap: round;\n    animation: dash 1.5s ease-in-out infinite;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"], ["\n  animation: rotate 2s linear infinite;\n  margin: -25px 0 0 -25px;\n  width: ", "px;\n  height: ", "px;\n  & .path {\n    stroke: ", ";\n    stroke-linecap: round;\n    animation: dash 1.5s ease-in-out infinite;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"])), function (_a) {
+    var size = _a.size;
+    return size;
+}, function (_a) {
+    var size = _a.size;
+    return size;
+}, function (_a) {
+    var color = _a.color;
+    return color;
+});
+export var SpinnerContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n"])));
+var Spinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? "24" : _b, themeValues = _a.themeValues;
+    return (React.createElement(SpinnerContainer, null,
+        React.createElement(SpinnerSvgAnimation, { size: size, color: themeValues.color },
+            React.createElement("circle", { className: "path", cx: "50", cy: "50", r: "25", fill: "none", strokeWidth: "6" }))));
+};
+export default themeComponent(Spinner, "Spinner", fallbackValues);
+var templateObject_1, templateObject_2;

package/dist/src/components/atoms/spinner/Spinner.stories.d.ts

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

package/dist/src/components/atoms/spinner/Spinner.stories.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+import Spinner from "./Spinner";
+import { Box } from "../layouts";
+import page from "../../../../.storybook/page";
+export var spinner = function () { return (React.createElement(Box, null,
+    React.createElement(Spinner, { size: text("size", "100", "props") }))); };
+var story = page({
+    title: "Components|Atoms/Spinner",
+    Component: Spinner
+});
+export default story;

package/dist/src/components/atoms/spinner/Spinner.theme.d.ts

@@ -0,0 +1,5 @@
+export namespace fallbackValues {
+    export { color };
+}
+declare const color: "#15749D";
+export {};

package/dist/src/components/atoms/spinner/Spinner.theme.js

@@ -0,0 +1,4 @@
+var color = "#15749D";
+export var fallbackValues = {
+    color: color
+};

package/dist/src/components/atoms/spinner/index.d.ts

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

package/dist/src/components/atoms/spinner/index.js

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

package/dist/src/components/atoms/state-province-dropdown/StateProvinceDropdown.d.ts

@@ -0,0 +1,10 @@
+export default FormStateDropdown;
+declare function FormStateDropdown({ labelTextWhenNoError, errorMessages, field, fieldActions, showErrors, countryCode, autocomplete }: {
+    labelTextWhenNoError: any;
+    errorMessages: any;
+    field: any;
+    fieldActions: any;
+    showErrors: any;
+    countryCode: any;
+    autocomplete: any;
+}): JSX.Element;