@thecb/components 7.5.1 → 7.5.2

package/dist/src/components/atoms/button-with-link/ButtonWithLink.d.ts

@@ -0,0 +1,11 @@
+export default ButtonWithLink;
+declare function ButtonWithLink({ url, disabled, fileLink, extraStyles, linkExtraStyles, newTab, dataQa, ...otherProps }: {
+    [x: string]: any;
+    url?: string | undefined;
+    disabled?: boolean | undefined;
+    fileLink?: boolean | undefined;
+    extraStyles: any;
+    linkExtraStyles: any;
+    newTab?: boolean | undefined;
+    dataQa: any;
+}): JSX.Element;

package/dist/src/components/atoms/button-with-link/ButtonWithLink.js

@@ -0,0 +1,41 @@
+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 * as R from "ramda";
+import { URL_TEST } from "../../../constants/regex_constants";
+import { InternalLink, ExternalLink } from "../link";
+import { safeChildren } from "../../../util/general";
+import ButtonWithAction from "../button-with-action";
+var ButtonWithLink = function (_a) {
+    var _b = _a.url, url = _b === void 0 ? "/" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.fileLink, fileLink = _d === void 0 ? false : _d, extraStyles = _a.extraStyles, linkExtraStyles = _a.linkExtraStyles, _e = _a.newTab, newTab = _e === void 0 ? false : _e, dataQa = _a.dataQa, otherProps = __rest(_a, ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"]);
+    var ButtonWithLinkWrapper = function (_a) {
+        var children = _a.children, url = _a.url, disabled = _a.disabled, newTab = _a.newTab, dataQa = _a.dataQa, extraStyles = _a.extraStyles;
+        if (disabled) {
+            return safeChildren(children, React.createElement("span", null));
+        }
+        return R.test(URL_TEST, url) || fileLink ? (React.createElement(ExternalLink, { href: url, tabIndex: "-1", newTab: newTab, extraStyles: extraStyles, dataQa: dataQa }, safeChildren(children, React.createElement("span", null)))) : (React.createElement(InternalLink, { to: url, tabIndex: "-1", dataQa: dataQa, extraStyles: extraStyles }, safeChildren(children, React.createElement("span", null))));
+    };
+    return (React.createElement(ButtonWithLinkWrapper, { url: url, disabled: disabled, newTab: newTab, extraStyles: "".concat(linkExtraStyles, " text-decoration: none; &:hover {\n        text-decoration: none; }"), dataQa: dataQa },
+        React.createElement(ButtonWithAction, __assign({}, otherProps, { extraStyles: extraStyles }))));
+};
+export default ButtonWithLink;

package/dist/src/components/atoms/button-with-link/ButtonWithLink.stories.d.ts

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

package/dist/src/components/atoms/button-with-link/ButtonWithLink.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import ButtonWithLink from "./ButtonWithLink";
+import page from "../../../../.storybook/page";
+var variants = {
+    primary: "primary",
+    secondary: "secondary",
+    back: "back",
+    smallPrimary: "smallPrimary",
+    smallSecondary: "smallSecondary",
+    ghost: "ghost",
+    smallGhost: "smallGhost",
+    danger: "danger",
+    None: undefined
+};
+export var buttonWithLink = function () { return (React.createElement(ButtonWithLink, { variant: select("variant", variants, "primary", "props"), url: text("url", "/login", "props"), disabled: boolean("disabled", false, "props"), extraStyles: text("extraStyles", "", "props"), text: text("text", "Lorem", "props") })); };
+var story = page({
+    title: "Components|Atoms/ButtonWithLink",
+    Component: ButtonWithLink
+});
+export default story;

package/dist/src/components/atoms/button-with-link/ButtonWithLinkProps.d.ts

@@ -0,0 +1,10 @@
+import ButtonWithActionProps from "../button-with-action/ButtonWithActionProps";
+export default interface ButtonWithLinkProps extends ButtonWithActionProps {
+    url: string;
+    disabled?: boolean;
+    fileLink?: boolean;
+    extraStyles?: string;
+    linkExtraStyles?: string;
+    newTab?: boolean;
+    dataQa?: string;
+}

package/dist/src/components/atoms/button-with-link/ButtonWithLinkProps.js

@@ -0,0 +1,2 @@
+;
+export {};

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

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

package/dist/src/components/atoms/button-with-link/index.js

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

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

@@ -0,0 +1,18 @@
+import React, { Fragment } from "react";
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowSize from "../../withWindowSize";
+import { Box, Stack, Cover } from "../layouts";
+import BoxWithShadow from "../box-with-shadow";
+import { fallbackValues } from "./Card.theme";
+var CardVariantSwitcher = function (_a) {
+    var variant = _a.variant, children = _a.children;
+    return variant === "vertical" ? (React.createElement(Fragment, null, children)) : (React.createElement(Box, { padding: "0", extraStyles: "width: 100%" },
+        React.createElement(Stack, { childGap: "0", maxWidth: "100%", fullHeight: true }, children)));
+};
+var Card = function (_a) {
+    var themeValues = _a.themeValues, variant = _a.variant, children = _a.children;
+    return (React.createElement(BoxWithShadow, { variant: "baseStandard", background: themeValues.backgroundColor, borderRadius: "4px", padding: "5px", margin: "5px", maxWidth: variant !== "vertical" ? "100%" : "306px", minHeight: "100%", minWidth: variant !== "vertical" && "300px" },
+        React.createElement(Cover, { singleChild: true, fillCenter: true },
+            React.createElement(CardVariantSwitcher, { variant: variant }, children))));
+};
+export default themeComponent(withWindowSize(Card), "Card", fallbackValues);

package/dist/src/components/atoms/card/Card.theme.d.ts

@@ -0,0 +1,5 @@
+export namespace fallbackValues {
+    export { backgroundColor };
+}
+declare const backgroundColor: "#FFFFFF";
+export {};

package/dist/src/components/atoms/card/Card.theme.js

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+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, { useState } from "react";
+import styled, { css } from "styled-components";
+import { fallbackValues } from "./Checkbox.theme";
+import { noop } from "../../../util/general";
+import Box from "../layouts/Box";
+import Text from "../text";
+import { themeComponent } from "../../../util/themeUtils";
+var CheckboxContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: middle;\n"], ["\n  display: inline-block;\n  vertical-align: middle;\n"])));
+var CheckboxLabelContainer = styled.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var CheckboxIcon = styled.svg(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  fill: none;\n  stroke-width: 2px;\n  stroke: ", ";\n"], ["\n  fill: none;\n  stroke-width: 2px;\n  stroke: ", ";\n"])), function (_a) {
+    var disabled = _a.disabled, disabledCheckColor = _a.disabledCheckColor, checkColor = _a.checkColor;
+    return disabled
+        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), disabledCheckColor) : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkColor);
+});
+var HiddenCheckbox = styled.input.attrs({ type: "checkbox" })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: 0;\n  clip: rect(0 0 0 0);\n  clippath: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n"], ["\n  border: 0;\n  clip: rect(0 0 0 0);\n  clippath: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n"])));
+var StyledCheckbox = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-block;\n  margin-right: 16px;\n  width: 24px;\n  height: 24px;\n  border-radius: 2px;\n  transition: all 150ms;\n\n  ", " {\n    visibility: ", ";\n  }\n\n  ", ";\n"], ["\n  display: inline-block;\n  margin-right: 16px;\n  width: 24px;\n  height: 24px;\n  border-radius: 2px;\n  transition: all 150ms;\n\n  ", " {\n    visibility: ", ";\n  }\n\n  ", ";\n"])), CheckboxIcon, function (_a) {
+    var checked = _a.checked;
+    return (checked ? "visible" : "hidden");
+}, function (_a) {
+    var error = _a.error, disabled = _a.disabled, checked = _a.checked, focused = _a.focused, defaultStyles = _a.defaultStyles, checkedStyles = _a.checkedStyles, focusedStyles = _a.focusedStyles, errorStyles = _a.errorStyles, disabledStyles = _a.disabledStyles, disabledCheckedStyles = _a.disabledCheckedStyles;
+    return error
+        ? css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          ", " ", "\n        "], ["\n          ", " ", "\n        "])), errorStyles, focused && focusedStyles) : disabled
+        ? css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checked ? disabledCheckedStyles : disabledStyles) : checked
+        ? css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          ", " ", "\n        "], ["\n          ", " ", "\n        "])), checkedStyles, focused && focusedStyles) : css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          ", " ", "\n        "], ["\n          ", " ", "\n        "])), defaultStyles, focused && focusedStyles);
+});
+var Checkbox = function (_a) {
+    var title = _a.title, name = _a.name, checked = _a.checked, _b = _a.onChange, onChange = _b === void 0 ? noop : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, themeValues = _a.themeValues, _d = _a.hidden, hidden = _d === void 0 ? false : _d, _e = _a.error, error = _e === void 0 ? false : _e, extraStyles = _a.extraStyles, textExtraStyles = _a.textExtraStyles;
+    var _f = useState(false), focused = _f[0], setFocused = _f[1];
+    var handleClick = function (e, func) {
+        if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
+            func();
+        }
+    };
+    return (React.createElement(Box, { padding: "0", tabIndex: "0", onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); }, onKeyDown: function (e) { return handleClick(e, onChange); }, hiddenStyles: hidden, background: themeValues.backgroundColor, extraStyles: "outline: none; ".concat(extraStyles) },
+        React.createElement(CheckboxLabelContainer, null,
+            React.createElement(CheckboxContainer, { "data-qa": "Checkbox" },
+                React.createElement(HiddenCheckbox, { id: "checkbox-".concat(name), disabled: disabled, name: name, "aria-label": name, checked: checked, onChange: onChange, tabIndex: "-1", "aria-invalid": error, "aria-describedby": "".concat(name, "-error-message") }),
+                React.createElement(StyledCheckbox, { error: error, disabled: disabled, checked: checked, focused: focused, defaultStyles: themeValues.defaultStyles, checkedStyles: themeValues.checkedStyles, errorStyles: themeValues.errorStyles, disabledStyles: themeValues.disabledStyles, disabledCheckedStyles: themeValues.disabledCheckedStyles, focusedStyles: themeValues.focusedStyles },
+                    React.createElement(CheckboxIcon, { viewBox: "0 0 24 24", disabled: disabled, disabledCheckColor: themeValues.disabledCheckColor, checkColor: themeValues.checkColor },
+                        React.createElement("polyline", { points: "20 6 9 17 4 12" })))),
+            React.createElement(Text, { variant: "p", weight: themeValues.textFontWeight, color: themeValues.textColor, extraStyles: textExtraStyles
+                    ? "".concat(textExtraStyles, " ").concat(disabled &&
+                        "color: #6e727e; background-color: #f7f7f7;", " ")
+                    : "margin-left: 1rem ".concat(disabled &&
+                        "color: #6e727e; background-color: #f7f7f7;") }, title))));
+};
+export default themeComponent(Checkbox, "Checkbox", fallbackValues, "default");
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/src/components/atoms/checkbox/Checkbox.stories.d.ts

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

