@thecb/components 7.5.1 → 7.5.2

package/dist/src/components/atoms/dropdown/Dropdown.js

@@ -0,0 +1,258 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useEffect, Fragment, useState, useRef, createRef } from "react";
+import { Box, Stack } from "../layouts";
+import Text from "../text";
+import { noop, inputDisabledStyle, inputPlaceholderTextStyle } from "../../../util/general";
+import DropdownIcon from "./DropdownIcon";
+import styled from "styled-components";
+// support for Array.prototype.at() in older browsers
+import "core-js/proposals/relative-indexing-method";
+import { WHITE, GREY_CHATEAU, STORM_GREY, MINESHAFT_GREY, ERROR_COLOR } from "../../../constants/colors";
+import { fallbackValues } from "./Dropdown.theme";
+import { themeComponent } from "../../../util/themeUtils";
+var IconWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  transition: transform 0.3s ease;\n  ", ";\n  top: 20px;\n  right: 12px;\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  transition: transform 0.3s ease;\n  ", ";\n  top: 20px;\n  right: 12px;\n"])), function (_a) {
+    var open = _a.open;
+    return (open ? "transform: rotate(-180deg)" : "");
+});
+var DropdownContentWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: ", ";\n  min-width: 100%;\n  max-height: ", ";\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n\n  ul {\n    padding-left: 0;\n  }\n"], ["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: ", ";\n  min-width: 100%;\n  max-height: ", ";\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n\n  ul {\n    padding-left: 0;\n  }\n"])), GREY_CHATEAU, WHITE, function (_a) {
+    var widthFitOptions = _a.widthFitOptions;
+    return (widthFitOptions ? "fit-content" : "100%");
+}, function (_a) {
+    var maxHeight = _a.maxHeight;
+    return maxHeight || "400px";
+});
+var DropdownItemWrapper = styled.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  text-align: start;\n  border-width: 0px;\n  border-color: transparent;\n  box-shadow: none;\n  padding: 1rem;\n  box-sizing: border-box;\n  width: 100%;\n  list-style: none;\n  cursor: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    background-color: ", ";\n    outline: none;\n  }\n"], ["\n  background-color: ", ";\n  text-align: start;\n  border-width: 0px;\n  border-color: transparent;\n  box-shadow: none;\n  padding: 1rem;\n  box-sizing: border-box;\n  width: 100%;\n  list-style: none;\n  cursor: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    background-color: ", ";\n    outline: none;\n  }\n"])), function (_a) {
+    var selected = _a.selected, themeValues = _a.themeValues;
+    return selected ? themeValues.selectedColor : WHITE;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? "default" : "pointer");
+}, function (_a) {
+    var selected = _a.selected, disabled = _a.disabled, themeValues = _a.themeValues;
+    return selected
+        ? themeValues.selectedColor
+        : disabled
+            ? WHITE
+            : themeValues.hoverColor;
+}, function (_a) {
+    var selected = _a.selected, disabled = _a.disabled, themeValues = _a.themeValues;
+    return selected
+        ? themeValues.selectedColor
+        : disabled
+            ? WHITE
+            : themeValues.hoverColor;
+});
+var Dropdown = function (_a) {
+    var placeholder = _a.placeholder, options = _a.options, value = _a.value, isOpen = _a.isOpen, isError = _a.isError, onSelect = _a.onSelect, _b = _a.disabledValues, disabledValues = _b === void 0 ? [] : _b, _c = _a.onClick, onClick = _c === void 0 ? noop : _c, themeValues = _a.themeValues, maxHeight = _a.maxHeight, _d = _a.widthFitOptions, widthFitOptions = _d === void 0 ? false : _d, disabled = _a.disabled, _e = _a.hasTitles, hasTitles = _e === void 0 ? false : _e, _f = _a.autoEraseTypeAhead, autoEraseTypeAhead = _f === void 0 ? true : _f, ariaLabelledby = _a.ariaLabelledby, ariaDescribedby = _a.ariaDescribedby, _g = _a.autocompleteValue, autocompleteValue = _g === void 0 ? "" : _g, // browser autofill value, like country-name or address-level1 for state
+    _h = _a.smoothScroll, // browser autofill value, like country-name or address-level1 for state
+    smoothScroll = _h === void 0 ? true : _h;
+    var _j = useState(""), inputValue = _j[0], setInputValue = _j[1];
+    var _k = useState([]), optionsState = _k[0], setOptionsState = _k[1];
+    var _l = useState([]), filteredOptions = _l[0], setFilteredOptions = _l[1];
+    var _m = useState(true), optionsChanged = _m[0], setOptionsChanged = _m[1];
+    var _o = useState(undefined), selectedRef = _o[0], setSelectedRef = _o[1];
+    var _p = useState(undefined), focusedRef = _p[0], setFocusedRef = _p[1];
+    var _q = useState(false), inputChangedByAutofill = _q[0], setInputChangedByAutofill = _q[1];
+    var _r = useState(false), focusedByClick = _r[0], setFocusedByClick = _r[1];
+    if (optionsState !== options) {
+        setOptionsState(options);
+        setOptionsChanged(true);
+    }
+    if (optionsChanged) {
+        setFilteredOptions(options);
+        setOptionsChanged(false);
+    }
+    var _s = useState(null), timer = _s[0], setTimer = _s[1];
+    var optionRefs = useRef(__spreadArray([], Array(options.length), true).map(function () { return createRef(); }));
+    var dropdownRef = useRef(null);
+    var getSelection = function () { var _a; return value ? (_a = options.find(function (option) { return option.value === value; })) === null || _a === void 0 ? void 0 : _a.text : placeholder; };
+    var onKeyDown = function (e) {
+        var key = e.key, keyCode = e.keyCode;
+        var focus = document.activeElement;
+        var optionEl = optionRefs.current.find(function (ref) { return ref.current === focus; });
+        switch (key) {
+            case "ArrowDown":
+                e.preventDefault();
+                if (!isOpen) {
+                    onClick();
+                }
+                if (optionEl) {
+                    if (optionEl.current.nextElementSibling) {
+                        optionEl.current.nextElementSibling.focus();
+                    }
+                    else {
+                        // If at the end of the options list, don't do anything
+                        break;
+                    }
+                }
+                else {
+                    onClick();
+                }
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                if (optionEl) {
+                    if (optionEl.current.previousElementSibling) {
+                        optionEl.current.previousElementSibling.focus();
+                    }
+                    else {
+                        // If at the start of the options list, don't do anything
+                        break;
+                    }
+                }
+                else {
+                    onClick();
+                }
+                break;
+            case "Tab":
+                if (isOpen) {
+                    e.preventDefault();
+                }
+                break;
+            case "Backspace" || "Delete":
+                e.preventDefault();
+                setInputValue(inputValue.slice(0, -1));
+                break;
+            case "Home":
+                e.preventDefault();
+                optionRefs.current[0].current.focus();
+                break;
+            case "End":
+                e.preventDefault();
+                optionRefs.current.at(-1).current.focus();
+                break;
+            case "Escape":
+                if (isOpen) {
+                    onClick();
+                }
+                break;
+        }
+        if ((keyCode > 64 && keyCode < 91) || keyCode == 32 || keyCode == 189) {
+            e.preventDefault();
+            setInputValue(inputValue + key);
+        }
+    };
+    var handleItemSelection = function (evt, choice, i) {
+        if (disabledValues.includes(choice.value)) {
+            evt.preventDefault();
+        }
+        else {
+            setSelectedRef(optionRefs.current[i]);
+            onSelect(choice.value);
+            if (isOpen) {
+                onClick();
+            }
+        }
+    };
+    useEffect(function () {
+        var selectedRefExists = selectedRef !== undefined && selectedRef.current !== null;
+        if (isOpen && selectedRefExists && !focusedByClick) {
+            // For keyboard users, WAI-ARIA requires the selected option to receive focus
+            selectedRef.current.focus();
+        }
+        else if (isOpen && optionRefs.current[0].current && !focusedByClick) {
+            // If no selected option, first option receives focus
+            optionRefs.current[0].current.focus();
+        }
+        if (isOpen && focusedByClick && selectedRefExists) {
+            // To support autofill for mouse users, we maintain focus on input just scroll item into view
+            selectedRef.current.scrollIntoView({
+                behavior: smoothScroll ? "smooth" : "auto",
+                block: "nearest",
+                inline: "start"
+            });
+            setFocusedByClick(false);
+        }
+        clearTimeout(timer);
+        setInputValue("");
+    }, [isOpen]);
+    useEffect(function () {
+        if (autoEraseTypeAhead) {
+            clearTimeout(timer);
+            setTimer(setTimeout(function () { return setInputValue(""); }, 3000));
+        }
+        setFilteredOptions(options.filter(function (option) {
+            return option.value.toLowerCase().startsWith(inputValue.toLowerCase()) ||
+                option.text.toLowerCase().startsWith(inputValue.toLowerCase());
+        }));
+    }, [inputValue]);
+    useEffect(function () {
+        if (
+        /*
+          Either user has typed a value into input that matches a non-disabled option or
+          user has autofilled or pasted into input a string matching a valid option
+        */
+        (!isOpen || inputChangedByAutofill) &&
+            filteredOptions[0] &&
+            !disabledValues.includes(filteredOptions[0].value) &&
+            filteredOptions[0].text != placeholder) {
+            setInputChangedByAutofill(false);
+            onSelect(filteredOptions[0].value);
+            if (isOpen) {
+                setTimeout(function () { return onClick(); }, 1000);
+            }
+        }
+        if (optionRefs.current[0].current) {
+            optionRefs.current[0].current.focus();
+        }
+        else if (isOpen) {
+            dropdownRef.current.focus();
+        }
+    }, [filteredOptions]);
+    return (React.createElement(Box, { padding: "0", background: isOpen ? themeValues.hoverColor : WHITE, extraStyles: "position: relative;", minWidth: "100%", onClick: function () {
+            if (!isOpen) {
+                setFocusedByClick(true);
+                onClick();
+            }
+        }, onKeyDown: onKeyDown, width: "100%" },
+        React.createElement(Box, { as: "input", "aria-multiline": "false", "aria-autocomplete": "list", "aria-controls": "".concat(ariaLabelledby, "_listbox"), "aria-activedescendant": "focused_option", "aria-owns": "".concat(ariaLabelledby, "_listbox"), "aria-haspopup": "listbox", "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-expanded": isOpen, autocomplete: autocompleteValue, background: isOpen ? themeValues.hoverColor : WHITE, borderRadius: "2px", borderSize: "1px", borderColor: isError
+                ? ERROR_COLOR
+                : isOpen
+                    ? themeValues.selectedColor
+                    : GREY_CHATEAU, extraStyles: disabled
+                ? "".concat(inputPlaceholderTextStyle).concat(inputDisabledStyle)
+                : inputPlaceholderTextStyle, hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"), isOpen: isOpen, minHeight: "48px", minWidth: "100%", name: autocompleteValue, onChange: function (e) {
+                // support autofill and copy/paste
+                if (e.target.value !== inputValue) {
+                    setInputValue(e.target.value);
+                    setInputChangedByAutofill(true);
+                }
+            }, padding: "12px", placeholder: getSelection(), role: "combobox", themeValues: themeValues, title: hasTitles ? getSelection() : null, type: "text", tabIndex: 0, value: inputValue, width: "100%", dataQa: placeholder }),
+        React.createElement(IconWrapper, { open: isOpen, onClick: onClick },
+            React.createElement(DropdownIcon, null)),
+        React.createElement(Fragment, null, isOpen ? (React.createElement(DropdownContentWrapper, { maxHeight: maxHeight, open: isOpen, ref: dropdownRef, widthFitOptions: widthFitOptions, tabIndex: 0, role: "listbox", id: "".concat(ariaLabelledby, "_listbox") },
+            React.createElement(Stack, { childGap: "0", as: "ul" }, filteredOptions.map(function (choice, i) {
+                if (choice.value === value &&
+                    selectedRef !== optionRefs.current[i]) {
+                    setSelectedRef(optionRefs.current[i]);
+                }
+                return (React.createElement(DropdownItemWrapper, { id: focusedRef === optionRefs.current[i]
+                        ? "focused_option"
+                        : choice.value, key: choice.value, ref: optionRefs.current[i], tabIndex: -1, onClick: function (e) { return handleItemSelection(e, choice, i); }, onKeyDown: function (e) {
+                        if (e.keyCode === 13) {
+                            handleItemSelection(e, choice, i);
+                        }
+                    }, selected: choice.value === value, "aria-selected": choice.value === value, disabled: disabledValues.includes(choice.value), "data-qa": choice.text, themeValues: themeValues, title: hasTitles ? choice.text : null, role: "option", onFocus: function () { return setFocusedRef(optionRefs.current[i]); } },
+                    React.createElement(Text, { variant: "p", color: choice.value === value
+                            ? WHITE
+                            : disabledValues.includes(choice.value)
+                                ? STORM_GREY
+                                : MINESHAFT_GREY, extraStyles: "padding-left: 16px; \n                      cursor: ".concat(disabledValues.includes(choice.value)
+                            ? "default"
+                            : "pointer", "; \n                      white-space: nowrap; \n                      overflow: hidden; \n                      text-overflow: ellipsis;") }, choice.text)));
+            })))) : (React.createElement(Fragment, null)))));
+};
+export default themeComponent(Dropdown, "Dropdown", fallbackValues);
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/components/atoms/dropdown/Dropdown.stories.d.ts

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

