@amboss/design-system 1.5.19 → 1.5.20

package/build/src/components/Form/PasswordInput/PasswordInput.js

@@ -0,0 +1,126 @@
+import { __rest } from '../../../../node_modules/tslib/tslib.es6.js';
+import React, { forwardRef, useState } from 'react';
+import styled from '@emotion/styled';
+import { Icon } from '../../Icon/Icon.js';
+import { FormField } from '../FormField/FormField.js';
+
+/* eslint-disable react/jsx-props-no-spreading */
+const handleBorderColor = (theme, hasError) => {
+    if (hasError)
+        return theme.values.color.border.input.error;
+    return theme.values.color.border.input.default;
+};
+const handleIconBorderColor = (theme, hasError) => {
+    if (hasError)
+        return theme.values.color.border.input.error;
+    return "transparent";
+};
+const handleIconLeftBorderColor = (theme, hasError) => {
+    if (hasError)
+        return theme.values.color.border.input.error;
+    return theme.values.color.border.input.default;
+};
+const StyledContainer = styled.div(() => ({
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    position: "relative",
+    zIndex: 1,
+}));
+const StyledIconBtn = styled.button(({ theme, hasError }) => ({
+    "&[type='button']": {
+        appearance: "none",
+        MozAppearance: "none",
+        WebkitAppearance: "none",
+    },
+    position: "absolute",
+    top: 0,
+    right: 0,
+    zIndex: 2,
+    border: "1px solid",
+    borderColor: handleIconBorderColor(theme, hasError),
+    borderLeftColor: handleIconLeftBorderColor(theme, hasError),
+    padding: theme.variables.size.spacing.s,
+    borderRadius: theme.variables.size.borderRadius.input.s,
+    borderBottomLeftRadius: "0",
+    borderTopLeftRadius: "0",
+    color: theme.values.color.text.button.tertiary.base,
+    backgroundColor: "inherit",
+    cursor: "pointer",
+    "&:hover": {
+        backgroundColor: theme.values.color.background.button.tertiary.hover,
+        color: theme.values.color.text.button.tertiary.hover,
+        borderColor: theme.values.color.border.button.secondary.hover,
+    },
+    "&:active": {
+        backgroundColor: theme.values.color.background.button.tertiary.active,
+        color: theme.values.color.text.button.tertiary.active,
+        borderColor: theme.values.color.border.button.secondary.active,
+    },
+    "&:disabled": {
+        backgroundColor: theme.values.color.background.button.tertiary.disabled,
+        color: theme.values.color.text.button.tertiary.disabled,
+        borderColor: theme.values.color.border.button.secondary.disabled,
+        pointerEvents: "none",
+    },
+    "& svg": {
+        pointerEvents: "none",
+    },
+}));
+const StyledPasswordInput = styled.input(({ theme, hasError }) => ({
+    fontFamily: theme.variables.fontFamily.lato,
+    fontSize: theme.variables.size.font.text.m,
+    lineHeight: theme.variables.size.lineHeight.text.m,
+    borderRadius: theme.variables.size.borderRadius.input.s,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    width: "100%",
+    padding: theme.variables.size.spacing.xs,
+    paddingRight: theme.variables.size.spacing.xxl,
+    boxSizing: "border-box",
+    color: theme.values.color.text.secondary,
+    borderColor: handleBorderColor(theme, hasError),
+    backgroundColor: theme.values.color.background.input.default,
+    "&.error": {
+        borderColor: theme.values.color.border.input.error,
+    },
+    "&.has-icon": {
+        paddingRight: theme.variables.size.spacing.xs + theme.variables.size.font.icon.m,
+    },
+    "&::placeholder": {
+        color: theme.values.color.text.placeholder,
+        opacity: 1,
+    },
+    "&:-ms-input-placeholder": {
+        color: theme.values.color.text.placeholder,
+    },
+    "&::-ms-input-placeholder": {
+        color: theme.values.color.text.placeholder,
+    },
+}));
+const PasswordInputRaw = forwardRef(({ name, value, placeholder, hasError = false, disabled, onChange, onClick, onBlur, onFocus, onIconClick, areaLabel, tabIndex, autoComplete, iconAriaLabel, }, ref) => {
+    const [inputType, setInputType] = useState("password");
+    const currentType = inputType === "password" ? "text" : "password";
+    const eyeIcon = inputType === "password" ? "eye-off" : "eye";
+    return (React.createElement(StyledContainer, null,
+        React.createElement(StyledPasswordInput, { type: inputType, value: value, placeholder: placeholder, name: name, disabled: disabled, onClick: onClick, onChange: onChange, onBlur: onBlur, onFocus: onFocus, "aria-label": areaLabel, ref: ref, tabIndex: tabIndex, autoComplete: autoComplete, hasError: hasError }),
+        React.createElement(StyledIconBtn, { onClick: (e) => {
+                if (disabled) {
+                    e.preventDefault();
+                }
+                if (onIconClick) {
+                    onIconClick(e);
+                }
+                setInputType(currentType);
+            }, hasError: hasError, disabled: disabled, "aria-label": iconAriaLabel, type: "button" },
+            React.createElement(Icon, { name: eyeIcon, size: "s", variant: "tertiary" }))));
+});
+function PasswordInput(_a) {
+    var { name, value, placeholder = "••••••••", hasError = false, onChange, onClick, onBlur, onFocus, onIconClick, type, tabIndex, areaLabel, autoComplete = "on", iconAriaLabel } = _a, rest = __rest(_a, ["name", "value", "placeholder", "hasError", "onChange", "onClick", "onBlur", "onFocus", "onIconClick", "type", "tabIndex", "areaLabel", "autoComplete", "iconAriaLabel"]);
+    return (React.createElement(FormField, Object.assign({}, rest),
+        React.createElement(PasswordInputRaw, { name: name, value: value, type: type, placeholder: placeholder, hasError: hasError, disabled: rest.disabled, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onClick: onClick, onIconClick: onIconClick, tabIndex: tabIndex, areaLabel: areaLabel, autoComplete: autoComplete, iconAriaLabel: iconAriaLabel })));
+}
+
+export { PasswordInput, PasswordInputRaw };
+//# sourceMappingURL=PasswordInput.js.map

