@alume/alume-design-system 4.13.21

package/dist/assets/icons/simulation.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const SimulationIcon: React.FunctionComponent<React.SVGAttributes<HTMLOrSVGElement>>;

package/dist/assets/icons/simulation.js

@@ -0,0 +1,5 @@
+import React from "react";
+export const SimulationIcon = (props) => (React.createElement("svg", Object.assign({ height: "16px", width: "16px", version: "1.1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", x: "0", y: "0", viewBox: "0 0 24 24", xmlSpace: "preserve" }, props),
+    React.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
+    React.createElement("path", { className: "st1", d: "M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm1 18c0 .6-.4 1-1 1H4c-.6 0-1-.4-1-1V9.5h18V20zM3 8.5V4c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v4.5H3z" }),
+    React.createElement("path", { className: "st1", d: "M5 14.5h14v1H5zM5 17.5h10v1H5zM5 11.5h14v1H5z" })));

package/dist/assets/icons/trash.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const TrashIcon: React.FunctionComponent<React.SVGAttributes<HTMLOrSVGElement>>;

package/dist/assets/icons/trash.js

@@ -0,0 +1,5 @@
+import React from "react";
+export const TrashIcon = (props) => (React.createElement("svg", Object.assign({ height: "16px", width: "16px", viewBox: "2 2 16 16", version: "1.2", baseProfile: "tiny", overflow: "visible", fill: "currentColor" }, props),
+    React.createElement("path", { fill: "none", d: "M0 0h20v20H0z" }),
+    React.createElement("path", { d: "M18 5h-3V3.8c0-1-.8-1.8-1.8-1.8H6.8C5.8 2 5 2.8 5 3.8V5H2v2h2v9c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7h2V5zM7 4h6v1H7V4zm7 12H6V7h8v9z" }),
+    React.createElement("path", { d: "M7.5 8.5h2v6h-2zM10.5 8.5h2v6h-2z" })));

package/dist/assets/icons/whatsapp.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const WhatsappIcon: React.FunctionComponent<React.SVGAttributes<HTMLOrSVGElement>>;

package/dist/assets/icons/whatsapp.js