package/dist/src/components/atoms/dropdown/Dropdown.stories.js

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from "react";
+import Dropdown from "./Dropdown";
+import page from "../../../../.storybook/page";
+var options = [
+    { text: "Please select an option", value: "" },
+    { text: "OPTION_1", value: "OPTION_1" },
+    { text: "OPTION_2", value: "OPTION_2" },
+    { text: "DISABLED_OPTION", value: "DISABLED_OPTION" }
+];
+var disabledValues = ["DISABLED_OPTION"];
+export var dropdown = function () {
+    var _a = useState(false), isOpen = _a[0], setOpen = _a[1];
+    var _b = useState(null), value = _b[0], setValue = _b[1];
+    var _c = useState(false), isError = _c[0], setError = _c[1];
+    useEffect(function () {
+        if (value === options[0].value) {
+            setError(true);
+        }
+        else {
+            setError(false);
+        }
+    }, [value]);
+    return (React.createElement(Dropdown, { placeholder: options[0].text, options: options, disabledValues: disabledValues, value: value, isOpen: isOpen, isError: isError, onSelect: setValue, onClick: function () { return setOpen(!isOpen); } }));
+};
+var story = page({
+    title: "Components|Atoms/Dropdown",
+    Component: Dropdown,
+    height: "500px"
+});
+export default story;