package/build/src/components/Form/PasswordInput/PasswordInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.js","sources":["../../../../../../src/components/Form/PasswordInput/PasswordInput.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/build/src/components/Form/Radio/Radio.js

@@ -0,0 +1,82 @@
+import { __rest } from '../../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import styled from '@emotion/styled';
+import { FormField } from '../FormField/FormField.js';
+import { Inline } from '../../Inline/Inline.js';
+import { Text } from '../../Typography/Text/Text.js';
+
+/* eslint-disable react/jsx-props-no-spreading */
+const StyledContainer = styled.div(({ theme }) => ({
+    userSelect: "none",
+    display: "block",
+    position: "relative",
+    width: theme.variables.size.dimension.radio.m,
+    height: theme.variables.size.dimension.radio.m,
+    boxSizing: "border-box",
+}));
+const StyledRealInput = styled.input(() => ({
+    opacity: 0,
+    cursor: "pointer",
+    position: "absolute",
+    width: 0,
+    height: 0,
+}));
+const StyledFakeInput = styled.span(({ theme }) => ({
+    boxSizing: "border-box",
+    width: theme.variables.size.dimension.radio.m,
+    height: theme.variables.size.dimension.radio.m,
+    borderRadius: theme.variables.size.borderRadius.radio.m,
+    border: "2px solid",
+    top: 0,
+    left: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "absolute",
+    cursor: "pointer",
+    background: theme.values.color.background.radio.default,
+    borderColor: theme.values.color.border.radio.default,
+    "& div": {
+        opacity: 0,
+        borderRadius: "50%",
+        width: theme.variables.size.dimension.radioPoint.m,
+        height: theme.variables.size.dimension.radioPoint.m,
+        background: theme.values.color.icon.radio.default,
+    },
+    "&:hover, input:checked + &": {
+        borderColor: theme.values.color.border.radio.defaultHover,
+    },
+    "input:checked + &": {
+        background: theme.values.color.background.radio.checked,
+        "&:hover": {
+            background: theme.values.color.background.radio.checkedHover,
+        },
+        "& div": {
+            opacity: 1,
+        },
+    },
+    "focus-visible + &": {
+        outlineWidth: "2px",
+        outlineStyle: "solid",
+        outlineColor: "Highlight",
+    },
+    "@media (-webkit-min-device-pixel-ratio:0)": {
+        "focus-visible + &": {
+            outlineColor: "-webkit-focus-ring-color",
+            outlineStyle: "auto",
+        },
+    },
+}));
+function Radio(_a) {
+    var { name, value = "", checked = undefined, label = "", disabled = false, onChange, onClick, onBlur, onFocus, "data-e2e-test-id": dataE2eTestId } = _a, rest = __rest(_a, ["name", "value", "checked", "label", "disabled", "onChange", "onClick", "onBlur", "onFocus", "data-e2e-test-id"]);
+    return (React.createElement(FormField, Object.assign({ "data-e2e-test-id": dataE2eTestId }, rest, { disabled: disabled }),
+        React.createElement(Inline, { space: "m", vAlignItems: "top", noWrap: true },
+            React.createElement(StyledContainer, null,
+                React.createElement(StyledRealInput, { type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: onChange, onClick: onClick, onBlur: onBlur, onFocus: onFocus }),
+                React.createElement(StyledFakeInput, null,
+                    React.createElement("div", null))),
+            typeof label === "string" ? React.createElement(Text, null, label) : label)));
+}
+
+export { Radio };
+//# sourceMappingURL=Radio.js.map

package/build/src/components/Form/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../../../../src/components/Form/Radio/Radio.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/build/src/components/Form/RadioButton/RadioButton.js