package/dist/src/components/atoms/checkbox/Checkbox.stories.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import Checkbox from "./Checkbox";
+import page from "../../../../.storybook/page";
+var variantsLabel = "variant";
+var variants = {
+    default: "default"
+};
+var defaultValue = "default";
+var groupId = "props";
+export var checkbox = function () { return (React.createElement(Checkbox, { variant: select(variantsLabel, variants, defaultValue, groupId), title: text("title", "Checkbox", "props"), name: text("name", "Checkbox", "props"), checked: boolean("checked", false, "props"), error: boolean("error", false, "props"), disabled: boolean("disabled", false, "props"), focused: boolean("focused", false, "props") })); };
+var story = page({
+    title: "Components|Atoms/Checkbox",
+    Component: Checkbox
+});
+export default story;

package/dist/src/components/atoms/checkbox/Checkbox.theme.d.ts

@@ -0,0 +1,68 @@
+export namespace fallbackValues {
+    export { backgroundColor };
+    export { textFontSize };
+    export { textFontWeight };
+    export { textLineHeight };
+    export { textColor };
+    export { disabledCheckColor };
+    export { checkColor };
+    export { errorStyles };
+    export { focusedStyles };
+    export { disabledStyles };
+    export { checkedStyles };
+    export { defaultStyles };
+    export { disabledCheckedStyles };
+}
+declare namespace backgroundColor {
+    const _default: string;
+    export { _default as default };
+}
+declare namespace textFontSize {
+    const _default_1: string;
+    export { _default_1 as default };
+}
+declare namespace textFontWeight {
+    const _default_2: string;
+    export { _default_2 as default };
+}
+declare namespace textLineHeight {
+    const _default_3: string;
+    export { _default_3 as default };
+}
+declare namespace textColor {
+    const _default_4: string;
+    export { _default_4 as default };
+}
+declare namespace disabledCheckColor {
+    const _default_5: string;
+    export { _default_5 as default };
+}
+declare namespace checkColor {
+    const _default_6: string;
+    export { _default_6 as default };
+}
+declare namespace errorStyles {
+    const _default_7: string;
+    export { _default_7 as default };
+}
+declare namespace focusedStyles {
+    const _default_8: string;
+    export { _default_8 as default };
+}
+declare namespace disabledStyles {
+    const _default_9: string;
+    export { _default_9 as default };
+}
+declare namespace checkedStyles {
+    const _default_10: string;
+    export { _default_10 as default };
+}
+declare namespace defaultStyles {
+    const _default_11: string;
+    export { _default_11 as default };
+}
+declare namespace disabledCheckedStyles {
+    const _default_12: string;
+    export { _default_12 as default };
+}
+export {};