package/dist/src/components/atoms/dropdown/Dropdown.theme.d.ts

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

package/dist/src/components/atoms/dropdown/Dropdown.theme.js

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

package/dist/src/components/atoms/dropdown/DropdownIcon.d.ts

@@ -0,0 +1,2 @@
+export default DropdownIcon;
+declare function DropdownIcon(): JSX.Element;

package/dist/src/components/atoms/dropdown/DropdownIcon.js

@@ -0,0 +1,7 @@
+import React from "react";
+var DropdownIcon = function () { return (React.createElement("svg", { version: "1.2", xmlns: "http://www.w3.org/2000/svg", overflow: "visible", preserveAspectRatio: "none", viewBox: "0 0 14 10", height: "8", width: "12" },
+    React.createElement("g", { transform: "translate(1 1)" },
+        React.createElement("g", { fillRule: "evenodd", fill: "none" },
+            React.createElement("g", { fill: "#333", transform: "translate(-155 -22)" },
+                React.createElement("polygon", { points: "165.59 22.59 161 27.17 156.41 22.59 155 24 161 30 167 24", vectorEffect: "non-scaling-stroke" })))))); };
+export default DropdownIcon;

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

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

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

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

package/dist/src/components/atoms/form-layouts/FormContainer.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-layouts/FormContainer.js

