no-frills-ui 0.0.14-alpha.4 → 0.0.14-alpha.6

package/lib-esm/components/Input/Checkbox.js

@@ -1,124 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-const Label = styled.label `
-    margin: 5px 0;
-    position: relative;
-`;
-const Input = styled.input `
-    appearance: none;
-    position: relative;
-    margin: 0;
-
-    &::before {
-        content: '';
-        width: 16px;
-        height: 16px;
-        border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-        display: inline-block;
-        border-radius: 3px;
-        vertical-align: bottom;
-        margin: 0 5px;
-        text-align: center;
-        line-height: 16px;
-        background-color: var(--background, ${constants.BACKGROUND});
-        transition: background-color 0.3s ease;
-    }
-
-    &::after {
-        content: '';
-        width: 3px;
-        height: 10px;
-        border-right: 2px solid #fff;
-        border-bottom: 2px solid #fff;
-        transform: translate(-16px, 1px);
-        opacity: 0;
-        transition: transform 0.3s ease;
-        position: absolute;
-    }
-
-    /** checked */
-    &:checked::before {
-        content: '';
-        background-color: var(--primary, ${constants.PRIMARY});
-        border-color: var(--primary, ${constants.PRIMARY});
-        color: #fff;
-    }
-
-    &:checked::after {
-        opacity: 1;
-        transform: translate(-16px, 2px) rotate(45deg);
-    }
-
-    /** indeterminate */
-    &:indeterminate::before {
-        content: '';
-        background-color: var(--primary, ${constants.PRIMARY});
-        border-color: var(--primary, ${constants});
-        color: #fff;
-    }
-
-    &:indeterminate::after {
-        width: 0;
-        opacity: 1;
-        transform: translate(-15px, 3px) rotate(90deg);
-    }
-
-    /** active and focus */
-    &:enabled:active::before,
-    &:focus::before {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
-    }
-
-    &:enabled:active + span,
-    &:focus + span {
-        color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /** hover */
-    &:enabled:hover::before {
-        border-color: var(--primary, ${constants.PRIMARY});
-    }
-
-    &:enabled:hover + span {
-        color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /** disabled */
-    &:disabled::before {
-        border-color: #aaa;
-    }
-
-    &:disabled + span {
-        color: #aaa;
-    }
-
-    &:checked:disabled::before,
-    &:indeterminate:disabled::before {
-        background-color: #aaa;
-    }
-`;
-export default function Checkbox(props) {
-    const ref = useCallback((node) => {
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+
+const Label = /*#__PURE__*/ styled("label", {
+    target: "e16qfxit0",
+    label: "Label"
+})("margin:5px 0;position:relative;display:inline-flex;align-items:center;cursor:pointer;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9JbnB1dC9DaGVja2JveC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL25vLWZyaWxscy11aS9uby1mcmlsbHMtdWkvc3JjL2NvbXBvbmVudHMvSW5wdXQvQ2hlY2tib3gudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VDYWxsYmFjayB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBnZXRUaGVtZVZhbHVlLCBUSEVNRV9OQU1FIH0gZnJvbSAnLi4vLi4vc2hhcmVkL2NvbnN0YW50cyc7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmxhYmVsYFxuICAgIG1hcmdpbjogNXB4IDA7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuYDtcblxuY29uc3QgU3R5bGVkQ2hlY2ttYXJrID0gc3R5bGVkLnNwYW5gXG4gICAgd2lkdGg6IDE2cHg7XG4gICAgaGVpZ2h0OiAxNnB4O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkJPUkRFUl9DT0xPUil9O1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgbWFyZ2luLXJpZ2h0OiA1cHg7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQkFDS0dST1VORCl9O1xuICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZsZXgtc2hyaW5rOiAwO1xuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDNweDtcbiAgICAgICAgaGVpZ2h0OiAxMHB4O1xuICAgICAgICBib3JkZXItcmlnaHQ6IDJweCBzb2xpZCAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5URVhUX0NPTE9SX0xJR0hUKX07XG4gICAgICAgIGJvcmRlci1ib3R0b206IDJweCBzb2xpZCAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5URVhUX0NPTE9SX0xJR0hUKX07XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgdG9wOiAxcHg7XG4gICAgICAgIGxlZnQ6IDZweDtcbiAgICAgICAgb3BhY2l0eTogMDtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoNDVkZWcpIHNjYWxlKDApO1xuICAgICAgICB0cmFuc2l0aW9uOiBhbGwgMC4ycyBlYXNlO1xuICAgIH1cbmA7XG5cbmNvbnN0IEhpZGRlbklucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIG9wYWNpdHk6IDA7XG4gICAgd2lkdGg6IDA7XG4gICAgaGVpZ2h0OiAwO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBtYXJnaW46IDA7XG5cbiAgICAvKiogY2hlY2tlZCAqL1xuICAgICY6Y2hlY2tlZCArICR7U3R5bGVkQ2hlY2ttYXJrfSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgJjpjaGVja2VkICsgJHtTdHlsZWRDaGVja21hcmt9OjphZnRlciB7XG4gICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDQ1ZGVnKSBzY2FsZSgxKTtcbiAgICB9XG5cbiAgICAvKiogaW5kZXRlcm1pbmF0ZSAqL1xuICAgICY6aW5kZXRlcm1pbmF0ZSArICR7U3R5bGVkQ2hlY2ttYXJrfSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgJjppbmRldGVybWluYXRlICsgJHtTdHlsZWRDaGVja21hcmt9OjphZnRlciB7XG4gICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIGhlaWdodDogMDtcbiAgICAgICAgd2lkdGg6IDhweDtcbiAgICAgICAgYm9yZGVyLXJpZ2h0OiBub25lO1xuICAgICAgICBib3JkZXItYm90dG9tOiAycHggc29saWQgJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuVEVYVF9DT0xPUl9MSUdIVCl9O1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKSBzY2FsZSgxKTtcbiAgICAgICAgdG9wOiA3cHg7XG4gICAgICAgIGxlZnQ6IDRweDtcbiAgICB9XG5cbiAgICAvKiogYWN0aXZlIGFuZCBmb2N1cyAqL1xuICAgICY6ZW5hYmxlZDphY3RpdmUgKyAke1N0eWxlZENoZWNrbWFya30sICY6Zm9jdXMgKyAke1N0eWxlZENoZWNrbWFya30ge1xuICAgICAgICBib3JkZXItY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICAgICAgYm94LXNoYWRvdzogMCAwIDAgM3B4ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUllfTElHSFQpfTtcbiAgICB9XG5cbiAgICAmOmVuYWJsZWQ6YWN0aXZlIH4gc3BhbixcbiAgICAmOmZvY3VzIH4gc3BhbiB7XG4gICAgICAgIGNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgLyoqIGhvdmVyICovXG4gICAgJjplbmFibGVkOmhvdmVyICsgJHtTdHlsZWRDaGVja21hcmt9IHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgJjplbmFibGVkOmhvdmVyIH4gc3BhbiB7XG4gICAgICAgIGNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgLyoqIGRpc2FibGVkICovXG4gICAgJjpkaXNhYmxlZCArICR7U3R5bGVkQ2hlY2ttYXJrfSB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRURfQk9SREVSKX07XG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCB+IHNwYW4ge1xuICAgICAgICBjb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRUQpfTtcbiAgICAgICAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbiAgICB9XG5cbiAgICAmOmNoZWNrZWQ6ZGlzYWJsZWQgKyAke1N0eWxlZENoZWNrbWFya30sICY6aW5kZXRlcm1pbmF0ZTpkaXNhYmxlZCArICR7U3R5bGVkQ2hlY2ttYXJrfSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkRJU0FCTEVEKX07XG4gICAgfVxuYDtcblxudHlwZSBDaGVja2JveFByb3BzID0gT21pdDxSZWFjdC5IVE1MUHJvcHM8SFRNTElucHV0RWxlbWVudD4sICdhcyc+ICZcbiAgICBQcm9wVHlwZXMuSW5mZXJQcm9wczx0eXBlb2YgQ2hlY2tib3gucHJvcFR5cGVzPjtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQ2hlY2tib3gocHJvcHM6IENoZWNrYm94UHJvcHMpIHtcbiAgICBjb25zdCByZWYgPSB1c2VDYWxsYmFjayhcbiAgICAgICAgKG5vZGU6IHVua25vd24pID0+IHtcbiAgICAgICAgICAgIGlmIChub2RlICE9PSBudWxsKSB7XG4gICAgICAgICAgICAgICAgaWYgKHByb3BzLmluZGV0ZXJtaW5hdGUpIHtcbiAgICAgICAgICAgICAgICAgICAgKG5vZGUgYXMgSFRNTElucHV0RWxlbWVudCkuaW5kZXRlcm1pbmF0ZSA9IHRydWU7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBbcHJvcHMuaW5kZXRlcm1pbmF0ZV0sXG4gICAgKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxMYWJlbD5cbiAgICAgICAgICAgIDxIaWRkZW5JbnB1dFxuICAgICAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgICAgIGFyaWEtY2hlY2tlZD17cHJvcHMuaW5kZXRlcm1pbmF0ZSA/ICdtaXhlZCcgOiBwcm9wcy5jaGVja2VkfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDxTdHlsZWRDaGVja21hcmsgLz5cbiAgICAgICAgICAgIDxzcGFuPntwcm9wcy5sYWJlbH08L3NwYW4+XG4gICAgICAgIDwvTGFiZWw+XG4gICAgKTtcbn1cblxuQ2hlY2tib3gucHJvcFR5cGVzID0ge1xuICAgIC8qKiBMYWJlbCBmb3IgdGhlIGZpZWxkICovXG4gICAgbGFiZWw6IFByb3BUeXBlcy5zdHJpbmcsXG4gICAgLyoqIElmIHRoZSBmaWVsZCBpcyBpbiBpbmRldGVybWluYXRlIHN0YXRlICovXG4gICAgaW5kZXRlcm1pbmF0ZTogUHJvcFR5cGVzLmJvb2wsXG59O1xuXG5DaGVja2JveC5kZWZhdWx0UHJvcHMgPSB7XG4gICAgaW5kZXRlcm1pbmF0ZTogZmFsc2UsXG4gICAgbGFiZWw6ICcnLFxufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLYyJ9 */");
+const StyledCheckmark = /*#__PURE__*/ styled("span", {
+    target: "e16qfxit1",
+    label: "StyledCheckmark"
+})("width:16px;height:16px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";display:inline-block;border-radius:3px;margin-right:5px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:all 0.3s ease;position:relative;flex-shrink:0;&::after{content:'';width:3px;height:10px;border-right:2px solid ", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-bottom:2px solid ", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";position:absolute;top:1px;left:6px;opacity:0;transform:rotate(45deg) scale(0);transition:all 0.2s ease;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9JbnB1dC9DaGVja2JveC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL25vLWZyaWxscy11aS9uby1mcmlsbHMtdWkvc3JjL2NvbXBvbmVudHMvSW5wdXQvQ2hlY2tib3gudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VDYWxsYmFjayB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBnZXRUaGVtZVZhbHVlLCBUSEVNRV9OQU1FIH0gZnJvbSAnLi4vLi4vc2hhcmVkL2NvbnN0YW50cyc7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmxhYmVsYFxuICAgIG1hcmdpbjogNXB4IDA7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuYDtcblxuY29uc3QgU3R5bGVkQ2hlY2ttYXJrID0gc3R5bGVkLnNwYW5gXG4gICAgd2lkdGg6IDE2cHg7XG4gICAgaGVpZ2h0OiAxNnB4O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkJPUkRFUl9DT0xPUil9O1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgbWFyZ2luLXJpZ2h0OiA1cHg7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQkFDS0dST1VORCl9O1xuICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZsZXgtc2hyaW5rOiAwO1xuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDNweDtcbiAgICAgICAgaGVpZ2h0OiAxMHB4O1xuICAgICAgICBib3JkZXItcmlnaHQ6IDJweCBzb2xpZCAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5URVhUX0NPTE9SX0xJR0hUKX07XG4gICAgICAgIGJvcmRlci1ib3R0b206IDJweCBzb2xpZCAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5URVhUX0NPTE9SX0xJR0hUKX07XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgdG9wOiAxcHg7XG4gICAgICAgIGxlZnQ6IDZweDtcbiAgICAgICAgb3BhY2l0eTogMDtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoNDVkZWcpIHNjYWxlKDApO1xuICAgICAgICB0cmFuc2l0aW9uOiBhbGwgMC4ycyBlYXNlO1xuICAgIH1cbmA7XG5cbmNvbnN0IEhpZGRlbklucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIG9wYWNpdHk6IDA7XG4gICAgd2lkdGg6IDA7XG4gICAgaGVpZ2h0OiAwO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBtYXJnaW46IDA7XG5cbiAgICAvKiogY2hlY2tlZCAqL1xuICAgICY6Y2hlY2tlZCArICR7U3R5bGVkQ2hlY2ttYXJrfSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgJjpjaGVja2VkICsgJHtTdHlsZWRDaGVja21hcmt9OjphZnRlciB7XG4gICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDQ1ZGVnKSBzY2FsZSgxKTtcbiAgICB9XG5cbiAgICAvKiogaW5kZXRlcm1pbmF0ZSAqL1xuICAgICY6aW5kZXRlcm1pbmF0ZSArICR7U3R5bGVkQ2hlY2ttYXJrfSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgJjppbmRldGVybWluYXRlICsgJHtTdHlsZWRDaGVja21hcmt9OjphZnRlciB7XG4gICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIGhlaWdodDogMDtcbiAgICAgICAgd2lkdGg6IDhweDtcbiAgICAgICAgYm9yZGVyLXJpZ2h0OiBub25lO1xuICAgICAgICBib3JkZXItYm90dG9tOiAycHggc29saWQgJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuVEVYVF9DT0xPUl9MSUdIVCl9O1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKSBzY2FsZSgxKTtcbiAgICAgICAgdG9wOiA3cHg7XG4gICAgICAgIGxlZnQ6IDRweDtcbiAgICB9XG5cbiAgICAvKiogYWN0aXZlIGFuZCBmb2N1cyAqL1xuICAgICY6ZW5hYmxlZDphY3RpdmUgKyAke1N0eWxlZENoZWNrbWFya30sICY6Zm9jdXMgKyAke1N0eWxlZENoZWNrbWFya30ge1xuICAgICAgICBib3JkZXItY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICAgICAgYm94LXNoYWRvdzogMCAwIDAgM3B4ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUllfTElHSFQpfTtcbiAgICB9XG5cbiAgICAmOmVuYWJsZWQ6YWN0aXZlIH4gc3BhbixcbiAgICAmOmZvY3VzIH4gc3BhbiB7XG4gICAgICAgIGNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgLyoqIGhvdmVyICovXG4gICAgJjplbmFibGVkOmhvdmVyICsgJHtTdHlsZWRDaGVja21hcmt9IHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgJjplbmFibGVkOmhvdmVyIH4gc3BhbiB7XG4gICAgICAgIGNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgLyoqIGRpc2FibGVkICovXG4gICAgJjpkaXNhYmxlZCArICR7U3R5bGVkQ2hlY2ttYXJrfSB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRURfQk9SREVSKX07XG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCB+IHNwYW4ge1xuICAgICAgICBjb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRUQpfTtcbiAgICAgICAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbiAgICB9XG5cbiAgICAmOmNoZWNrZWQ6ZGlzYWJsZWQgKyAke1N0eWxlZENoZWNrbWFya30sICY6aW5kZXRlcm1pbmF0ZTpkaXNhYmxlZCArICR7U3R5bGVkQ2hlY2ttYXJrfSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkRJU0FCTEVEKX07XG4gICAgfVxuYDtcblxudHlwZSBDaGVja2JveFByb3BzID0gT21pdDxSZWFjdC5IVE1MUHJvcHM8SFRNTElucHV0RWxlbWVudD4sICdhcyc+ICZcbiAgICBQcm9wVHlwZXMuSW5mZXJQcm9wczx0eXBlb2YgQ2hlY2tib3gucHJvcFR5cGVzPjtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQ2hlY2tib3gocHJvcHM6IENoZWNrYm94UHJvcHMpIHtcbiAgICBjb25zdCByZWYgPSB1c2VDYWxsYmFjayhcbiAgICAgICAgKG5vZGU6IHVua25vd24pID0+IHtcbiAgICAgICAgICAgIGlmIChub2RlICE9PSBudWxsKSB7XG4gICAgICAgICAgICAgICAgaWYgKHByb3BzLmluZGV0ZXJtaW5hdGUpIHtcbiAgICAgICAgICAgICAgICAgICAgKG5vZGUgYXMgSFRNTElucHV0RWxlbWVudCkuaW5kZXRlcm1pbmF0ZSA9IHRydWU7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBbcHJvcHMuaW5kZXRlcm1pbmF0ZV0sXG4gICAgKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxMYWJlbD5cbiAgICAgICAgICAgIDxIaWRkZW5JbnB1dFxuICAgICAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgICAgIGFyaWEtY2hlY2tlZD17cHJvcHMuaW5kZXRlcm1pbmF0ZSA/ICdtaXhlZCcgOiBwcm9wcy5jaGVja2VkfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDxTdHlsZWRDaGVja21hcmsgLz5cbiAgICAgICAgICAgIDxzcGFuPntwcm9wcy5sYWJlbH08L3NwYW4+XG4gICAgICAgIDwvTGFiZWw+XG4gICAgKTtcbn1cblxuQ2hlY2tib3gucHJvcFR5cGVzID0ge1xuICAgIC8qKiBMYWJlbCBmb3IgdGhlIGZpZWxkICovXG4gICAgbGFiZWw6IFByb3BUeXBlcy5zdHJpbmcsXG4gICAgLyoqIElmIHRoZSBmaWVsZCBpcyBpbiBpbmRldGVybWluYXRlIHN0YXRlICovXG4gICAgaW5kZXRlcm1pbmF0ZTogUHJvcFR5cGVzLmJvb2wsXG59O1xuXG5DaGVja2JveC5kZWZhdWx0UHJvcHMgPSB7XG4gICAgaW5kZXRlcm1pbmF0ZTogZmFsc2UsXG4gICAgbGFiZWw6ICcnLFxufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhd0IifQ== */");
+const HiddenInput = /*#__PURE__*/ styled("input", {
+    target: "e16qfxit2",
+    label: "HiddenInput"
+})("opacity:0;width:0;height:0;position:absolute;margin:0;&:checked + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:checked + ", StyledCheckmark, "::after{opacity:1;transform:rotate(45deg) scale(1);}&:indeterminate + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:indeterminate + ", StyledCheckmark, "::after{opacity:1;height:0;width:8px;border-right:none;border-bottom:2px solid ", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";transform:rotate(0deg) scale(1);top:7px;left:4px;}&:enabled:active + ", StyledCheckmark, ",&:focus + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:enabled:active ~ span,&:focus ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:enabled:hover ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled + ", StyledCheckmark, "{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";cursor:not-allowed;}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED), ";cursor:not-allowed;}&:checked:disabled + ", StyledCheckmark, ",&:indeterminate:disabled + ", StyledCheckmark, "{background-color:", getThemeValue(THEME_NAME.DISABLED), ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9JbnB1dC9DaGVja2JveC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL25vLWZyaWxscy11aS9uby1mcmlsbHMtdWkvc3JjL2NvbXBvbmVudHMvSW5wdXQvQ2hlY2tib3gudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VDYWxsYmFjayB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBnZXRUaGVtZVZhbHVlLCBUSEVNRV9OQU1FIH0gZnJvbSAnLi4vLi4vc2hhcmVkL2NvbnN0YW50cyc7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmxhYmVsYFxuICAgIG1hcmdpbjogNXB4IDA7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuYDtcblxuY29uc3QgU3R5bGVkQ2hlY2ttYXJrID0gc3R5bGVkLnNwYW5gXG4gICAgd2lkdGg6IDE2cHg7XG4gICAgaGVpZ2h0OiAxNnB4O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkJPUkRFUl9DT0xPUil9O1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgbWFyZ2luLXJpZ2h0OiA1cHg7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuQkFDS0dST1VORCl9O1xuICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZsZXgtc2hyaW5rOiAwO1xuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDNweDtcbiAgICAgICAgaGVpZ2h0OiAxMHB4O1xuICAgICAgICBib3JkZXItcmlnaHQ6IDJweCBzb2xpZCAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5URVhUX0NPTE9SX0xJR0hUKX07XG4gICAgICAgIGJvcmRlci1ib3R0b206IDJweCBzb2xpZCAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5URVhUX0NPTE9SX0xJR0hUKX07XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgdG9wOiAxcHg7XG4gICAgICAgIGxlZnQ6IDZweDtcbiAgICAgICAgb3BhY2l0eTogMDtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoNDVkZWcpIHNjYWxlKDApO1xuICAgICAgICB0cmFuc2l0aW9uOiBhbGwgMC4ycyBlYXNlO1xuICAgIH1cbmA7XG5cbmNvbnN0IEhpZGRlbklucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIG9wYWNpdHk6IDA7XG4gICAgd2lkdGg6IDA7XG4gICAgaGVpZ2h0OiAwO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBtYXJnaW46IDA7XG5cbiAgICAvKiogY2hlY2tlZCAqL1xuICAgICY6Y2hlY2tlZCArICR7U3R5bGVkQ2hlY2ttYXJrfSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgJjpjaGVja2VkICsgJHtTdHlsZWRDaGVja21hcmt9OjphZnRlciB7XG4gICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDQ1ZGVnKSBzY2FsZSgxKTtcbiAgICB9XG5cbiAgICAvKiogaW5kZXRlcm1pbmF0ZSAqL1xuICAgICY6aW5kZXRlcm1pbmF0ZSArICR7U3R5bGVkQ2hlY2ttYXJrfSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgJjppbmRldGVybWluYXRlICsgJHtTdHlsZWRDaGVja21hcmt9OjphZnRlciB7XG4gICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIGhlaWdodDogMDtcbiAgICAgICAgd2lkdGg6IDhweDtcbiAgICAgICAgYm9yZGVyLXJpZ2h0OiBub25lO1xuICAgICAgICBib3JkZXItYm90dG9tOiAycHggc29saWQgJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuVEVYVF9DT0xPUl9MSUdIVCl9O1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKSBzY2FsZSgxKTtcbiAgICAgICAgdG9wOiA3cHg7XG4gICAgICAgIGxlZnQ6IDRweDtcbiAgICB9XG5cbiAgICAvKiogYWN0aXZlIGFuZCBmb2N1cyAqL1xuICAgICY6ZW5hYmxlZDphY3RpdmUgKyAke1N0eWxlZENoZWNrbWFya30sICY6Zm9jdXMgKyAke1N0eWxlZENoZWNrbWFya30ge1xuICAgICAgICBib3JkZXItY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUlkpfTtcbiAgICAgICAgYm94LXNoYWRvdzogMCAwIDAgM3B4ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLlBSSU1BUllfTElHSFQpfTtcbiAgICB9XG5cbiAgICAmOmVuYWJsZWQ6YWN0aXZlIH4gc3BhbixcbiAgICAmOmZvY3VzIH4gc3BhbiB7XG4gICAgICAgIGNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgLyoqIGhvdmVyICovXG4gICAgJjplbmFibGVkOmhvdmVyICsgJHtTdHlsZWRDaGVja21hcmt9IHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgJjplbmFibGVkOmhvdmVyIH4gc3BhbiB7XG4gICAgICAgIGNvbG9yOiAke2dldFRoZW1lVmFsdWUoVEhFTUVfTkFNRS5QUklNQVJZKX07XG4gICAgfVxuXG4gICAgLyoqIGRpc2FibGVkICovXG4gICAgJjpkaXNhYmxlZCArICR7U3R5bGVkQ2hlY2ttYXJrfSB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRURfQk9SREVSKX07XG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCB+IHNwYW4ge1xuICAgICAgICBjb2xvcjogJHtnZXRUaGVtZVZhbHVlKFRIRU1FX05BTUUuRElTQUJMRUQpfTtcbiAgICAgICAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbiAgICB9XG5cbiAgICAmOmNoZWNrZWQ6ZGlzYWJsZWQgKyAke1N0eWxlZENoZWNrbWFya30sICY6aW5kZXRlcm1pbmF0ZTpkaXNhYmxlZCArICR7U3R5bGVkQ2hlY2ttYXJrfSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0VGhlbWVWYWx1ZShUSEVNRV9OQU1FLkRJU0FCTEVEKX07XG4gICAgfVxuYDtcblxudHlwZSBDaGVja2JveFByb3BzID0gT21pdDxSZWFjdC5IVE1MUHJvcHM8SFRNTElucHV0RWxlbWVudD4sICdhcyc+ICZcbiAgICBQcm9wVHlwZXMuSW5mZXJQcm9wczx0eXBlb2YgQ2hlY2tib3gucHJvcFR5cGVzPjtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQ2hlY2tib3gocHJvcHM6IENoZWNrYm94UHJvcHMpIHtcbiAgICBjb25zdCByZWYgPSB1c2VDYWxsYmFjayhcbiAgICAgICAgKG5vZGU6IHVua25vd24pID0+IHtcbiAgICAgICAgICAgIGlmIChub2RlICE9PSBudWxsKSB7XG4gICAgICAgICAgICAgICAgaWYgKHByb3BzLmluZGV0ZXJtaW5hdGUpIHtcbiAgICAgICAgICAgICAgICAgICAgKG5vZGUgYXMgSFRNTElucHV0RWxlbWVudCkuaW5kZXRlcm1pbmF0ZSA9IHRydWU7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBbcHJvcHMuaW5kZXRlcm1pbmF0ZV0sXG4gICAgKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxMYWJlbD5cbiAgICAgICAgICAgIDxIaWRkZW5JbnB1dFxuICAgICAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgICAgIGFyaWEtY2hlY2tlZD17cHJvcHMuaW5kZXRlcm1pbmF0ZSA/ICdtaXhlZCcgOiBwcm9wcy5jaGVja2VkfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDxTdHlsZWRDaGVja21hcmsgLz5cbiAgICAgICAgICAgIDxzcGFuPntwcm9wcy5sYWJlbH08L3NwYW4+XG4gICAgICAgIDwvTGFiZWw+XG4gICAgKTtcbn1cblxuQ2hlY2tib3gucHJvcFR5cGVzID0ge1xuICAgIC8qKiBMYWJlbCBmb3IgdGhlIGZpZWxkICovXG4gICAgbGFiZWw6IFByb3BUeXBlcy5zdHJpbmcsXG4gICAgLyoqIElmIHRoZSBmaWVsZCBpcyBpbiBpbmRldGVybWluYXRlIHN0YXRlICovXG4gICAgaW5kZXRlcm1pbmF0ZTogUHJvcFR5cGVzLmJvb2wsXG59O1xuXG5DaGVja2JveC5kZWZhdWx0UHJvcHMgPSB7XG4gICAgaW5kZXRlcm1pbmF0ZTogZmFsc2UsXG4gICAgbGFiZWw6ICcnLFxufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3Q29CIn0= */");
+function Checkbox(props) {
+    const ref = useCallback((node)=>{
         if (node !== null) {
             if (props.indeterminate) {
                 node.indeterminate = true;
             }
         }
-    }, [props.indeterminate]);
-    return (_jsxs(Label, { children: [_jsx(Input, Object.assign({}, props, { ref: ref, type: "checkbox", "aria-checked": props.indeterminate ? 'mixed' : props.checked })), _jsx("span", { children: props.label })] }));
+    }, [
+        props.indeterminate
+    ]);
+    return /*#__PURE__*/ jsxs(Label, {
+        children: [
+            /*#__PURE__*/ jsx(HiddenInput, {
+                ...props,
+                ref: ref,
+                type: "checkbox",
+                "aria-checked": props.indeterminate ? 'mixed' : props.checked
+            }),
+            /*#__PURE__*/ jsx(StyledCheckmark, {}),
+            /*#__PURE__*/ jsx("span", {
+                children: props.label
+            })
+        ]
+    });
 }
 Checkbox.propTypes = {
-    /** Label for the field */
-    label: PropTypes.string,
-    /** If the field is in indeterminate state */
-    indeterminate: PropTypes.bool,
+    /** Label for the field */ label: PropTypes.string,
+    /** If the field is in indeterminate state */ indeterminate: PropTypes.bool
 };
 Checkbox.defaultProps = {
     indeterminate: false,
-    label: '',
+    label: ''
 };
-//# sourceMappingURL=Checkbox.js.map
+
+export { Checkbox as default };

package/lib-esm/components/Input/Dropdown.d.ts

@@ -15,6 +15,14 @@ type DropdownProps<T> = {
     /** Disables the field */
     disabled?: boolean;
 } & React.PropsWithChildren<unknown>;
+/**
+ * Dropdown component that allows selection from a list of options.
+ * Supports single and multi-select modes.
+ *
+ * @template T - The type of the value(s) in the dropdown.
+ * @param {DropdownProps<T>} props - The properties for the Dropdown component.
+ * @returns {JSX.Element} The rendered Dropdown component.
+ */
 declare function Dropdown<T extends object>(props: DropdownProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
 declare namespace Dropdown {
     var defaultProps: {
@@ -22,4 +30,3 @@ declare namespace Dropdown {
     };
 }
 export default Dropdown;
-//# sourceMappingURL=Dropdown.d.ts.map

package/lib-esm/components/Input/Dropdown.js

@@ -1,66 +1,126 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import React, { useState, useEffect } from 'react';
 import styled from '@emotion/styled';
-import { ExpandMore } from '../../icons';
-import { Menu } from '../Menu';
-import { Popover, POPOVER_POSITION } from '../Popover';
-import Input from './Input';
-const ArrowContainer = styled.span `
-    position: absolute;
-    right: 12px;
-    top: 16px;
-    pointer-events: none;
-`;
-export default function Dropdown(props) {
+import Input from './Input.js';
+import Popover, { POPOVER_POSITION } from '../Popover/Popover.js';
+import Menu from '../Menu/Menu.js';
+import ExpandMore from '../../icons/ExpandMore.js';
+
+const ArrowContainer = /*#__PURE__*/ styled("span", {
+    target: "elhmc4m0",
+    label: "ArrowContainer"
+})("position:absolute;right:12px;top:16px;pointer-events:none;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbm8tZnJpbGxzLXVpL25vLWZyaWxscy11aS9zcmMvY29tcG9uZW50cy9JbnB1dC9Ecm9wZG93bi50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL25vLWZyaWxscy11aS9uby1mcmlsbHMtdWkvc3JjL2NvbXBvbmVudHMvSW5wdXQvRHJvcGRvd24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgRXhwYW5kTW9yZSB9IGZyb20gJy4uLy4uL2ljb25zJztcbmltcG9ydCB7IE1lbnUgfSBmcm9tICcuLi9NZW51JztcbmltcG9ydCB7IFBvcG92ZXIsIFBPUE9WRVJfUE9TSVRJT04gfSBmcm9tICcuLi9Qb3BvdmVyJztcbmltcG9ydCBJbnB1dCBmcm9tICcuL0lucHV0JztcblxudHlwZSBEcm9wZG93blByb3BzPFQ+ID0ge1xuICAgIC8qKiBWYWx1ZSBvZiB0aGUgY29udHJvbCAqL1xuICAgIHZhbHVlPzogVCB8IFRbXTtcbiAgICAvKiogSWYgbXVsdGlwbGUgZWxlbWVudHMgY2FuIGJlIHNlbGVjdGVkICovXG4gICAgbXVsdGlTZWxlY3Q6IGJvb2xlYW47XG4gICAgLyoqIENoYW5nZSBoYW5kbGVyICovXG4gICAgb25DaGFuZ2U/OiAodjogVCB8IFRbXSkgPT4gdm9pZDtcbiAgICAvKiogTGFiZWwgb2YgdGhlIGNvbnRyb2wgKi9cbiAgICBsYWJlbD86IHN0cmluZztcbiAgICAvKiogRXJyb3IgbWVzc2FnZSAqL1xuICAgIGVycm9yVGV4dD86IHN0cmluZztcbiAgICAvKiogTWFrZXMgZmllbGQgcmVxdWlyZWQgKi9cbiAgICByZXF1aXJlZD86IGJvb2xlYW47XG4gICAgLyoqIERpc2FibGVzIHRoZSBmaWVsZCAqL1xuICAgIGRpc2FibGVkPzogYm9vbGVhbjtcbn0gJiBSZWFjdC5Qcm9wc1dpdGhDaGlsZHJlbjx1bmtub3duPjtcblxuY29uc3QgQXJyb3dDb250YWluZXIgPSBzdHlsZWQuc3BhbmBcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgcmlnaHQ6IDEycHg7XG4gICAgdG9wOiAxNnB4O1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuYDtcblxuLyoqXG4gKiBEcm9wZG93biBjb21wb25lbnQgdGhhdCBhbGxvd3Mgc2VsZWN0aW9uIGZyb20gYSBsaXN0IG9mIG9wdGlvbnMuXG4gKiBTdXBwb3J0cyBzaW5nbGUgYW5kIG11bHRpLXNlbGVjdCBtb2Rlcy5cbiAqXG4gKiBAdGVtcGxhdGUgVCAtIFRoZSB0eXBlIG9mIHRoZSB2YWx1ZShzKSBpbiB0aGUgZHJvcGRvd24uXG4gKiBAcGFyYW0ge0Ryb3Bkb3duUHJvcHM8VD59IHByb3BzIC0gVGhlIHByb3BlcnRpZXMgZm9yIHRoZSBEcm9wZG93biBjb21wb25lbnQuXG4gKiBAcmV0dXJucyB7SlNYLkVsZW1lbnR9IFRoZSByZW5kZXJlZCBEcm9wZG93biBjb21wb25lbnQuXG4gKi9cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIERyb3Bkb3duPFQgZXh0ZW5kcyBvYmplY3Q+KHByb3BzOiBEcm9wZG93blByb3BzPFQ+KSB7XG4gICAgY29uc3QgeyBtdWx0aVNlbGVjdCwgb25DaGFuZ2UgfSA9IHByb3BzO1xuICAgIGNvbnN0IFtvcGVuLCBzZXRPcGVuXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgICBjb25zdCBbdmFsdWUsIHNldFZhbHVlXSA9IHVzZVN0YXRlKHByb3BzLnZhbHVlKTtcbiAgICBjb25zdCBpZCA9IFJlYWN0LnVzZUlkKCk7XG4gICAgY29uc3QgbWVudUlkID0gYCR7aWR9LW1lbnVgO1xuICAgIGNvbnN0IG1lbnVSZWYgPSBSZWFjdC51c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuICAgIGNvbnN0IHRyaWdnZXJSZWYgPSBSZWFjdC51c2VSZWY8SFRNTElucHV0RWxlbWVudD4obnVsbCk7XG5cbiAgICAvLyBGb2N1cyBtZW51IHdoZW4gb3BlbmVkXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgaWYgKG9wZW4pIHtcbiAgICAgICAgICAgIC8vIFdhaXQgZm9yIFBvcG92ZXIgdG8gZnVsbHkgb3BlbiBhbmQgZm9jdXMgaXRzZWxmIGZpcnN0XG4gICAgICAgICAgICAvLyBUaGVuIG1vdmUgZm9jdXMgdG8gdGhlIGZpcnN0IG1lbnUgaXRlbVxuICAgICAgICAgICAgY29uc3QgdGltZXIgPSBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgICAgICBjb25zdCBmaXJzdEl0ZW0gPSBtZW51UmVmLmN1cnJlbnQ/LnF1ZXJ5U2VsZWN0b3IoJ1tyb2xlPVwib3B0aW9uXCJdJykgYXMgSFRNTEVsZW1lbnQ7XG4gICAgICAgICAgICAgICAgaWYgKGZpcnN0SXRlbSkge1xuICAgICAgICAgICAgICAgICAgICBmaXJzdEl0ZW0uZm9jdXMoKTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9LCAxMDApOyAvLyBXYWl0IGFmdGVyIFBvcG92ZXIgaGFzIHNldCBpbml0aWFsIGZvY3VzXG4gICAgICAgICAgICByZXR1cm4gKCkgPT4gY2xlYXJUaW1lb3V0KHRpbWVyKTtcbiAgICAgICAgfVxuICAgIH0sIFtvcGVuXSk7XG5cbiAgICAvKipcbiAgICAgKiBIYW5kbGVzIGtleWRvd24gZXZlbnRzIG9uIHRoZSBpbnB1dCB0cmlnZ2VyLlxuICAgICAqIE9wZW5zIHRoZSBtZW51IG9uICdFbnRlcicsICdTcGFjZScsICdBcnJvd0Rvd24nLCBvciAnQXJyb3dVcCcuXG4gICAgICpcbiAgICAgKiBAcGFyYW0ge1JlYWN0LktleWJvYXJkRXZlbnQ8SFRNTElucHV0RWxlbWVudD59IGUgLSBUaGUga2V5Ym9hcmQgZXZlbnQuXG4gICAgICovXG4gICAgY29uc3Qgb25LZXlEb3duID0gKGU6IFJlYWN0LktleWJvYXJkRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHtcbiAgICAgICAgaWYgKFsnQXJyb3dEb3duJywgJ0Fycm93VXAnLCAnRW50ZXInLCAnICddLmluY2x1ZGVzKGUua2V5KSkge1xuICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAgICAgc2V0T3Blbih0cnVlKTtcbiAgICAgICAgfVxuICAgIH07XG5cbiAgICAvKipcbiAgICAgKiBIYW5kbGVzIGNoYW5nZXMgdG8gdGhlIGRyb3Bkb3duIHZhbHVlLlxuICAgICAqIFVwZGF0ZXMgbG9jYWwgc3RhdGUgYW5kIGNhbGxzIHRoZSBleHRlcm5hbCBvbkNoYW5nZSBoYW5kbGVyLlxuICAgICAqIENsb3NlcyB0aGUgZHJvcGRvd24gaWYgbm90IGluIG11bHRpLXNlbGVjdCBtb2RlLlxuICAgICAqXG4gICAgICogQHBhcmFtIHtUIHwgVFtdfSB2YWwgLSBUaGUgbmV3IHZhbHVlKHMpLlxuICAgICAqL1xuICAgIGNvbnN0IGNoYW5nZUhhbmRsZXIgPSAodmFsOiBUIHwgVFtdKSA9PiB7XG4gICAgICAgIHNldFZhbHVlKHZhbCk7XG4gICAgICAgIG9uQ2hhbmdlPy4odmFsKTtcblxuICAgICAgICAvLyBDbG9zZSBkcm9wZG93biBhZnRlciBzZWxlY3Rpb24gaWYgbm90IG11bHRpU2VsZWN0XG4gICAgICAgIGlmICghbXVsdGlTZWxlY3QpIHtcbiAgICAgICAgICAgIHNldE9wZW4oZmFsc2UpO1xuICAgICAgICAgICAgdHJpZ2dlclJlZi5jdXJyZW50Py5mb2N1cygpO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIC8qKlxuICAgICAqIFRvZ2dsZXMgdGhlIGRyb3Bkb3duIG9wZW4gc3RhdGUgb24gY2xpY2suXG4gICAgICovXG4gICAgY29uc3QgY2xpY2tIYW5kbGVyID0gKCkgPT4gc2V0T3Blbih0cnVlKTtcblxuICAgIGNvbnN0IFRyaWdnZXJFbGVtZW50ID0gUmVhY3QuZm9yd2FyZFJlZjxIVE1MSW5wdXRFbGVtZW50PigocGFzc2VkUHJvcHMsIHJlZikgPT4gKFxuICAgICAgICA8PlxuICAgICAgICAgICAgPElucHV0XG4gICAgICAgICAgICAgICAgey4uLnBhc3NlZFByb3BzfVxuICAgICAgICAgICAgICAgIHJlZj17cmVmfVxuICAgICAgICAgICAgICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICAgICAgICAgICAgICB2YWx1ZT17dmFsdWUgJiYgU3RyaW5nKHZhbHVlKX1cbiAgICAgICAgICAgICAgICBsYWJlbD17cHJvcHMubGFiZWx9XG4gICAgICAgICAgICAgICAgZXJyb3JUZXh0PXtwcm9wcy5lcnJvclRleHR9XG4gICAgICAgICAgICAgICAgb25DbGljaz17Y2xpY2tIYW5kbGVyfVxuICAgICAgICAgICAgICAgIG9uS2V5RG93bj17b25LZXlEb3dufVxuICAgICAgICAgICAgICAgIHJlcXVpcmVkPXtwcm9wcy5yZXF1aXJlZH1cbiAgICAgICAgICAgICAgICBkaXNhYmxlZD17cHJvcHMuZGlzYWJsZWR9XG4gICAgICAgICAgICAgICAgcmVhZE9ubHlcbiAgICAgICAgICAgICAgICByb2xlPVwiY29tYm9ib3hcIlxuICAgICAgICAgICAgICAgIGFyaWEtaGFzcG9wdXA9XCJsaXN0Ym94XCJcbiAgICAgICAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtvcGVufVxuICAgICAgICAgICAgICAgIGFyaWEtY29udHJvbHM9e21lbnVJZH1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8QXJyb3dDb250YWluZXIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XG4gICAgICAgICAgICAgICAgPEV4cGFuZE1vcmUgLz5cbiAgICAgICAgICAgIDwvQXJyb3dDb250YWluZXI+XG4gICAgICAgIDwvPlxuICAgICkpO1xuICAgIFRyaWdnZXJFbGVtZW50LmRpc3BsYXlOYW1lID0gJ0Ryb3Bkb3duVHJpZ2dlcic7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8UG9wb3ZlclxuICAgICAgICAgICAgcG9zaXRpb249e1BPUE9WRVJfUE9TSVRJT04uQk9UVE9NX0xFRlR9XG4gICAgICAgICAgICBvcGVuPXtvcGVufVxuICAgICAgICAgICAgZWxlbWVudD17VHJpZ2dlckVsZW1lbnR9XG4gICAgICAgICAgICBvbkNsb3NlPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgc2V0T3BlbihmYWxzZSk7XG4gICAgICAgICAgICAgICAgdHJpZ2dlclJlZi5jdXJyZW50Py5mb2N1cygpO1xuICAgICAgICAgICAgfX1cbiAgICAgICAgPlxuICAgICAgICAgICAgPE1lbnVcbiAgICAgICAgICAgICAgICByZWY9e21lbnVSZWZ9XG4gICAgICAgICAgICAgICAgaWQ9e21lbnVJZH1cbiAgICAgICAgICAgICAgICB2YWx1ZT17dmFsdWV9XG4gICAgICAgICAgICAgICAgbXVsdGlTZWxlY3Q9e211bHRpU2VsZWN0fVxuICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXtjaGFuZ2VIYW5kbGVyfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICAgICAgICAgIDwvTWVudT5cbiAgICAgICAgPC9Qb3BvdmVyPlxuICAgICk7XG59XG5cbkRyb3Bkb3duLmRlZmF1bHRQcm9wcyA9IHtcbiAgICBtdWx0aVNlbGVjdDogZmFsc2UsXG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCdUIifQ== */");
+/**
+ * Dropdown component that allows selection from a list of options.
+ * Supports single and multi-select modes.
+ *
+ * @template T - The type of the value(s) in the dropdown.
+ * @param {DropdownProps<T>} props - The properties for the Dropdown component.
+ * @returns {JSX.Element} The rendered Dropdown component.
+ */ function Dropdown(props) {
     const { multiSelect, onChange } = props;
     const [open, setOpen] = useState(false);
     const [value, setValue] = useState(props.value);
-    useEffect(() => {
-        const focusHandler = (e) => {
-            var _a, _b;
-            if (open && (e.keyCode === 38 || e.keyCode === 40)) {
-                e.preventDefault();
-                const current = document.querySelector(':focus');
-                if (current.tagName === 'DIV') {
-                    const firstBtn = current.querySelector('button');
-                    firstBtn === null || firstBtn === void 0 ? void 0 : firstBtn.focus();
+    const id = React.useId();
+    const menuId = `${id}-menu`;
+    const menuRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    // Focus menu when opened
+    useEffect(()=>{
+        if (open) {
+            // Wait for Popover to fully open and focus itself first
+            // Then move focus to the first menu item
+            const timer = setTimeout(()=>{
+                const firstItem = menuRef.current?.querySelector('[role="option"]');
+                if (firstItem) {
+                    firstItem.focus();
                 }
-                else {
-                    const currentBtn = current.closest('button');
-                    if (e.keyCode === 38) {
-                        const prev = (_a = currentBtn === null || currentBtn === void 0 ? void 0 : currentBtn.previousElementSibling) === null || _a === void 0 ? void 0 : _a.closest('button');
-                        prev === null || prev === void 0 ? void 0 : prev.focus();
-                    }
-                    else {
-                        const next = (_b = currentBtn === null || currentBtn === void 0 ? void 0 : currentBtn.nextElementSibling) === null || _b === void 0 ? void 0 : _b.closest('button');
-                        next === null || next === void 0 ? void 0 : next.focus();
-                    }
-                }
-                return false;
-            }
-        };
-        document.addEventListener('keydown', focusHandler);
-        return () => {
-            document.removeEventListener('keydown', focusHandler);
-        };
-    }, [open]);
-    const clickHandler = () => setOpen(true);
-    const keyUp = (e) => {
-        if (e.keyCode === 40) {
+            }, 100); // Wait after Popover has set initial focus
+            return ()=>clearTimeout(timer);
+        }
+    }, [
+        open
+    ]);
+    /**
+     * Handles keydown events on the input trigger.
+     * Opens the menu on 'Enter', 'Space', 'ArrowDown', or 'ArrowUp'.
+     *
+     * @param {React.KeyboardEvent<HTMLInputElement>} e - The keyboard event.
+     */ const onKeyDown = (e)=>{
+        if ([
+            'ArrowDown',
+            'ArrowUp',
+            'Enter',
+            ' '
+        ].includes(e.key)) {
+            e.preventDefault();
             setOpen(true);
         }
     };
-    const changeHandler = (val) => {
+    /**
+     * Handles changes to the dropdown value.
+     * Updates local state and calls the external onChange handler.
+     * Closes the dropdown if not in multi-select mode.
+     *
+     * @param {T | T[]} val - The new value(s).
+     */ const changeHandler = (val)=>{
         setValue(val);
-        onChange === null || onChange === void 0 ? void 0 : onChange(val);
+        onChange?.(val);
         // Close dropdown after selection if not multiSelect
         if (!multiSelect) {
             setOpen(false);
+            triggerRef.current?.focus();
         }
     };
-    return (_jsx(Popover, { position: POPOVER_POSITION.BOTTOM_LEFT, open: open, element: () => (_jsxs(_Fragment, { children: [_jsx(Input, { type: "text", value: value && String(value), label: props.label, errorText: props.errorText, onClick: clickHandler, onKeyUp: keyUp, required: props.required, disabled: props.disabled }), _jsx(ArrowContainer, { children: _jsx(ExpandMore, {}) })] })), onClose: () => setOpen(false), children: _jsx(Menu, { value: value, multiSelect: multiSelect, onChange: changeHandler, children: props.children }) }));
+    /**
+     * Toggles the dropdown open state on click.
+     */ const clickHandler = ()=>setOpen(true);
+    const TriggerElement = /*#__PURE__*/ React.forwardRef((passedProps, ref)=>/*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Input, {
+                    ...passedProps,
+                    ref: ref,
+                    type: "text",
+                    value: value && String(value),
+                    label: props.label,
+                    errorText: props.errorText,
+                    onClick: clickHandler,
+                    onKeyDown: onKeyDown,
+                    required: props.required,
+                    disabled: props.disabled,
+                    readOnly: true,
+                    role: "combobox",
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": open,
+                    "aria-controls": menuId
+                }),
+                /*#__PURE__*/ jsx(ArrowContainer, {
+                    "aria-hidden": "true",
+                    children: /*#__PURE__*/ jsx(ExpandMore, {})
+                })
+            ]
+        }));
+    TriggerElement.displayName = 'DropdownTrigger';
+    return /*#__PURE__*/ jsx(Popover, {
+        position: POPOVER_POSITION.BOTTOM_LEFT,
+        open: open,
+        element: TriggerElement,
+        onClose: ()=>{
+            setOpen(false);
+            triggerRef.current?.focus();
+        },
+        children: /*#__PURE__*/ jsx(Menu, {
+            ref: menuRef,
+            id: menuId,
+            value: value,
+            multiSelect: multiSelect,
+            onChange: changeHandler,
+            children: props.children
+        })
+    });
 }
 Dropdown.defaultProps = {
-    multiSelect: false,
+    multiSelect: false
 };
-//# sourceMappingURL=Dropdown.js.map
+
+export { Dropdown as default };

package/lib-esm/components/Input/Input.d.ts

@@ -7,4 +7,3 @@ type InputProps = React.AllHTMLAttributes<HTMLInputElement> & {
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "as"> & React.RefAttributes<HTMLInputElement>>;
 export default Input;
-//# sourceMappingURL=Input.d.ts.map