package/dist/src/components/atoms/checkbox/Checkbox.theme.js

@@ -0,0 +1,39 @@
+import { WHITE, TRANSPARENT, SEASHELL_WHITE, MATISSE_BLUE, RED, CHARADE_GREY, STORM_GREY } from "../../../constants/colors";
+var backgroundColor = { default: "".concat(TRANSPARENT) };
+var textFontSize = { default: "1.1rem" };
+var textFontWeight = { default: "400" };
+var textLineHeight = { default: "2rem" };
+var textColor = { default: "".concat(CHARADE_GREY) };
+var disabledCheckColor = { default: "".concat(WHITE, ";") };
+var checkColor = { default: "".concat(WHITE, ";") };
+var errorStyles = { default: "border: 1px solid ".concat(RED, ";") };
+var focusedStyles = {
+    default: "box-shadow: 0 0 5px 0 ".concat(MATISSE_BLUE, ";")
+};
+var disabledCheckedStyles = {
+    default: "\n  background: #6d717e;\n  border: 1px solid #6d717e;\n"
+};
+var disabledStyles = {
+    default: "\n  background: ".concat(SEASHELL_WHITE, ";\n  border: 1px solid ").concat(STORM_GREY, ";\n")
+};
+var checkedStyles = {
+    default: "\n  background: ".concat(MATISSE_BLUE, ";    \n  border: 1px solid ").concat(MATISSE_BLUE, ";\n")
+};
+var defaultStyles = {
+    default: "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(STORM_GREY, ";\n")
+};
+export var fallbackValues = {
+    backgroundColor: backgroundColor,
+    textFontSize: textFontSize,
+    textFontWeight: textFontWeight,
+    textLineHeight: textLineHeight,
+    textColor: textColor,
+    disabledCheckColor: disabledCheckColor,
+    checkColor: checkColor,
+    errorStyles: errorStyles,
+    focusedStyles: focusedStyles,
+    disabledStyles: disabledStyles,
+    checkedStyles: checkedStyles,
+    defaultStyles: defaultStyles,
+    disabledCheckedStyles: disabledCheckedStyles
+};

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

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

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

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