@@ -0,0 +1,34 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "./FormLayouts.theme.js";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box } from "../layouts";
+import withWindowSize from "../../withWindowSize";
+var FormContainer = function (_a) {
+    var themeValues = _a.themeValues, children = _a.children, rest = __rest(_a, ["themeValues", "children"]);
+    var isMobile = useContext(ThemeContext).isMobile;
+    return (React.createElement(Box, __assign({ padding: isMobile ? "1rem" : "1.5rem", background: themeValues.formBackgroundColor, borderRadius: "4px" }, rest), children));
+};
+export default themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues, "default");

package/dist/src/components/atoms/form-layouts/FormFooterPanel.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-layouts/FormFooterPanel.js

@@ -0,0 +1,15 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "./FormLayouts.theme.js";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box, Cluster } from "../layouts";
+import ButtonWithLink from "../button-with-link";
+import withWindowSize from "../../withWindowSize";
+var FormFooterPanel = function (_a) {
+    var themeValues = _a.themeValues, link = _a.link, linkText = _a.linkText;
+    var isMobile = useContext(ThemeContext).isMobile;
+    return (React.createElement(Box, { background: themeValues.formFooterPanel, minWidth: "100%", padding: isMobile ? "1rem" : "1.5rem" },
+        React.createElement(Cluster, { justify: "center", align: "center" },
+            React.createElement(ButtonWithLink, { url: link, variant: "smallGhost", text: linkText }))));
+};
+export default themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues, "default");