@@ -0,0 +1,4 @@
+import React from "react";
+export const WhatsappIcon = (props) => (React.createElement("svg", Object.assign({ height: "64px", width: "64px", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64" }, props),
+    React.createElement("circle", { cx: "32", cy: "32", r: "32", fill: "#25D366" }),
+    React.createElement("path", { d: "M32.3 47.2c-2.8 0-5.3-.7-7.6-1.9L16 48l2.8-8.4c-1.4-2.3-2.3-5.1-2.3-8 0-8.6 7-15.6 15.7-15.6C41 16 48 23 48 31.6s-7 15.6-15.7 15.6m0-28.7c-7.3 0-13.2 5.9-13.2 13.1 0 2.9.9 5.5 2.5 7.7l-1.7 4.9 5.1-1.6c2.1 1.4 4.6 2.2 7.3 2.2 7.3 0 13.2-5.9 13.2-13.1 0-7.3-5.9-13.2-13.2-13.2m7.9 16.7c-.1-.2-.4-.3-.7-.4-.4-.2-2.3-1.1-2.6-1.2-.4-.1-.6-.2-.9.2-.3.4-1 1.2-1.2 1.5-.2.3-.4.3-.8.1-.4-.2-1.6-.6-3.1-1.9-1.1-1-1.9-2.3-2.1-2.6-.2-.4 0-.6.2-.8.2-.2.4-.4.6-.7.2-.2.3-.4.4-.6.1-.3.1-.5 0-.7-.1-.2-.9-2.1-1.2-2.8-.3-.8-.6-.6-.9-.6h-.7c-.3 0-.7.1-1 .5-.4.4-1.3 1.3-1.3 3.2 0 1.9 1.4 3.7 1.6 4 .2.3 2.7 4.2 6.6 5.8 3.9 1.5 3.9 1 4.6 1 .7-.1 2.3-.9 2.6-1.8 0-1.3 0-2.1-.1-2.2", fillRule: "evenodd", clipRule: "evenodd", fill: "#fff" })));

package/dist/components/autocomplete-input/autocompleteInput.component.d.ts

@@ -0,0 +1,11 @@
+import type { Option } from "../../types";
+interface AutocompleteInputProps<T> {
+    value: T;
+    options: Array<Option<T>>;
+    label: string;
+    noOptionsMessage?: string;
+    placeholder?: string;
+    onChange?: (value: T) => void;
+}
+export declare const AutocompleteInput: <T extends unknown>({ placeholder, value, onChange, options, label, noOptionsMessage, ...props }: AutocompleteInputProps<T>) => JSX.Element;
+export {};

package/dist/components/autocomplete-input/autocompleteInput.component.js

@@ -0,0 +1,55 @@
+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, { useEffect, useRef, useState } from "react";
+import { MultiselectContainer, MultiselectLabel, MultiselectOption, MultiselectOptionsContainer, MultiselectSearchContainer, MultiselectSearchInput, MultiselectSelectedValueLabel, } from "./autocompleteInput.styled";
+export const AutocompleteInput = (_a) => {
+    var _b;
+    var { placeholder, value, onChange, options = [], label, noOptionsMessage } = _a, props = __rest(_a, ["placeholder", "value", "onChange", "options", "label", "noOptionsMessage"]);
+    const selectorRef = useRef(null);
+    const inputRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState("");
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (selectorRef.current && !selectorRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setSearchValue("");
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [selectorRef]);
+    const handleOptionClick = (itemValue) => {
+        setIsOpen(false);
+        setSearchValue("");
+        onChange(itemValue);
+    };
+    const handleSearchInputChange = (event) => setSearchValue(event.currentTarget.value);
+    const handleLabelClick = (event) => {
+        var _a;
+        event.stopPropagation();
+        setIsOpen(true);
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const optionsToRender = options
+        .filter(({ label }) => label.toLowerCase().includes(searchValue.toLowerCase()))
+        .map(({ label, value: itemValue }, index) => {
+        return (React.createElement(MultiselectOption, { key: index, selected: value === itemValue, onClick: () => handleOptionClick(itemValue) }, label));
+    });
+    const selectItemLabel = ((_b = options.find(({ value: itemValue }) => value === itemValue)) === null || _b === void 0 ? void 0 : _b.label) || "";
+    return (React.createElement(MultiselectContainer, { ref: selectorRef },
+        React.createElement(MultiselectSearchContainer, null,
+            React.createElement(MultiselectLabel, { onClick: handleLabelClick, riseLabel: isOpen || !!selectItemLabel }, label),
+            React.createElement(MultiselectSearchInput, Object.assign({ ref: inputRef, placeholder: isOpen && placeholder, onChange: handleSearchInputChange, onFocus: () => setIsOpen(true), value: searchValue }, props)),
+            !isOpen && (React.createElement(MultiselectSelectedValueLabel, { onClick: handleLabelClick }, selectItemLabel))),
+        React.createElement(MultiselectOptionsContainer, { isOpen: isOpen }, optionsToRender.length > 0 ? (optionsToRender) : (React.createElement(MultiselectOption, { cursor: "default" }, noOptionsMessage)))));
+};

package/dist/components/autocomplete-input/autocompleteInput.styled.d.ts

@@ -0,0 +1,24 @@
+export declare const MultiselectContainer: import("styled-components").StyledComponent<"div", any, MultiselectSearchContainerProps, never>;
+export interface MultiselectSearchContainerProps {
+    stretch?: boolean;
+    hasLabel?: boolean;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+export declare const MultiselectSearchContainer: import("styled-components").StyledComponent<"div", any, MultiselectSearchContainerProps, never>;
+interface MultiselectLabelProps {
+    riseLabel?: boolean;
+}
+export declare const MultiselectLabel: import("styled-components").StyledComponent<"label", any, MultiselectLabelProps, never>;
+export declare const MultiselectSearchInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const MultiselectSelectedValueLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
+interface MultiselectOptionsContainerProps {
+    isOpen?: boolean;
+}
+export declare const MultiselectOptionsContainer: import("styled-components").StyledComponent<"div", any, MultiselectOptionsContainerProps, never>;
+interface MultiselectOptionProps {
+    cursor?: "default" | "pointer";
+    selected?: boolean;
+}
+export declare const MultiselectOption: import("styled-components").StyledComponent<"div", any, MultiselectOptionProps, never>;
+export {};

package/dist/components/autocomplete-input/autocompleteInput.styled.js

@@ -0,0 +1,89 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+export const MultiselectContainer = styled.div `
+  position: relative;
+`;
+export const MultiselectSearchContainer = styled.div `
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 16px;
+  height: auto;
+  background-color: transparent;
+  border: 0;
+  position: relative;
+  top: 2px;
+  font-size: 16px;
+  color: ${colors.textGreen};
+  border-bottom: 1px solid ${colors.lightGrey};
+  width: ${({ stretch }) => (stretch ? "100%" : "auto")};
+  box-sizing: content-box;
+  cursor: ${({ disabled }) => (!disabled ? "pointer" : "default")};
+
+  &:focus {
+    outline: none;
+  }
+`;
+export const MultiselectLabel = styled.label `
+  position: absolute;
+  color: ${colors.textLightGreen};
+  cursor: pointer;
+  transition: transform 0.4s, font-size 0.4s;
+  transition-timing-function: ease;
+  transform: translateY(0);
+  font-size: 16px;
+  cursor: ${({ riseLabel }) => (riseLabel ? "default" : "text")};
+
+  ${({ riseLabel }) => riseLabel &&
+    `
+    transform: translateY(-17px);
+    font-size: 12px;
+  `}
+`;
+export const MultiselectSearchInput = styled.input `
+  width: 100%;
+  background-color: transparent;
+  border: none;
+`;
+export const MultiselectSelectedValueLabel = styled.label `
+  position: absolute;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+export const MultiselectOptionsContainer = styled.div `
+  max-height: 250px;
+  overflow-y: scroll;
+  height: auto;
+  padding: 4px 0;
+  z-index: 9;
+  position: absolute;
+  top: auto;
+  transform-origin: top left;
+  transform: scale(${({ isOpen }) => (isOpen ? "1" : "0")});
+  transition: transform 0.1s ease-out;
+  transform-style: preserve-3d;
+  width: 100%;
+  background-color: ${colors.white};
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+`;
+export const MultiselectOption = styled.div `
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  padding: 8px;
+  cursor: ${({ cursor = "pointer" }) => cursor};
+
+  ${({ selected }) => `
+    background-color: ${selected ? colors.textGreen : colors.white};
+    color: ${selected ? colors.white : colors.textGreen};
+    
+    &:hover {
+      background-color: ${selected ? colors.textGreen : colors.softGrey} !important;
+    }
+  `}
+`;

package/dist/components/autocomplete-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./autocompleteInput.component";

package/dist/components/autocomplete-input/index.js

@@ -0,0 +1 @@
+export * from "./autocompleteInput.component";

package/dist/components/button/button.component.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const Button: React.FunctionComponent<ButtonProps>;
+export {};

package/dist/components/button/button.component.js

@@ -0,0 +1,16 @@
+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";
+export const Button = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return React.createElement("button", Object.assign({}, props), children);
+};

package/dist/components/button/button.styled.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+declare type ButtonSize = "small" | "normal";
+export interface BasicButtonProps {
+    stretch?: boolean;
+    buttonSize?: ButtonSize;
+}
+export declare const ContainedButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement>>, any, BasicButtonProps, never>;
+export declare const PhantonButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement>>, any, BasicButtonProps, never>;
+export declare const ContainedIconButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement>>, any, BasicButtonProps, never>;
+export declare const CircleIconButtonLarge: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement>>, any, BasicButtonProps, never>;
+interface PhantonIconButtonProps {
+    size?: "normal" | "large";
+}
+export declare const PhantonIconButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement>>, any, BasicButtonProps & PhantonIconButtonProps, never>;
+export declare const LightIconButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement>>, any, BasicButtonProps, never>;
+export {};

package/dist/components/button/button.styled.js

@@ -0,0 +1,113 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+import { Button } from "./button.component";
+const cssByButtonSize = {
+    small: `
+    padding: 13px 35px;
+    font-size: 12px;
+  `,
+    normal: `
+    padding: 16px 40px;
+    font-size: 16px;
+  `,
+};
+const BasicStyledButton = styled(Button) `
+  font-weight: 400;
+  cursor: pointer;
+  border-radius: 8px;
+
+  ${({ buttonSize = "normal" }) => cssByButtonSize[buttonSize]}
+
+  width: ${({ stretch }) => (stretch ? "100%" : "auto")};
+
+  // we need to remove default HTML button styles
+  border: none;
+  background: none;
+
+  &:focus {
+    outline: none;
+  }
+`;
+export const ContainedButton = styled(BasicStyledButton) `
+  background-color: ${colors.darkGreen};
+  color: ${colors.white};
+
+  border: 2px solid ${colors.darkGreen};
+
+  &:hover {
+    background-color: ${colors.green};
+    border-color: ${colors.green};
+    color: ${colors.white};
+  }
+
+  &:disabled {
+    background-color: ${colors.grey};
+    border-color: ${colors.grey};
+    color: ${colors.textGreen};
+    cursor: default;
+  }
+`;
+export const PhantonButton = styled(BasicStyledButton) `
+  color: ${colors.darkGreen};
+
+  border: 2px solid ${colors.darkGreen};
+
+  &:hover {
+    background-color: ${colors.green};
+    border-color: ${colors.green};
+    color: ${colors.white};
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border-color: ${colors.grey};
+    color: ${colors.grey};
+    cursor: default;
+  }
+`;
+export const ContainedIconButton = styled(ContainedButton) `
+  padding: 0;
+  width: 33px;
+  height: 33px;
+  border-radius: 8px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const CircleIconButtonLarge = styled(ContainedButton) `
+  padding: 0;
+  width: 62px;
+  height: 62px;
+
+  border-radius: 50%;
+`;
+export const PhantonIconButton = styled(PhantonButton) `
+  padding: 0;
+  border-radius: 8px;
+
+  ${({ size }) => {
+    const sizeInPixels = size && size === "large" ? 48 : 33;
+    return `
+      width: ${sizeInPixels}px;
+      height: ${sizeInPixels}px;
+    `;
+}}
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border: 2px solid ${colors.darkGreen};
+`;
+export const LightIconButton = styled(BasicStyledButton) `
+  padding: 0;
+  width: 33px;
+  height: 33px;
+  border-radius: 8px;
+  color: ${colors.darkGreen};
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./button.component";
+export * from "./button.styled";

package/dist/components/button/index.js

@@ -0,0 +1,2 @@
+export * from "./button.component";
+export * from "./button.styled";

package/dist/components/card/card.component.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    selected?: boolean;
+    hovered?: boolean;
+}
+export declare const Card: React.FunctionComponent<CardProps>;
+export {};

package/dist/components/card/card.component.js

@@ -0,0 +1,17 @@
+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 { CardContainer } from "./card.styled";
+export const Card = (_a) => {
+    var { children, selected, hovered } = _a, props = __rest(_a, ["children", "selected", "hovered"]);
+    return (React.createElement(CardContainer, Object.assign({ hovered: hovered, selected: selected }, props), children));
+};

package/dist/components/card/card.styled.d.ts

@@ -0,0 +1,6 @@
+interface CardContainerProps {
+    selected?: boolean;
+    hovered?: boolean;
+}
+export declare const CardContainer: import("styled-components").StyledComponent<"div", any, CardContainerProps, never>;
+export {};

package/dist/components/card/card.styled.js

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+export const CardContainer = styled.div `
+  ${({ selected, hovered }) => `
+    border-radius: 8px;
+    border: ${selected
+    ? `2px solid ${colors.green}`
+    : `2px solid${colors.cardBorderGrey}`};
+    width: 100%;
+    box-shadow: ${selected && "4px 4px 12px 0px rgba(0, 0, 0, 0.15)"};
+    :hover {
+      ${hovered &&
+    `
+        border: 2px solid ${colors.lightGreen};
+        cursor: pointer;
+      `}
+    }
+  `}
+`;

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

@@ -0,0 +1 @@
+export * from "./card.component";

package/dist/components/card/index.js

@@ -0,0 +1 @@
+export * from "./card.component";

package/dist/components/checkbox/checkbox.component.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string | JSX.Element;
+}
+export declare const Checkbox: React.FunctionComponent<CheckboxProps>;
+export {};

package/dist/components/checkbox/checkbox.component.js

@@ -0,0 +1,25 @@
+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 { InputWrapper, CheckboxField, Label, LabelText, CheckboxIcon, Check, } from "./checkbox.styled";
+export const Checkbox = (_a) => {
+    var { name, label, checked, onChange } = _a, props = __rest(_a, ["name", "label", "checked", "onChange"]);
+    const handleCheckboxChange = (event) => {
+        event.target.checked = !checked;
+        onChange && onChange(event);
+    };
+    return (React.createElement(InputWrapper, null,
+        React.createElement(CheckboxField, Object.assign({ type: "checkbox", onClick: handleCheckboxChange, id: name, name: name }, props)),
+        React.createElement(Label, { htmlFor: name, onClick: handleCheckboxChange },
+            React.createElement(CheckboxIcon, null, checked && React.createElement(Check, null)),
+            React.createElement(LabelText, null, label))));
+};

package/dist/components/checkbox/checkbox.styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CheckboxField: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const CheckboxIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Check: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").SVGAttributes<HTMLOrSVGElement>>, any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const LabelText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/checkbox/checkbox.styled.js

@@ -0,0 +1,50 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+import { CheckMarkIcon } from "../../assets/icons";
+export const InputWrapper = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: auto;
+`;
+export const CheckboxField = styled.input `
+  cursor: pointer;
+  position: absolute;
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  opacity: 0;
+`;
+export const CheckboxIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+  max-width: 24px;
+  max-height: 24px;
+  border: 2px solid ${colors.green};
+  background-color: transparent;
+  border-radius: 4px;
+  color: ${colors.green};
+`;
+export const Check = styled(CheckMarkIcon) `
+  height: 12px;
+`;
+export const Label = styled.label `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${colors.textGreen};
+  :hover {
+    cursor: pointer;
+  }
+`;
+export const LabelText = styled.div `
+  margin-left: 8px;
+  font-size: 14px;
+  line-height: 1.125rem;
+  font-weight: 400;
+  color: ${colors.darkGreen};
+`;

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

@@ -0,0 +1 @@
+export * from "./checkbox.component";

package/dist/components/checkbox/index.js

@@ -0,0 +1 @@
+export * from "./checkbox.component";

package/dist/components/code-input/codeInput.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface CodeInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    value: string;
+    name: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const CodeInput: React.FunctionComponent<CodeInputProps>;
+export {};

package/dist/components/code-input/codeInput.component.js

@@ -0,0 +1,58 @@
+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, { useRef } from "react";
+import { DigitInput, InputWrapper } from "./codeInput.styled";
+export const CodeInput = (_a) => {
+    var { onChange, value, name } = _a, props = __rest(_a, ["onChange", "value", "name"]);
+    const oneRef = useRef();
+    const twoRef = useRef();
+    const threeRef = useRef();
+    const fourRef = useRef();
+    const [one = "", two = "", three = "", four = ""] = value
+        ? value.split("", 4)
+        : new Array(4).fill("");
+    const handleInputChange = (event) => {
+        event.target.name = name;
+        const newValues = { one, two, three, four };
+        newValues[event.target.id] = event.target.value.slice(0, 4);
+        const { one: newOne, two: newTwo, three: newThree, four: newFour, } = newValues;
+        event.target.value = `${newOne}${newTwo}${newThree}${newFour}`;
+        onChange && onChange(event);
+    };
+    const handleKeyDown = (event) => {
+        const { key } = event;
+        const { id, value } = event.currentTarget;
+        if (value)
+            return;
+        if (key !== "Backspace") {
+            if (id === "one")
+                twoRef === null || twoRef === void 0 ? void 0 : twoRef.current.focus();
+            if (id === "two")
+                threeRef === null || threeRef === void 0 ? void 0 : threeRef.current.focus();
+            if (id === "three")
+                fourRef === null || fourRef === void 0 ? void 0 : fourRef.current.focus();
+        }
+        else {
+            if (id === "four")
+                threeRef === null || threeRef === void 0 ? void 0 : threeRef.current.focus();
+            if (id === "three")
+                twoRef === null || twoRef === void 0 ? void 0 : twoRef.current.focus();
+            if (id === "two")
+                oneRef === null || oneRef === void 0 ? void 0 : oneRef.current.focus();
+        }
+    };
+    return (React.createElement(InputWrapper, Object.assign({}, props),
+        React.createElement(DigitInput, { id: "one", ref: oneRef, autoFocus: true, value: one, onChange: handleInputChange, onKeyDown: handleKeyDown }),
+        React.createElement(DigitInput, { id: "two", ref: twoRef, value: two, onChange: handleInputChange, onKeyDown: handleKeyDown }),
+        React.createElement(DigitInput, { id: "three", ref: threeRef, value: three, onChange: handleInputChange, onKeyDown: handleKeyDown }),
+        React.createElement(DigitInput, { id: "four", ref: fourRef, value: four, onChange: handleInputChange, onKeyDown: handleKeyDown })));
+};

package/dist/components/code-input/codeInput.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DigitInput: import("styled-components").StyledComponent<"input", any, {}, never>;

package/dist/components/code-input/codeInput.styled.js

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+export const InputWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  height: auto;
+  background: transparent;
+  margin: 5px;
+
+  &:focus {
+    outline: 0;
+  }
+`;
+export const DigitInput = styled.input `
+  height: 60px;
+  width: 60px;
+  text-align: center;
+  font-size: 2rem;
+  margin-right: 10px;
+  border: 1px solid ${colors.grey};
+  border-radius: 4px;
+
+  &:focus {
+    border-color: ${colors.lightGreen};
+  }
+`;

package/dist/components/code-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./codeInput.component";