package/dist/src/components/atoms/checkbox-list/CheckboxList.d.ts

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

package/dist/src/components/atoms/checkbox-list/CheckboxList.js

@@ -0,0 +1,40 @@
+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, { ThemeProvider } from "styled-components";
+import { fallbackValues } from "./CheckboxList.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { RadioButton } from "../../../deprecated";
+import Text from "../text";
+import { noop } from "../../../util/general";
+import { Box, Cluster, Switcher } from "../layouts";
+export var CheckboxItemIcon = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 2rem;\n"], ["\n  width: 2rem;\n"])));
+var HiddenCheckboxInput = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  z-index: -2;\n  cursor: pointer;\n"], ["\n  opacity: 0;\n  position: absolute;\n  z-index: -2;\n  cursor: pointer;\n"])));
+var CheckboxLabel = styled.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  z-index: 5;\n  &:focus {\n    outline: none;\n  }\n"], ["\n  position: relative;\n  z-index: 5;\n  &:focus {\n    outline: none;\n  }\n"])));
+var CheckboxListItem = function (_a) {
+    var text = _a.text, render = _a.render, isSelected = _a.isSelected, onSelect = _a.onSelect, index = _a.index, name = _a.name, imageUrl = _a.imageUrl, image = _a.image, _b = _a.imageAlt, imageAlt = _b === void 0 ? "checkbox icon" : _b, disabled = _a.disabled, borderColor = _a.borderColor, color = _a.color, background = _a.background, radioButtonActive = _a.radioButtonActive, radioButtonInactive = _a.radioButtonInactive;
+    return (React.createElement(Box, { padding: "0.875rem", borderRadius: "4px", minWidth: "30%", onClick: disabled ? noop : onSelect, borderColor: borderColor, borderSize: "1px", color: color, background: background, extraStyles: "cursor: pointer;" },
+        React.createElement(Cluster, { justify: "flex-start", align: "center" },
+            React.createElement(HiddenCheckboxInput, { id: "checkbox-".concat(name, "-").concat(index) }),
+            React.createElement(CheckboxLabel, { name: name, "aria-label": name, htmlFor: "checkbox-".concat(name, "-").concat(index), onClick: disabled ? noop : onSelect, onKeyDown: disabled ? noop : onSelect, tabIndex: 0 },
+                React.createElement(ThemeProvider, { theme: {
+                        accentColor: radioButtonActive,
+                        inactiveColor: radioButtonInactive
+                    } },
+                    React.createElement(RadioButton, { name: name, isSelected: isSelected }))),
+            React.createElement(Box, { padding: "0rem 0.5rem 0rem 0rem", hiddenStyles: !imageUrl },
+                React.createElement(Cluster, { justify: "flex-start", align: "center" },
+                    React.createElement(CheckboxItemIcon, { src: imageUrl, alt: imageAlt }))),
+            React.createElement(Box, { padding: "0rem 0.5rem 0rem 0rem", hiddenStyles: !image },
+                React.createElement(Cluster, { justify: "flex-start", align: "center" }, image)),
+            React.createElement(Text, { variant: "p", isSelected: isSelected }, text ? text : render()))));
+};
+var CheckboxList = function (_a) {
+    var items = _a.items, selectedName = _a.selectedName, onSelect = _a.onSelect, variant = _a.variant, _b = _a.breakpoint, breakpoint = _b === void 0 ? "30rem" : _b, themeValues = _a.themeValues;
+    return (React.createElement(Box, { padding: "0rem", background: themeValues.listBackgroundColor },
+        React.createElement(Switcher, { childGap: "0.5rem", breakpoint: breakpoint, maxChildren: 0 }, items.map(function (item, index) { return (React.createElement(CheckboxListItem, { color: themeValues.listItemColor, background: themeValues.listItemBackgroundColor, borderColor: themeValues.listItemBorderColor, key: "checkbox-item-".concat(item.name), text: item.text, render: item.render, isSelected: item.name === selectedName, onSelect: function (evt) { return onSelect(evt, item); }, index: index, imageUrl: item.imageUrl, image: item.image, name: item.name, disabled: variant === "disabled", radioButtonActive: themeValues.radioButtonActive, radioButtonInactive: themeValues.radioButtonInactive })); }))));
+};
+export default themeComponent(CheckboxList, "CheckboxList", fallbackValues, "default");
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/components/atoms/checkbox-list/CheckboxList.stories.d.ts

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