package/dist/src/components/atoms/form-layouts/FormInput.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-layouts/FormInput.js

@@ -0,0 +1,116 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState, useContext } from "react";
+import styled, { ThemeContext, css } from "styled-components";
+import { FormattedInput } from "formatted-input";
+import { fallbackValues } from "./FormLayouts.theme.js";
+import { themeComponent } from "../../../util/themeUtils";
+import { createIdFromString } from "../../../util/general.js";
+import Text from "../text";
+import { Box, Cluster, Stack } from "../layouts";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { ERROR_COLOR, ROYAL_BLUE } from "../../../constants/colors";
+var InputField = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 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  transition: background 0.3s ease;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 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  transition: background 0.3s ease;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var field = _a.field, showErrors = _a.showErrors, themeValues = _a.themeValues;
+    return (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
+        ? ERROR_COLOR
+        : themeValues.borderColor;
+}, function (_a) {
+    var $customHeight = _a.$customHeight;
+    return ($customHeight ? $customHeight : "48px");
+}, 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;
+}, function (_a) {
+    var background = _a.background, themeValues = _a.themeValues;
+    return background &&
+        "background: ".concat(themeValues.inputBackgroundColor, " url(").concat(background, ") no-repeat right 0.5rem center;");
+}, ROYAL_BLUE, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: #6e727e;\n      background-color: #f7f7f7;\n    "], ["\n      color: #6e727e;\n      background-color: #f7f7f7;\n    "])));
+}, function (_a) {
+    var $extraStyles = _a.$extraStyles;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), $extraStyles);
+});
+// eslint-disable-next-line no-unused-vars
+var FormattedInputField = styled(function (_a) {
+    var showErrors = _a.showErrors, themeValues = _a.themeValues, props = __rest(_a, ["showErrors", "themeValues"]);
+    return (React.createElement(FormattedInput, __assign({}, props)));
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var field = _a.field, showErrors = _a.showErrors, themeValues = _a.themeValues;
+    return (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
+        ? ERROR_COLOR
+        : themeValues.borderColor;
+}, function (_a) {
+    var $customHeight = _a.$customHeight;
+    return ($customHeight ? $customHeight : "48px");
+}, 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;
+}, ROYAL_BLUE, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: #6e727e;\n      background-color: #f7f7f7;\n    "], ["\n      color: #6e727e;\n      background-color: #f7f7f7;\n    "])));
+}, function (_a) {
+    var extraStyles = _a.extraStyles;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), extraStyles);
+});
+var FormInput = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? "text" : _b, _c = _a.labelTextWhenNoError, labelTextWhenNoError = _c === void 0 ? "" : _c, errorMessages = _a.errorMessages, _d = _a.isNum, isNum = _d === void 0 ? false : _d, _e = _a.isEmail, isEmail = _e === void 0 ? false : _e, _f = _a.helperModal, helperModal = _f === void 0 ? false : _f, field = _a.field, fieldActions = _a.fieldActions, showErrors = _a.showErrors, _g = _a.formatter, formatter = _g === void 0 ? null : _g, decorator = _a.decorator, themeValues = _a.themeValues, background = _a.background, customHeight = _a.customHeight, autocomplete = _a.autocomplete, extraStyles = _a.extraStyles, removeFromValue = _a.removeFromValue, // regex of characters to remove before setting value
+    props = __rest(_a, ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles", "removeFromValue"]);
+    var _h = useState(false), showPassword = _h[0], setShowPassword = _h[1];
+    var isMobile = useContext(ThemeContext).isMobile;
+    var setValue = function (value) {
+        if (removeFromValue !== undefined) {
+            return fieldActions.set(value.replace(removeFromValue, ""));
+        }
+        return fieldActions.set(value);
+    };
+    return (React.createElement(Stack, { childGap: "0.25rem" },
+        React.createElement(Box, { padding: "0" }, helperModal ? (React.createElement(Cluster, { justify: "space-between", align: "center" },
+            React.createElement(Text, { as: "label", color: themeValues.labelColor, variant: "pS", 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(Text, { color: themeValues.linkColor, variant: "pS", weight: themeValues.fontWeight }, helperModal()))) : (React.createElement(Box, { padding: "0", minWidth: "100%" },
+            React.createElement(Cluster, { justify: "space-between", align: "center" },
+                React.createElement(Text, { as: "label", color: themeValues.labelColor, variant: "pS", fontWeight: themeValues.fontWeight, extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }", id: createIdFromString(labelTextWhenNoError) }, labelTextWhenNoError),
+                type === "password" && (React.createElement(Text, { variant: "pS", color: themeValues.linkColor, weight: themeValues.fontWeight, hoverStyles: themeValues.hoverFocusStyles, extraStyles: "cursor: pointer; &:focus { outline-offset: -2px; }", onClick: function () { return setShowPassword(!showPassword); }, "aria-label": "Show password", tabIndex: "0", onKeyPress: function (e) {
+                        return e.key === "Enter" && setShowPassword(!showPassword);
+                    } }, showPassword ? "Hide" : "Show")),
+                isMobile && decorator && (React.createElement(Box, { padding: "0 0 0 auto" }, decorator)))))),
+        React.createElement(Box, { padding: "0" }, formatter ? (React.createElement(FormattedInputField, __assign({ "aria-labelledby": createIdFromString(labelTextWhenNoError), "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"), "aria-invalid": (field.dirty && field.hasErrors) ||
+                (field.hasErrors && showErrors), onChange: function (value) { return setValue(value); }, type: type, value: field.rawValue, pattern: isNum ? "[0-9]*" : "", inputMode: isNum ? "numeric" : isEmail ? "email" : "text", field: field, formatter: formatter, showErrors: showErrors, "data-qa": labelTextWhenNoError, themeValues: themeValues, "$customHeight": customHeight, "$extraStyles": extraStyles, autocomplete: autocomplete }, props))) : (React.createElement(InputField, __assign({ "aria-labelledby": createIdFromString(labelTextWhenNoError), "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"), "aria-invalid": (field.dirty && field.hasErrors) ||
+                (field.hasErrors && showErrors), onChange: function (e) { return setValue(e.target.value); }, type: type === "password" && showPassword ? "text" : type, value: field.rawValue, pattern: isNum ? "[0-9]*" : "", inputMode: isNum ? "numeric" : isEmail ? "email" : "text", field: field, showErrors: showErrors, "data-qa": labelTextWhenNoError, themeValues: themeValues, background: background, "$customHeight": customHeight, "$extraStyles": extraStyles, autocomplete: autocomplete }, props)))),
+        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, ";") })),
+            !isMobile && decorator && React.createElement(Box, { padding: "0 0 0 auto" }, decorator))));
+};
+export default themeComponent(FormInput, "FormInput", fallbackValues, "default");
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,7 @@
+export default FormInputColumn;
+declare function FormInputColumn({ childGap, bottomItem, children, ...rest }: {
+    [x: string]: any;
+    childGap?: string | undefined;
+    bottomItem: any;
+    children: any;
+}): JSX.Element;

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