@@ -0,0 +1,87 @@
+import { __rest } from '../../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import styled from '@emotion/styled';
+import { FormField } from '../FormField/FormField.js';
+import { Icon } from '../../Icon/Icon.js';
+import { Inline } from '../../Inline/Inline.js';
+
+/* eslint-disable react/jsx-props-no-spreading */
+const StyledContainer = styled.div(() => ({
+    userSelect: "none",
+    display: "block",
+    position: "relative",
+    width: "100%",
+    boxSizing: "border-box",
+}));
+const StyledRealInput = styled.input(() => ({
+    opacity: 0,
+    cursor: "pointer",
+    height: 0,
+    width: 0,
+    position: "absolute",
+}));
+const StyledFakeInput = styled.div(({ theme }) => ({
+    cursor: "pointer",
+    textTransform: "none",
+    textDecoration: "none",
+    borderRadius: theme.variables.size.borderRadius.button.m,
+    fontFamily: theme.variables.fontFamily.lato,
+    fontSize: theme.variables.size.font.button.m,
+    fontWeight: theme.variables.weight.bold,
+    lineHeight: theme.variables.size.lineHeight.button.m,
+    "input: focus-visible + &": {
+        outlineWidth: "2px",
+        outlineStyle: "solid",
+        outlineColor: "Highlight",
+    },
+    "@media (-webkit-min-device-pixel-ratio:0)": {
+        "input: focus-visible + &": {
+            outlineColor: "-webkit-focus-ring-color",
+            outlineStyle: "auto",
+        },
+    },
+    "input:not(:checked) + &": {
+        border: "1px solid",
+        padding: `${parseInt(theme.variables.size.spacing.s, 10) - 1}px ${parseInt(theme.variables.size.spacing.l, 10) - 1}px`,
+        backgroundColor: theme.values.color.background.button.secondary.base,
+        borderColor: theme.values.color.border.button.secondary.base,
+        color: theme.values.color.text.button.secondary.base,
+        "&:hover": {
+            backgroundColor: theme.values.color.background.button.secondary.hover,
+            borderColor: theme.values.color.border.button.secondary.hover,
+            color: theme.values.color.text.button.secondary.hover,
+        },
+        "&:active": {
+            backgroundColor: theme.values.color.background.button.secondary.active,
+            borderColor: theme.values.color.border.button.secondary.active,
+            color: theme.values.color.text.button.secondary.active,
+        },
+    },
+    "input:checked + & ": {
+        border: 0,
+        padding: `${theme.variables.size.spacing.s} ${theme.variables.size.spacing.l}`,
+        backgroundColor: theme.values.color.background.button.primary.base,
+        color: theme.values.color.text.button.primary.base,
+        "&:hover": {
+            backgroundColor: theme.values.color.background.button.primary.base,
+            color: theme.values.color.text.button.primary.base,
+        },
+        "&:active": {
+            backgroundColor: theme.values.color.background.button.primary.base,
+            color: theme.values.color.text.button.primary.base,
+        },
+    },
+}));
+function RadioButton(_a) {
+    var { name, value = "", checked = undefined, label = "", icon, disabled = false, onChange, onClick, onBlur, onFocus } = _a, rest = __rest(_a, ["name", "value", "checked", "label", "icon", "disabled", "onChange", "onClick", "onBlur", "onFocus"]);
+    return (React.createElement(FormField, Object.assign({}, rest, { disabled: disabled }),
+        React.createElement(StyledContainer, null,
+            React.createElement(StyledRealInput, { type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: onChange, onClick: onClick, onBlur: onBlur, onFocus: onFocus }),
+            React.createElement(StyledFakeInput, null,
+                React.createElement(Inline, { vAlignItems: "center", alignItems: "spaceBetween", noWrap: true },
+                    label,
+                    icon && React.createElement(Icon, { name: icon }))))));
+}
+
+export { RadioButton };
+//# sourceMappingURL=RadioButton.js.map

package/build/src/components/Form/RadioButton/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","sources":["../../../../../../src/components/Form/RadioButton/RadioButton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;AAqBA,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO;AACxC,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,KAAK,EAAE,MAAM;AACb,IAAA,SAAS,EAAE,YAAY;AACxB,CAAA,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO;AAC1C,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE,CAAC;AACT,IAAA,KAAK,EAAE,CAAC;AACR,IAAA,QAAQ,EAAE,UAAU;AACrB,CAAA,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,KAAK,EAAE,MAAM;AAC5E,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,aAAa,EAAE,MAAM;AACrB,IAAA,cAAc,EAAE,MAAM;IACtB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;AAExD,IAAA,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC5C,IAAA,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;IACvC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AAEpD,IAAA,0BAA0B,EAAE;AAC1B,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,YAAY,EAAE,OAAO;AACrB,QAAA,YAAY,EAAE,WAAW;AAC1B,KAAA;AAED,IAAA,2CAA2C,EAAE;AAC3C,QAAA,0BAA0B,EAAE;AAC1B,YAAA,YAAY,EAAE,0BAA0B;AACxC,YAAA,YAAY,EAAE,MAAM;AACrB,SAAA;AACF,KAAA;AAED,IAAA,yBAAyB,EAAE;AACzB,QAAA,MAAM,EAAE,WAAW;AACnB,QAAA,OAAO,EAAE,CAAA,EAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAA,GAAA,EAC1D,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CACjD,CAAI,EAAA,CAAA;AACJ,QAAA,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI;AACpE,QAAA,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI;AAC5D,QAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI;AAEpD,QAAA,SAAS,EAAE;AACT,YAAA,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK;AACrE,YAAA,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK;AAC7D,YAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK;AACtD,SAAA;AAED,QAAA,UAAU,EAAE;AACV,YAAA,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM;AACtE,YAAA,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM;AAC9D,YAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM;AACvD,SAAA;AACF,KAAA;AACD,IAAA,oBAAoB,EAAE;AACpB,QAAA,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAI,CAAA,EAAA,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAE,CAAA;AAC9E,QAAA,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AAClE,QAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AAElD,QAAA,SAAS,EAAE;AACT,YAAA,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AAClE,YAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AACnD,SAAA;AAED,QAAA,UAAU,EAAE;AACV,YAAA,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AAClE,YAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AACnD,SAAA;AACF,KAAA;AACF,CAAA,CAAC,CAAC,CAAC;AAEE,SAAU,WAAW,CAAC,EAYT,EAAA;AAZS,IAAA,IAAA,EAC1B,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,SAAS,EACnB,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,EAEU,GAAA,EAAA,EADd,IAAI,GAAA,MAAA,CAAA,EAAA,EAXmB,qGAY3B,CADQ,CAAA;IAEP,QACE,oBAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,IAAI,EAAE,EAAA,QAAQ,EAAE,QAAQ,EAAA,CAAA;AACrC,QAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA;AACd,YAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EACd,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA;gBACd,KAAC,CAAA,aAAA,CAAA,MAAM,EAAC,EAAA,WAAW,EAAC,QAAQ,EAAC,UAAU,EAAC,cAAc,EAAC,MAAM,EAAA,IAAA,EAAA;oBAC1D,KAAK;AACL,oBAAA,IAAI,IAAI,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,CACtB,CACO,CACF,CACR,EACZ;AACJ;;;;"}