package/dist/src/components/atoms/checkbox-list/CheckboxList.stories.js

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { select } from "@storybook/addon-knobs";
+import CheckboxList from "./CheckboxList";
+import page from "../../../../.storybook/page";
+var variantsLabel = "variant";
+var variants = {
+    default: "default",
+    disabled: "disabled"
+};
+var defaultValue = "default";
+var groupId = "props";
+var imageUrl = "https://picsum.photos/seed/picsum/200/300";
+var items = [
+    {
+        text: "item 1",
+        name: "item 1 name",
+        imageUrl: imageUrl
+    },
+    {
+        text: "item 2",
+        name: "item 2 name",
+        imageUrl: imageUrl
+    },
+    {
+        text: "item 3",
+        name: "item 3 name",
+        imageUrl: imageUrl
+    }
+];
+export var checkboxList = function () {
+    var _a = useState(false), selected = _a[0], setSelected = _a[1];
+    var setSelectedItem = function (e, item) {
+        setSelected(item.name);
+    };
+    return (React.createElement(CheckboxList, { variant: select(variantsLabel, variants, defaultValue, groupId), items: items, selectedName: selected, onSelect: setSelectedItem }));
+};
+var story = page({
+    title: "Components|Atoms/CheckboxList",
+    Component: CheckboxList
+});
+export default story;