@@ -0,0 +1,29 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Stack } from "../layouts";
+var FormInputColumn = function (_a) {
+    var _b = _a.childGap, childGap = _b === void 0 ? "0.5rem" : _b, bottomItem = _a.bottomItem, children = _a.children, rest = __rest(_a, ["childGap", "bottomItem", "children"]);
+    return (React.createElement(Stack, __assign({ childGap: childGap, bottomItem: bottomItem }, rest), children));
+};
+export default FormInputColumn;

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

@@ -0,0 +1,9 @@
+export default FormInputRow;
+declare function FormInputRow({ breakpoint, childGap, largeChild, largeChildSize, children, ...rest }: {
+    [x: string]: any;
+    breakpoint?: string | undefined;
+    childGap?: string | undefined;
+    largeChild: any;
+    largeChildSize: any;
+    children: any;
+}): JSX.Element;

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

@@ -0,0 +1,30 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Box, Switcher } from "../layouts";
+var FormInputRow = function (_a) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? "30rem" : _b, _c = _a.childGap, childGap = _c === void 0 ? "1rem" : _c, largeChild = _a.largeChild, largeChildSize = _a.largeChildSize, children = _a.children, rest = __rest(_a, ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"]);
+    return (React.createElement(Box, __assign({ padding: "0" }, rest),
+        React.createElement(Switcher, { childGap: childGap, breakpoint: breakpoint, largeChild: largeChild, largeChildSize: largeChildSize }, children)));
+};
+export default FormInputRow;

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

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