package/build/src/components/Form/Select/Select.js

@@ -0,0 +1,162 @@
+import { __rest } from '../../../../node_modules/tslib/tslib.es6.js';
+import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import styled from '@emotion/styled';
+import { useKeyboard } from '../../../shared/useKeyboard.js';
+import { useAutoPosition } from '../../../shared/useAutoPosition.js';
+import { FormField } from '../FormField/FormField.js';
+import { VirtualScrollList } from '../../VirtualScrollList/VirtualScrollList.js';
+import { InputRaw, Input } from '../Input/Input.js';
+import { Text } from '../../Typography/Text/Text.js';
+import { Box } from '../../Box/Box.js';
+
+/* eslint-disable react/jsx-props-no-spreading */
+const StyledContainer = styled.div(() => ({
+    position: "relative",
+}));
+const StyledInputWrap = styled.div(() => ({
+    zIndex: 0,
+    position: "absolute",
+    pointerEvents: "none",
+    width: "100%",
+    bottom: 0,
+    left: 0,
+}));
+const StyledDropdown = styled.div(({ theme, dropdownPosition }) => (Object.assign(Object.assign({ backgroundColor: theme.values.color.background.layer_2, position: "absolute", fontSize: theme.variables.size.font.text.s, zIndex: 2, width: "100%", margin: `${theme.variables.size.spacing.xs} 0`, cursor: "pointer", borderRadius: theme.variables.size.borderRadius.dropdown.m, overflow: "hidden", boxShadow: theme.variables.shadow.card.b, boxSizing: "border-box" }, (dropdownPosition === "down" && {
+    top: "100%",
+})), (dropdownPosition === "up" && {
+    bottom: "100%",
+}))));
+const StyledDropdownItem = styled.div(({ theme, active }) => (Object.assign(Object.assign({ padding: theme.variables.size.spacing.xs, borderRadius: theme.variables.size.borderRadius.dropdown.s }, (active && {
+    backgroundColor: theme.values.color.background.dropdown.active,
+    borderRadius: 0,
+})), { "&:hover": {
+        backgroundColor: theme.values.color.background.dropdown.active,
+        borderRadius: 0,
+    } })));
+const HiddenSelectInput = styled.select(() => ({
+    display: "none",
+}));
+const defaultFilterMethod = (option, value) => option.label.toLowerCase().indexOf(value.toLowerCase()) > -1;
+function Select(_a) {
+    var { options = [], name, value, placeholder, emptyStateMessage, hasError, filterMethod = defaultFilterMethod, onChange = () => null, onBlur = () => null, onFocus = () => null, maxHeight = 230, autoComplete = "on" } = _a, rest = __rest(_a, ["options", "name", "value", "placeholder", "emptyStateMessage", "hasError", "filterMethod", "onChange", "onBlur", "onFocus", "maxHeight", "autoComplete"]);
+    const { disabled } = rest;
+    const [isOpen, setIsOpen] = useState(false);
+    const [innerValue, setInnerValue] = useState("");
+    const [preselectedIndex, setPreselectedIndex] = useState(-1);
+    const initialValueOption = useMemo(() => options.find((option) => option.value === value) || {
+        value: "",
+        label: "",
+    }, [options, value]);
+    const [fakeSelectedOption, setFakeSelectedOption] = useState(initialValueOption);
+    const fakeSelectRef = useRef(null);
+    const dropDownRef = useRef(null);
+    const innerInputRef = useRef(null);
+    const currentValueRef = useRef(value);
+    currentValueRef.current = value;
+    const forceChangeFakeSelect = useCallback((selectedOption) => {
+        if (fakeSelectedOption.value !== selectedOption.value) {
+            setFakeSelectedOption(selectedOption);
+        }
+    }, [fakeSelectedOption]);
+    const [verticalPosition] = useAutoPosition(fakeSelectRef, dropDownRef, isOpen);
+    const closeDropdown = useCallback((noSelect = false) => {
+        setIsOpen(false);
+        if (!noSelect) {
+            const selectedOption = options.find((option) => option.label.toLowerCase().trim() ===
+                innerValue.toLowerCase().trim());
+            if (selectedOption) {
+                forceChangeFakeSelect(selectedOption);
+            }
+        }
+        setInnerValue("");
+        setPreselectedIndex(-1);
+        onBlur();
+    }, [onBlur, forceChangeFakeSelect, innerValue, options]);
+    useEffect(() => {
+        if (fakeSelectRef.current &&
+            currentValueRef.current !== fakeSelectedOption.value) {
+            fakeSelectRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+    }, [fakeSelectedOption, fakeSelectRef, currentValueRef]);
+    // force updating the hidden select if a new initial value gets passed down
+    // without it, there would be a mismatch of selected value and the hidden select,
+    // which would cause the first value to not be selectable
+    useEffect(() => {
+        forceChangeFakeSelect(initialValueOption);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialValueOption]);
+    const filteredOptions = useMemo(() => {
+        if (!innerValue) {
+            return options;
+        }
+        return options.filter((option) => filterMethod(option, innerValue));
+    }, [options, filterMethod, innerValue]);
+    const displayValue = useMemo(() => options.some((option) => option.value === value)
+        ? options.find((option) => option.value === value).label
+        : "", [value, options]);
+    useEffect(() => {
+        setPreselectedIndex(-1);
+    }, [filteredOptions]);
+    useKeyboard({
+        Escape: () => closeDropdown(true),
+        Enter: () => {
+            if (filteredOptions[preselectedIndex]) {
+                forceChangeFakeSelect(filteredOptions[preselectedIndex]);
+                closeDropdown(true);
+                return;
+            }
+            closeDropdown();
+        },
+        ArrowUp: () => {
+            setPreselectedIndex(Math.max(preselectedIndex - 1, 0));
+        },
+        ArrowDown: () => {
+            setPreselectedIndex(Math.min(preselectedIndex + 1, filteredOptions.length - 1));
+        },
+    }, innerInputRef, isOpen && !disabled);
+    useKeyboard({
+        "ArrowUp ArrowDown": () => {
+            setIsOpen(true);
+        },
+    }, innerInputRef, !isOpen && !disabled);
+    return (React.createElement(FormField, Object.assign({}, rest),
+        React.createElement(StyledContainer, { onBlur: () => {
+                closeDropdown(true);
+            } },
+            React.createElement("div", { style: { zIndex: 1 } },
+                React.createElement(InputRaw, { areaLabel: rest.label, name: `${name}-innerInput`, value: innerValue, privateProps: { isTransparent: !(isOpen && innerValue) }, icon: isOpen ? "chevron-up" : "chevron-down", hasError: hasError, disabled: disabled, onFocus: () => {
+                        setIsOpen(true);
+                        onFocus();
+                    }, onClick: () => {
+                        setIsOpen(true);
+                    }, onChange: (e) => {
+                        if (e.currentTarget.value) {
+                            setIsOpen(true);
+                        }
+                        setInnerValue(e.currentTarget.value);
+                    }, ref: innerInputRef, autoComplete: autoComplete })),
+            React.createElement(StyledInputWrap, null,
+                React.createElement(Input, { name: name, value: displayValue, onChange: () => null, icon: isOpen ? "chevron-up" : "chevron-down", placeholder: placeholder, tabIndex: -1, autoComplete: "off" })),
+            isOpen && (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            React.createElement(StyledDropdown, { dropdownPosition: verticalPosition, ref: dropDownRef, 
+                // this is to prevent known bug of Chrome when element
+                // loses focus on click on the scrollbar
+                onMouseDown: (e) => e.preventDefault() },
+                React.createElement(VirtualScrollList, { maxHeight: maxHeight, itemHeight: 36, itemAmount: filteredOptions.length, emptyState: () => (React.createElement(Box, { space: "xs" },
+                        React.createElement(Text, null, emptyStateMessage || "🤷🏻‍♀️"))), itemInView: preselectedIndex, itemTemplate: (index) => {
+                        const option = filteredOptions[index];
+                        return (
+                        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                        React.createElement(StyledDropdownItem, { key: option.value, active: preselectedIndex === index || value === option.value, onMouseDown: () => {
+                                forceChangeFakeSelect(option);
+                                closeDropdown(true);
+                            } },
+                            React.createElement(Text, { weight: "bold", variant: "secondary", size: "s" }, option.label)));
+                    } }))),
+            React.createElement(HiddenSelectInput, { onChange: onChange, value: fakeSelectedOption.value, ref: fakeSelectRef, autoComplete: "off" },
+                React.createElement("option", { value: fakeSelectedOption.value }, fakeSelectedOption.label)))));
+}
+
+export { Select };
+//# sourceMappingURL=Select.js.map

package/build/src/components/Form/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../../../src/components/Form/Select/Select.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAAA;AAqBA,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO;AACxC,IAAA,QAAQ,EAAE,UAAU;AACrB,CAAA,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO;AACxC,IAAA,MAAM,EAAE,CAAC;AACT,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,aAAa,EAAE,MAAM;AACrB,IAAA,KAAK,EAAE,MAAM;AACb,IAAA,MAAM,EAAE,CAAC;AACT,IAAA,IAAI,EAAE,CAAC;AACR,CAAA,CAAC,CAAC,CAAC;AAEJ,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAC1B,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,EACtD,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAC1C,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,CAAG,EAAA,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAA,EAAA,CAAI,EAC9C,MAAM,EAAE,SAAS,EACjB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAC1D,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EACxC,SAAS,EAAE,YAAY,EAAA,GACnB,gBAAgB,KAAK,MAAM,IAAI;AACjC,IAAA,GAAG,EAAE,MAAM;AACZ,CAAA,EACE,GAAC,gBAAgB,KAAK,IAAI,IAAI;AAC/B,IAAA,MAAM,EAAE,MAAM;CACf,EAAC,CACF,CACH,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CACnC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAK,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,EACxC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EACvD,GAAC,MAAM,IAAI;IACZ,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM;AAC9D,IAAA,YAAY,EAAE,CAAC;CAChB,EAAC,EAAA,EACF,SAAS,EAAE;QACT,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM;AAC9D,QAAA,YAAY,EAAE,CAAC;AAChB,KAAA,EAAA,CAAA,CACD,CACH,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO;AAC7C,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC,CAAC,CAAC;AAuBJ,MAAM,mBAAmB,GAAG,CAAC,MAAoB,EAAE,KAAa,KAC9D,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAEzD,SAAU,MAAM,CAAC,EAcT,EAAA;QAdS,EACrB,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EACL,WAAW,EACX,iBAAiB,EACjB,QAAQ,EACR,YAAY,GAAG,mBAAmB,EAClC,QAAQ,GAAG,MAAM,IAAI,EACrB,MAAM,GAAG,MAAM,IAAI,EACnB,OAAO,GAAG,MAAM,IAAI,EACpB,SAAS,GAAG,GAAG,EACf,YAAY,GAAG,IAAI,OAEP,EADT,IAAI,GAbc,MAAA,CAAA,EAAA,EAAA,CAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,cAAA,EAAA,UAAA,EAAA,QAAA,EAAA,SAAA,EAAA,WAAA,EAAA,cAAA,CActB,CADQ,CAAA;AAEP,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7D,MAAM,kBAAkB,GAAG,OAAO,CAChC,MACE,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI;AAClD,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,KAAK,EAAE,EAAE;AACV,KAAA,EACH,CAAC,OAAO,EAAE,KAAK,CAAC,CACjB,CAAC;IACF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAC1D,kBAAkB,CACnB,CAAC;AACF,IAAA,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAEnC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACjC,IAAA,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAEnC,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AACtC,IAAA,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;AAEhC,IAAA,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,cAA4B,KAAI;AAC/B,QAAA,IAAI,kBAAkB,CAAC,KAAK,KAAK,cAAc,CAAC,KAAK,EAAE;YACrD,qBAAqB,CAAC,cAAc,CAAC,CAAC;AACvC,SAAA;AACH,KAAC,EACD,CAAC,kBAAkB,CAAC,CACrB,CAAC;AAEF,IAAA,MAAM,CAAC,gBAAgB,CAAC,GAAG,eAAe,CACxC,aAAa,EACb,WAAW,EACX,MAAM,CACP,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,QAAQ,GAAG,KAAK,KAAI;QACnB,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CACjC,CAAC,MAAM,KACL,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE;AACjC,gBAAA,UAAU,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAClC,CAAC;AACF,YAAA,IAAI,cAAc,EAAE;gBAClB,qBAAqB,CAAC,cAAc,CAAC,CAAC;AACvC,aAAA;AACF,SAAA;QACD,aAAa,CAAC,EAAE,CAAC,CAAC;AAClB,QAAA,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;AACxB,QAAA,MAAM,EAAE,CAAC;KACV,EACD,CAAC,MAAM,EAAE,qBAAqB,EAAE,UAAU,EAAE,OAAO,CAAC,CACrD,CAAC;IAEF,SAAS,CAAC,MAAK;QACb,IACE,aAAa,CAAC,OAAO;AACrB,YAAA,eAAe,CAAC,OAAO,KAAK,kBAAkB,CAAC,KAAK,EACpD;AACA,YAAA,aAAa,CAAC,OAAO,CAAC,aAAa,CACjC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CACvC,CAAC;AACH,SAAA;KACF,EAAE,CAAC,kBAAkB,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;;;;IAKzD,SAAS,CAAC,MAAK;QACb,qBAAqB,CAAC,kBAAkB,CAAC,CAAC;;AAE5C,KAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAEzB,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAK;QACnC,IAAI,CAAC,UAAU,EAAE;AACf,YAAA,OAAO,OAAO,CAAC;AAChB,SAAA;AAED,QAAA,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;KACrE,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC;IAExC,MAAM,YAAY,GAAG,OAAO,CAC1B,MACE,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC;AAC9C,UAAE,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,KAAK;UACtD,EAAE,EACR,CAAC,KAAK,EAAE,OAAO,CAAC,CACjB,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1B,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;AAEtB,IAAA,WAAW,CACT;AACE,QAAA,MAAM,EAAE,MAAM,aAAa,CAAC,IAAI,CAAC;QACjC,KAAK,EAAE,MAAK;AACV,YAAA,IAAI,eAAe,CAAC,gBAAgB,CAAC,EAAE;AACrC,gBAAA,qBAAqB,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC,CAAC;gBACzD,aAAa,CAAC,IAAI,CAAC,CAAC;gBACpB,OAAO;AACR,aAAA;AACD,YAAA,aAAa,EAAE,CAAC;SACjB;QACD,OAAO,EAAE,MAAK;AACZ,YAAA,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SACxD;QACD,SAAS,EAAE,MAAK;AACd,YAAA,mBAAmB,CACjB,IAAI,CAAC,GAAG,CAAC,gBAAgB,GAAG,CAAC,EAAE,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAC3D,CAAC;SACH;AACF,KAAA,EACD,aAAa,EACb,MAAM,IAAI,CAAC,QAAQ,CACpB,CAAC;AAEF,IAAA,WAAW,CACT;QACE,mBAAmB,EAAE,MAAK;YACxB,SAAS,CAAC,IAAI,CAAC,CAAC;SACjB;KACF,EACD,aAAa,EACb,CAAC,MAAM,IAAI,CAAC,QAAQ,CACrB,CAAC;AAEF,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,IAAuB,CAAA;AACrC,QAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EACd,MAAM,EAAE,MAAK;gBACX,aAAa,CAAC,IAAI,CAAC,CAAC;aACrB,EAAA;AAED,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAAA;gBACvB,KAAC,CAAA,aAAA,CAAA,QAAQ,EACP,EAAA,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,IAAI,EAAE,CAAG,EAAA,IAAI,aAAa,EAC1B,KAAK,EAAE,UAAU,EACjB,YAAY,EAAE,EAAE,aAAa,EAAE,EAAE,MAAM,IAAI,UAAU,CAAC,EAAE,EACxD,IAAI,EAAE,MAAM,GAAG,YAAY,GAAG,cAAc,EAC5C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,MAAK;wBACZ,SAAS,CAAC,IAAI,CAAC,CAAC;AAChB,wBAAA,OAAO,EAAE,CAAC;AACZ,qBAAC,EACD,OAAO,EAAE,MAAK;wBACZ,SAAS,CAAC,IAAI,CAAC,CAAC;AAClB,qBAAC,EACD,QAAQ,EAAE,CAAC,CAAC,KAAI;AACd,wBAAA,IAAI,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE;4BACzB,SAAS,CAAC,IAAI,CAAC,CAAC;AACjB,yBAAA;AACD,wBAAA,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;qBACtC,EACD,GAAG,EAAE,aAAa,EAClB,YAAY,EAAE,YAAY,EAAA,CAC1B,CACE;AAEN,YAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA;AACd,gBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,MAAM,IAAI,EACpB,IAAI,EAAE,MAAM,GAAG,YAAY,GAAG,cAAc,EAC5C,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,CAAC,CAAC,EACZ,YAAY,EAAC,KAAK,GAClB,CACc;AAEjB,YAAA,MAAM;;YAEL,KAAC,CAAA,aAAA,CAAA,cAAc,IACb,gBAAgB,EAAE,gBAAgB,EAClC,GAAG,EAAE,WAAW;;;gBAGhB,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,EAAA;gBAEtC,KAAC,CAAA,aAAA,CAAA,iBAAiB,EAChB,EAAA,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,EAAE,EACd,UAAU,EAAE,eAAe,CAAC,MAAM,EAClC,UAAU,EAAE,OACV,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,KAAK,EAAC,IAAI,EAAA;AACb,wBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAE,IAAA,EAAA,iBAAiB,IAAI,SAAS,CAAQ,CACzC,CACP,EACD,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EAAE,CAAC,KAAa,KAAI;AAC9B,wBAAA,MAAM,MAAM,GAAiB,eAAe,CAAC,KAAK,CAAC,CAAC;wBACpD;;wBAEE,KAAC,CAAA,aAAA,CAAA,kBAAkB,IACjB,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,MAAM,EACJ,gBAAgB,KAAK,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC,KAAK,EAEtD,WAAW,EAAE,MAAK;gCAChB,qBAAqB,CAAC,MAAM,CAAC,CAAC;gCAC9B,aAAa,CAAC,IAAI,CAAC,CAAC;6BACrB,EAAA;4BAED,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,GAAG,IAC7C,MAAM,CAAC,KAAK,CACR,CACY,EACrB;qBACH,EAAA,CACD,CACa,CAClB;AAED,YAAA,KAAA,CAAA,aAAA,CAAC,iBAAiB,EAChB,EAAA,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,kBAAkB,CAAC,KAAK,EAC/B,GAAG,EAAE,aAAa,EAClB,YAAY,EAAC,KAAK,EAAA;AAElB,gBAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAE,kBAAkB,CAAC,KAAK,EACpC,EAAA,kBAAkB,CAAC,KAAK,CAClB,CACS,CACJ,CACR,EACZ;AACJ;;;;"}

package/build/src/components/Form/Textarea/Textarea.js

@@ -0,0 +1,39 @@
+import { __rest } from '../../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import styled from '@emotion/styled';
+import { FormField } from '../FormField/FormField.js';
+
+const StyledTextarea = styled.textarea(({ theme, resize, hasError }) => ({
+    fontFamily: theme.variables.fontFamily.lato,
+    fontSize: theme.variables.size.font.text.m,
+    lineHeight: theme.variables.size.lineHeight.text.m,
+    minHeight: theme.variables.size.dimension.textarea.minHeight.m,
+    borderRadius: theme.variables.size.borderRadius.textarea.s,
+    border: "1px solid",
+    width: "100%",
+    padding: theme.variables.size.spacing.xs,
+    boxSizing: "border-box",
+    color: theme.values.color.text.secondary,
+    borderColor: hasError
+        ? theme.values.color.border.textarea.error
+        : theme.values.color.border.textarea.default,
+    backgroundColor: theme.values.color.background.textarea.default,
+    resize,
+}));
+const StyledContainer = styled.div(() => ({
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    position: "relative",
+    zIndex: 1,
+}));
+function Textarea(_a) {
+    var { name, value, placeholder, hasError = false, onChange, onClick, onBlur, onFocus, tabIndex, areaLabel, autoComplete = "on", rows = 5, maxLength = 256, resize = "none" } = _a, rest = __rest(_a, ["name", "value", "placeholder", "hasError", "onChange", "onClick", "onBlur", "onFocus", "tabIndex", "areaLabel", "autoComplete", "rows", "maxLength", "resize"]);
+    return (React.createElement(FormField, Object.assign({}, rest),
+        React.createElement(StyledContainer, null,
+            React.createElement(StyledTextarea, { name: name, disabled: rest.disabled, placeholder: placeholder, hasError: hasError, onClick: onClick, onChange: onChange, onBlur: onBlur, onFocus: onFocus, "aria-label": areaLabel, tabIndex: tabIndex, autoComplete: autoComplete, rows: rows, maxLength: maxLength, defaultValue: value, resize: resize }))));
+}
+
+export { Textarea };
+//# sourceMappingURL=Textarea.js.map

package/build/src/components/Form/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../../../../src/components/Form/Textarea/Textarea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AA6BA,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CACpC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;AAChC,IAAA,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AAClD,IAAA,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC9D,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AAC1D,IAAA,MAAM,EAAE,WAAW;AACnB,IAAA,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;AACxC,IAAA,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;AACxC,IAAA,WAAW,EAAE,QAAQ;UACjB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK;UACxC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO;IAC9C,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;IAC/D,MAAM;AACP,CAAA,CAAC,CACH,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO;AACxC,IAAA,KAAK,EAAE,MAAM;AACb,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,aAAa,EAAE,KAAK;AACpB,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,MAAM,EAAE,CAAC;AACV,CAAA,CAAC,CAAC,CAAC;AAEE,SAAU,QAAQ,CAAC,EAgBT,EAAA;AAhBS,IAAA,IAAA,EACvB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,GAAG,IAAI,EACnB,IAAI,GAAG,CAAC,EACR,SAAS,GAAG,GAAG,EACf,MAAM,GAAG,MAAM,EAAA,GAAA,EAED,EADX,IAAI,GAAA,MAAA,CAAA,EAAA,EAfgB,gKAgBxB,CADQ,CAAA;AAEP,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,IAAuB,CAAA;AACrC,QAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA;AACd,YAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAAA,YAAA,EACJ,SAAS,EACrB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,KAAK,EACnB,MAAM,EAAE,MAAM,EAAA,CACd,CACc,CACR,EACZ;AACJ;;;;"}

package/build/src/components/Form/Toggle/Toggle.js

@@ -0,0 +1,86 @@
+import { __rest } from '../../../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import styled from '@emotion/styled';
+import { FormField } from '../FormField/FormField.js';
+import { Inline } from '../../Inline/Inline.js';
+import { Text } from '../../Typography/Text/Text.js';
+
+/* eslint-disable react/jsx-props-no-spreading */
+const StyledContainer = styled.div(({ theme, size, disabled }) => ({
+    display: "block",
+    position: "relative",
+    width: theme.variables.size.dimension.toggle.width[size],
+    height: theme.variables.size.dimension.togglePoint[size],
+    boxSizing: "border-box",
+    cursor: disabled ? "default" : "pointer",
+}));
+const StyledRealInput = styled.input(() => ({
+    opacity: 0,
+    height: 0,
+    width: 0,
+    position: "absolute",
+}));
+const StyledFakeInputInner = styled.div(({ theme, size }) => ({
+    width: theme.variables.size.dimension.togglePoint[size],
+    height: theme.variables.size.dimension.togglePoint[size],
+    margin: parseInt(theme.variables.size.dimension.togglePoint[size], 10) /
+        (size === "m" ? 4 : 2),
+    borderRadius: parseInt(theme.variables.size.dimension.togglePoint[size], 10) / 2,
+    transform: "translateX(0)",
+    transition: "transform 0.2s linear",
+    background: theme.values.color.background.togglePoint.default,
+}));
+const StyledFakeInput = styled.div(({ theme, size, isHighlighted }) => {
+    const pointMargin = parseInt(theme.variables.size.dimension.togglePoint[size], 10) /
+        (size === "m" ? 4 : 2);
+    const pointTranslateX = parseInt(theme.variables.size.dimension.toggle.width[size], 10) -
+        parseInt(theme.variables.size.dimension.togglePoint[size], 10) -
+        2 * pointMargin -
+        2;
+    return Object.assign(Object.assign({ boxSizing: "border-box", width: theme.variables.size.dimension.toggle.width[size], height: theme.variables.size.dimension.toggle.height[size], borderRadius: theme.variables.size.borderRadius.toggle[size], display: "flex", alignItems: "center", transition: "background-color 0.2s linear, border-color 0.2s linear", border: "1px solid", borderColor: isHighlighted
+            ? theme.values.color.border.toggle.highlighted
+            : theme.values.color.border.toggle.default, background: isHighlighted
+            ? theme.values.color.background.toggle.highlighted
+            : theme.values.color.background.toggle.default }, (size === "s" && {
+        marginTop: 2,
+    })), { "input:checked + &": {
+            border: "1px solid",
+            borderColor: theme.values.color.border.toggle.checked,
+            background: theme.values.color.background.toggle.checked,
+            [`${StyledFakeInputInner}`]: {
+                transform: `translateX(${pointTranslateX}px)`,
+            },
+            "&:hover": {
+                borderColor: theme.values.color.border.toggle.hover,
+            },
+        }, "input:disabled + &": {
+            pointerEvents: "none",
+        }, "input:focus-visible + &": {
+            outlineWidth: 2,
+            outlineStyle: "solid",
+            outlineColor: "Highlight",
+        }, "@media (-webkit-min-device-pixel-ratio: 0)": {
+            "input:focus-visible + &": {
+                outlineColor: "-webkit-focus-ring-color",
+                outlineStyle: "auto",
+            },
+        }, "&:hover": {
+            borderColor: theme.values.color.border.toggle.hover,
+        } });
+});
+function Toggle(_a) {
+    var { name, value = "", checked = undefined, label = "", disabled = false, size = "m", isHighlighted = false, alignItems = "left", onChange, onClick, onBlur, onFocus, "data-e2e-test-id": dataE2eTestId } = _a, rest = __rest(_a, ["name", "value", "checked", "label", "disabled", "size", "isHighlighted", "alignItems", "onChange", "onClick", "onBlur", "onFocus", "data-e2e-test-id"]);
+    const spacing = size === "s" ? "xs" : "m";
+    const labelVariant = size === "s" ? "tertiary" : "secondary";
+    const labelWeight = size === "s" ? "bold" : "normal";
+    return (React.createElement(FormField, Object.assign({ "data-e2e-test-id": dataE2eTestId }, rest, { disabled: disabled }),
+        React.createElement(Inline, { alignItems: alignItems, space: spacing, vAlignItems: "top", noWrap: true },
+            label && (React.createElement(Text, { size: size, variant: labelVariant, weight: labelWeight }, label)),
+            React.createElement(StyledContainer, { size: size, disabled: disabled },
+                React.createElement(StyledRealInput, { type: "checkbox", name: name, value: value, checked: checked, disabled: disabled, onChange: onChange, onClick: onClick, onBlur: onBlur, onFocus: onFocus }),
+                React.createElement(StyledFakeInput, { size: size, isHighlighted: isHighlighted },
+                    React.createElement(StyledFakeInputInner, { size: size }))))));
+}
+
+export { Toggle };
+//# sourceMappingURL=Toggle.js.map