package/dist/src/components/atoms/checkbox-list/CheckboxList.theme.d.ts

@@ -0,0 +1,44 @@
+export namespace fallbackValues {
+    export { listBackgroundColor };
+    export { listItemColor };
+    export { listItemBackgroundColor };
+    export { listItemBorderColor };
+    export { radioButtonActive };
+    export { radioButtonInactive };
+}
+declare namespace listBackgroundColor {
+    const _default: string;
+    export { _default as default };
+    export const disabled: string;
+}
+declare namespace listItemColor {
+    const _default_1: string;
+    export { _default_1 as default };
+    const disabled_1: string;
+    export { disabled_1 as disabled };
+}
+declare namespace listItemBackgroundColor {
+    const _default_2: string;
+    export { _default_2 as default };
+    const disabled_2: string;
+    export { disabled_2 as disabled };
+}
+declare namespace listItemBorderColor {
+    const _default_3: string;
+    export { _default_3 as default };
+    const disabled_3: string;
+    export { disabled_3 as disabled };
+}
+declare namespace radioButtonActive {
+    const _default_4: string;
+    export { _default_4 as default };
+    const disabled_4: string;
+    export { disabled_4 as disabled };
+}
+declare namespace radioButtonInactive {
+    const _default_5: string;
+    export { _default_5 as default };
+    const disabled_5: string;
+    export { disabled_5 as disabled };
+}
+export {};

package/dist/src/components/atoms/checkbox-list/CheckboxList.theme.js

@@ -0,0 +1,33 @@
+import { WHITE, ATHENS_GREY, STORM_GREY, MINESHAFT_GREY, GHOST_GREY, BOSTON_BLUE } from "../../../constants/colors";
+var listBackgroundColor = {
+    default: "".concat(ATHENS_GREY),
+    disabled: "".concat(WHITE)
+};
+var listItemColor = {
+    default: "".concat(MINESHAFT_GREY),
+    disabled: "".concat(STORM_GREY)
+};
+var listItemBackgroundColor = {
+    default: "".concat(WHITE),
+    disabled: "".concat(ATHENS_GREY)
+};
+var listItemBorderColor = {
+    default: "".concat(GHOST_GREY),
+    disabled: "".concat(GHOST_GREY)
+};
+var radioButtonActive = {
+    default: "".concat(BOSTON_BLUE),
+    disabled: "".concat(GHOST_GREY)
+};
+var radioButtonInactive = {
+    default: "".concat(GHOST_GREY),
+    disabled: "".concat(GHOST_GREY)
+};
+export var fallbackValues = {
+    listBackgroundColor: listBackgroundColor,
+    listItemColor: listItemColor,
+    listItemBackgroundColor: listItemBackgroundColor,
+    listItemBorderColor: listItemBorderColor,
+    radioButtonActive: radioButtonActive,
+    radioButtonInactive: radioButtonInactive
+};

package/dist/src/components/atoms/checkbox-list/index.d.ts

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

package/dist/src/components/atoms/checkbox-list/index.js

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

package/dist/src/components/atoms/country-dropdown/CountryDropdown.d.ts

@@ -0,0 +1,9 @@
+export default CountryDropdown;
+declare function CountryDropdown({ labelTextWhenNoError, errorMessages, field, fieldActions, showErrors, onChange }: {
+    labelTextWhenNoError: any;
+    errorMessages: any;
+    field: any;
+    fieldActions: any;
+    showErrors: any;
+    onChange: any;
+}): JSX.Element;

package/dist/src/components/atoms/country-dropdown/CountryDropdown.js

@@ -0,0 +1,8 @@
+import React from "react";
+import FormSelect from "../form-select";
+import { options } from "./options";
+var CountryDropdown = function (_a) {
+    var labelTextWhenNoError = _a.labelTextWhenNoError, errorMessages = _a.errorMessages, field = _a.field, fieldActions = _a.fieldActions, showErrors = _a.showErrors, onChange = _a.onChange;
+    return (React.createElement(FormSelect, { options: options, field: field, fieldActions: fieldActions, labelTextWhenNoError: labelTextWhenNoError, errorMessages: errorMessages, showErrors: showErrors, onChange: onChange, autocompleteValue: "country-name" }));
+};
+export default CountryDropdown;

package/dist/src/components/atoms/country-dropdown/CountryDropdown.stories.d.ts

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

package/dist/src/components/atoms/country-dropdown/CountryDropdown.stories.js

@@ -0,0 +1,31 @@
+var _a;
+import React from "react";
+import { connect } from "react-redux";
+import { createFormState, required } from "redux-freeform";
+import { Box } from "../../atoms/layouts";
+import CountryDropdown from "./CountryDropdown";
+import { options } from "./options";
+import page from "../../../../.storybook/page";
+var _b = createFormState({
+    country: {
+        validators: [required()]
+    }
+}), mapStateToProps = _b.mapStateToProps, mapDispatchToProps = _b.mapDispatchToProps, reducer = _b.reducer;
+var errorMessages = (_a = {},
+    _a[required.error] = "country is required",
+    _a);
+var story = page({
+    title: "Components|Atoms/CountryDropdown",
+    Component: CountryDropdown,
+    reducer: reducer,
+    mapStateToProps: mapStateToProps,
+    mapDispatchToProps: mapDispatchToProps
+});
+var CountryFormWrapper = function (_a) {
+    var fields = _a.fields, actions = _a.actions;
+    return (React.createElement(Box, { minHeight: "300px" },
+        React.createElement(CountryDropdown, { errorMessages: errorMessages, options: options, field: fields.country, fieldActions: actions.fields.country })));
+};
+export default story;
+var ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(CountryFormWrapper);
+export var countryDropdown = function () { return React.createElement(ConnectedForm, null); };

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

@@ -0,0 +1 @@
+export { default } from "./CountryDropdown";

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

@@ -0,0 +1 @@
+export { default } from "./CountryDropdown";

package/dist/src/components/atoms/country-dropdown/options.d.ts

@@ -0,0 +1,4 @@
+export const options: {
+    text: string;
+    value: string;
+}[];