no-frills-ui 0.0.14-alpha.3 → 0.0.14-alpha.5

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

@@ -2,103 +2,108 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 const Label = styled.label `
     margin: 5px 0;
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
 `;
-const Input = styled.input `
-    appearance: none;
+const StyledCheckmark = styled.span `
+    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;
-    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;
-    }
+    flex-shrink: 0;
 
     &::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;
+        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;
     }
+`;
+const HiddenInput = styled.input `
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+    margin: 0;
 
     /** checked */
-    &:checked::before {
-        content: '';
-        background-color: var(--primary, ${constants.PRIMARY});
-        border-color: var(--primary, ${constants.PRIMARY});
-        color: #fff;
+    &:checked + ${StyledCheckmark} {
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
-    &:checked::after {
+    &:checked + ${StyledCheckmark}::after {
         opacity: 1;
-        transform: translate(-16px, 2px) rotate(45deg);
+        transform: rotate(45deg) scale(1);
     }
 
     /** indeterminate */
-    &:indeterminate::before {
-        content: '';
-        background-color: var(--primary, ${constants.PRIMARY});
-        border-color: var(--primary, ${constants});
-        color: #fff;
+    &:indeterminate + ${StyledCheckmark} {
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
-    &:indeterminate::after {
-        width: 0;
+    &:indeterminate + ${StyledCheckmark}::after {
         opacity: 1;
-        transform: translate(-15px, 3px) rotate(90deg);
+        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;
     }
 
     /** 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 + ${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: var(--primary, ${constants.PRIMARY});
+    &:enabled:active ~ span,
+    &:focus ~ span {
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /** hover */
-    &:enabled:hover::before {
-        border-color: var(--primary, ${constants.PRIMARY});
+    &:enabled:hover + ${StyledCheckmark} {
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
-    &:enabled:hover + span {
-        color: var(--primary, ${constants.PRIMARY});
+    &:enabled:hover ~ span {
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /** disabled */
-    &:disabled::before {
-        border-color: #aaa;
+    &:disabled + ${StyledCheckmark} {
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        cursor: not-allowed;
     }
 
-    &:disabled + span {
-        color: #aaa;
+    &:disabled ~ span {
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
+        cursor: not-allowed;
     }
 
-    &:checked:disabled::before,
-    &:indeterminate:disabled::before {
-        background-color: #aaa;
+    &:checked:disabled + ${StyledCheckmark}, &:indeterminate:disabled + ${StyledCheckmark} {
+        background-color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 `;
 export default function Checkbox(props) {
@@ -109,7 +114,7 @@ export default function Checkbox(props) {
             }
         }
     }, [props.indeterminate]);
-    return (_jsxs(Label, { children: [_jsx(Input, Object.assign({}, props, { ref: ref, type: "checkbox" })), _jsx("span", { children: props.label })] }));
+    return (_jsxs(Label, { children: [_jsx(HiddenInput, Object.assign({}, props, { ref: ref, type: "checkbox", "aria-checked": props.indeterminate ? 'mixed' : props.checked })), _jsx(StyledCheckmark, {}), _jsx("span", { children: props.label })] }));
 }
 Checkbox.propTypes = {
     /** Label for the field */

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Input/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;CAGzB,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;gDASsB,SAAS,CAAC,YAAY;;;;;;;8CAOxB,SAAS,CAAC,UAAU;;;;;;;;;;;;;;;;;;;2CAmBvB,SAAS,CAAC,OAAO;uCACrB,SAAS,CAAC,OAAO;;;;;;;;;;;;2CAYb,SAAS,CAAC,OAAO;uCACrB,SAAS;;;;;;;;;;;;;uCAaT,SAAS,CAAC,OAAO;+CACT,SAAS,CAAC,aAAa;;;;;gCAKtC,SAAS,CAAC,OAAO;;;;;uCAKV,SAAS,CAAC,OAAO;;;;gCAIxB,SAAS,CAAC,OAAO;;;;;;;;;;;;;;;;CAgBhD,CAAC;AAKF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAoB;IACjD,MAAM,GAAG,GAAG,WAAW,CACnB,CAAC,IAAa,EAAE,EAAE;QACd,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAChB,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC;gBACrB,IAAyB,CAAC,aAAa,GAAG,IAAI,CAAC;YACpD,CAAC;QACL,CAAC;IACL,CAAC,EACD,CAAC,KAAK,CAAC,aAAa,CAAC,CACxB,CAAC;IAEF,OAAO,CACH,MAAC,KAAK,eACF,KAAC,KAAK,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,UAAU,IAAG,EAC9C,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACtB,CACX,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,SAAS,GAAG;IACjB,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,6CAA6C;IAC7C,aAAa,EAAE,SAAS,CAAC,IAAI;CAChC,CAAC;AAEF,QAAQ,CAAC,YAAY,GAAG;IACpB,aAAa,EAAE,KAAK;IACpB,KAAK,EAAE,EAAE;CACZ,CAAC","sourcesContent":["import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nconst Label = styled.label`\n    margin: 5px 0;\n    position: relative;\n`;\n\nconst Input = styled.input`\n    appearance: none;\n    position: relative;\n    margin: 0;\n\n    &::before {\n        content: '';\n        width: 16px;\n        height: 16px;\n        border: 1px solid var(--border-color, ${constants.BORDER_COLOR});\n        display: inline-block;\n        border-radius: 3px;\n        vertical-align: bottom;\n        margin: 0 5px;\n        text-align: center;\n        line-height: 16px;\n        background-color: var(--background, ${constants.BACKGROUND});\n        transition: background-color 0.3s ease;\n    }\n\n    &::after {\n        content: '';\n        width: 3px;\n        height: 10px;\n        border-right: 2px solid #fff;\n        border-bottom: 2px solid #fff;\n        transform: translate(-16px, 1px);\n        opacity: 0;\n        transition: transform 0.3s ease;\n        position: absolute;\n    }\n\n    /** checked */\n    &:checked::before {\n        content: '';\n        background-color: var(--primary, ${constants.PRIMARY});\n        border-color: var(--primary, ${constants.PRIMARY});\n        color: #fff;\n    }\n\n    &:checked::after {\n        opacity: 1;\n        transform: translate(-16px, 2px) rotate(45deg);\n    }\n\n    /** indeterminate */\n    &:indeterminate::before {\n        content: '';\n        background-color: var(--primary, ${constants.PRIMARY});\n        border-color: var(--primary, ${constants});\n        color: #fff;\n    }\n\n    &:indeterminate::after {\n        width: 0;\n        opacity: 1;\n        transform: translate(-15px, 3px) rotate(90deg);\n    }\n\n    /** active and focus */\n    &:enabled:active::before,\n    &:focus::before {\n        border-color: var(--primary, ${constants.PRIMARY});\n        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});\n    }\n\n    &:enabled:active + span,\n    &:focus + span {\n        color: var(--primary, ${constants.PRIMARY});\n    }\n\n    /** hover */\n    &:enabled:hover::before {\n        border-color: var(--primary, ${constants.PRIMARY});\n    }\n\n    &:enabled:hover + span {\n        color: var(--primary, ${constants.PRIMARY});\n    }\n\n    /** disabled */\n    &:disabled::before {\n        border-color: #aaa;\n    }\n\n    &:disabled + span {\n        color: #aaa;\n    }\n\n    &:checked:disabled::before,\n    &:indeterminate:disabled::before {\n        background-color: #aaa;\n    }\n`;\n\ntype CheckboxProps = Omit<React.HTMLProps<HTMLInputElement>, 'as'> &\n    PropTypes.InferProps<typeof Checkbox.propTypes>;\n\nexport default function Checkbox(props: CheckboxProps) {\n    const ref = useCallback(\n        (node: unknown) => {\n            if (node !== null) {\n                if (props.indeterminate) {\n                    (node as HTMLInputElement).indeterminate = true;\n                }\n            }\n        },\n        [props.indeterminate],\n    );\n\n    return (\n        <Label>\n            <Input {...props} ref={ref} type=\"checkbox\" />\n            <span>{props.label}</span>\n        </Label>\n    );\n}\n\nCheckbox.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string,\n    /** If the field is in indeterminate state */\n    indeterminate: PropTypes.bool,\n};\n\nCheckbox.defaultProps = {\n    indeterminate: false,\n    label: '',\n};\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Input/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEnE,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;CAMzB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAA;;;wBAGX,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC;;;;wBAItC,aAAa,CAAC,UAAU,CAAC,UAAU,CAAC;;;;;;;;;kCAS1B,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC;mCACzC,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC;;;;;;;;CAQ5E,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;kBAQd,eAAe;4BACL,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;wBACrC,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;kBAGvC,eAAe;;;;;;wBAMT,eAAe;4BACX,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;wBACrC,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;wBAGjC,eAAe;;;;;mCAKJ,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC;;;;;;;yBAOpD,eAAe,eAAe,eAAe;wBAC9C,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;gCACzB,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC;;;;;iBAKtD,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;;wBAI1B,eAAe;wBACf,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;;iBAIxC,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;;mBAI/B,eAAe;wBACV,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC;;;;;iBAKhD,aAAa,CAAC,UAAU,CAAC,QAAQ,CAAC;;;;2BAIxB,eAAe,gCAAgC,eAAe;4BAC7D,aAAa,CAAC,UAAU,CAAC,QAAQ,CAAC;;CAE7D,CAAC;AAKF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAoB;IACjD,MAAM,GAAG,GAAG,WAAW,CACnB,CAAC,IAAa,EAAE,EAAE;QACd,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAChB,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC;gBACrB,IAAyB,CAAC,aAAa,GAAG,IAAI,CAAC;YACpD,CAAC;QACL,CAAC;IACL,CAAC,EACD,CAAC,KAAK,CAAC,aAAa,CAAC,CACxB,CAAC;IAEF,OAAO,CACH,MAAC,KAAK,eACF,KAAC,WAAW,oBACJ,KAAK,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,kBACD,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IAC7D,EACF,KAAC,eAAe,KAAG,EACnB,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACtB,CACX,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,SAAS,GAAG;IACjB,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,6CAA6C;IAC7C,aAAa,EAAE,SAAS,CAAC,IAAI;CAChC,CAAC;AAEF,QAAQ,CAAC,YAAY,GAAG;IACpB,aAAa,EAAE,KAAK;IACpB,KAAK,EAAE,EAAE;CACZ,CAAC","sourcesContent":["import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Label = styled.label`\n    margin: 5px 0;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n`;\n\nconst StyledCheckmark = styled.span`\n    width: 16px;\n    height: 16px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    display: inline-block;\n    border-radius: 3px;\n    margin-right: 5px;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    transition: all 0.3s ease;\n    position: relative;\n    flex-shrink: 0;\n\n    &::after {\n        content: '';\n        width: 3px;\n        height: 10px;\n        border-right: 2px solid ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n        border-bottom: 2px solid ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n        position: absolute;\n        top: 1px;\n        left: 6px;\n        opacity: 0;\n        transform: rotate(45deg) scale(0);\n        transition: all 0.2s ease;\n    }\n`;\n\nconst HiddenInput = styled.input`\n    opacity: 0;\n    width: 0;\n    height: 0;\n    position: absolute;\n    margin: 0;\n\n    /** checked */\n    &:checked + ${StyledCheckmark} {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:checked + ${StyledCheckmark}::after {\n        opacity: 1;\n        transform: rotate(45deg) scale(1);\n    }\n\n    /** indeterminate */\n    &:indeterminate + ${StyledCheckmark} {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:indeterminate + ${StyledCheckmark}::after {\n        opacity: 1;\n        height: 0;\n        width: 8px;\n        border-right: none;\n        border-bottom: 2px solid ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n        transform: rotate(0deg) scale(1);\n        top: 7px;\n        left: 4px;\n    }\n\n    /** active and focus */\n    &:enabled:active + ${StyledCheckmark}, &:focus + ${StyledCheckmark} {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:enabled:active ~ span,\n    &:focus ~ span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** hover */\n    &:enabled:hover + ${StyledCheckmark} {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:enabled:hover ~ span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** disabled */\n    &:disabled + ${StyledCheckmark} {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        cursor: not-allowed;\n    }\n\n    &:disabled ~ span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n        cursor: not-allowed;\n    }\n\n    &:checked:disabled + ${StyledCheckmark}, &:indeterminate:disabled + ${StyledCheckmark} {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\ntype CheckboxProps = Omit<React.HTMLProps<HTMLInputElement>, 'as'> &\n    PropTypes.InferProps<typeof Checkbox.propTypes>;\n\nexport default function Checkbox(props: CheckboxProps) {\n    const ref = useCallback(\n        (node: unknown) => {\n            if (node !== null) {\n                if (props.indeterminate) {\n                    (node as HTMLInputElement).indeterminate = true;\n                }\n            }\n        },\n        [props.indeterminate],\n    );\n\n    return (\n        <Label>\n            <HiddenInput\n                {...props}\n                ref={ref}\n                type=\"checkbox\"\n                aria-checked={props.indeterminate ? 'mixed' : props.checked}\n            />\n            <StyledCheckmark />\n            <span>{props.label}</span>\n        </Label>\n    );\n}\n\nCheckbox.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string,\n    /** If the field is in indeterminate state */\n    indeterminate: PropTypes.bool,\n};\n\nCheckbox.defaultProps = {\n    indeterminate: false,\n    label: '',\n};\n"]}

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: {

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,KAAK,aAAa,CAAC,CAAC,IAAI;IACpB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC;IAChB,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;AASrC,iBAAwB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,oDA+EzE;kBA/EuB,QAAQ;;;;;eAAR,QAAQ"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,KAAK,aAAa,CAAC,CAAC,IAAI;IACpB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC;IAChB,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;AASrC;;;;;;;GAOG;AACH,iBAAwB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,oDA2GzE;kBA3GuB,QAAQ;;;;;eAAR,QAAQ"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { ExpandMore } from '../../icons';
 import { Menu } from '../Menu';
@@ -11,54 +11,77 @@ const ArrowContainer = styled.span `
     top: 16px;
     pointer-events: none;
 `;
+/**
+ * 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.
+ */
 export default function Dropdown(props) {
     const { multiSelect, onChange } = props;
     const [open, setOpen] = useState(false);
     const [value, setValue] = useState(props.value);
+    const id = React.useId();
+    const menuId = `${id}-menu`;
+    const menuRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    // Focus menu when opened
     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();
+        if (open) {
+            // Wait for Popover to fully open and focus itself first
+            // Then move focus to the first menu item
+            const timer = setTimeout(() => {
+                var _a;
+                const firstItem = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.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);
-        };
+            }, 100); // Wait after Popover has set initial focus
+            return () => clearTimeout(timer);
+        }
     }, [open]);
-    const clickHandler = () => setOpen(true);
-    const keyUp = (e) => {
-        if (e.keyCode === 40) {
+    /**
+     * 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);
         }
     };
+    /**
+     * 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) => {
+        var _a;
         setValue(val);
         onChange === null || onChange === void 0 ? void 0 : onChange(val);
         // Close dropdown after selection if not multiSelect
         if (!multiSelect) {
             setOpen(false);
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.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 = React.forwardRef((passedProps, ref) => (_jsxs(_Fragment, { children: [_jsx(Input, Object.assign({}, 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 })), _jsx(ArrowContainer, { "aria-hidden": "true", children: _jsx(ExpandMore, {}) })] })));
+    TriggerElement.displayName = 'DropdownTrigger';
+    return (_jsx(Popover, { position: POPOVER_POSITION.BOTTOM_LEFT, open: open, element: TriggerElement, onClose: () => {
+            var _a;
+            setOpen(false);
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, children: _jsx(Menu, { ref: menuRef, id: menuId, value: value, multiSelect: multiSelect, onChange: changeHandler, children: props.children }) }));
 }
 Dropdown.defaultProps = {
     multiSelect: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/Input/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,KAAK,MAAM,SAAS,CAAC;AAmB5B,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKjC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAmB,KAAuB;IACtE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;;YACtC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,KAAK,EAAE,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE,CAAC,EAAE,CAAC;gBACjD,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBACjD,IAAI,OAAO,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;oBAC5B,MAAM,QAAQ,GAAG,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACjD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,EAAE,CAAC;gBACtB,CAAC;qBAAM,CAAC;oBACJ,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;oBAC7C,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE,EAAE,CAAC;wBACnB,MAAM,IAAI,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,sBAAsB,0CAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;wBACnE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,CAAC;oBAClB,CAAC;yBAAM,CAAC;wBACJ,MAAM,IAAI,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,kBAAkB,0CAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;wBAC/D,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,CAAC;oBAClB,CAAC;gBACL,CAAC;gBACD,OAAO,KAAK,CAAC;YACjB,CAAC;QACL,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QAEnD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QAC1D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzC,MAAM,KAAK,GAAG,CAAC,CAAwC,EAAE,EAAE;QACvD,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,GAAY,EAAE,EAAE;QACnC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACd,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,GAAG,CAAC,CAAC;QAEhB,oDAAoD;QACpD,IAAI,CAAC,WAAW,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,OAAO,IACJ,QAAQ,EAAE,gBAAgB,CAAC,WAAW,EACtC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,CACX,8BACI,KAAC,KAAK,IACF,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,EAC7B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,OAAO,EAAE,YAAY,EACrB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,EACF,KAAC,cAAc,cACX,KAAC,UAAU,KAAG,GACD,IAClB,CACN,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,YAE7B,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,YAChE,KAAK,CAAC,QAAQ,GACZ,GACD,CACb,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,YAAY,GAAG;IACpB,WAAW,EAAE,KAAK;CACrB,CAAC","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { ExpandMore } from '../../icons';\nimport { Menu } from '../Menu';\nimport { Popover, POPOVER_POSITION } from '../Popover';\nimport Input from './Input';\n\ntype DropdownProps<T> = {\n    /** Value of the control */\n    value?: T | T[];\n    /** If multiple elements can be selected */\n    multiSelect: boolean;\n    /** Change handler */\n    onChange?: (v: T | T[]) => void;\n    /** Label of the control */\n    label?: string;\n    /** Error message */\n    errorText?: string;\n    /** Makes field required */\n    required?: boolean;\n    /** Disables the field */\n    disabled?: boolean;\n} & React.PropsWithChildren<unknown>;\n\nconst ArrowContainer = styled.span`\n    position: absolute;\n    right: 12px;\n    top: 16px;\n    pointer-events: none;\n`;\n\nexport default function Dropdown<T extends object>(props: DropdownProps<T>) {\n    const { multiSelect, onChange } = props;\n    const [open, setOpen] = useState(false);\n    const [value, setValue] = useState(props.value);\n\n    useEffect(() => {\n        const focusHandler = (e: KeyboardEvent) => {\n            if (open && (e.keyCode === 38 || e.keyCode === 40)) {\n                e.preventDefault();\n                const current = document.querySelector(':focus');\n                if (current.tagName === 'DIV') {\n                    const firstBtn = current.querySelector('button');\n                    firstBtn?.focus();\n                } else {\n                    const currentBtn = current.closest('button');\n                    if (e.keyCode === 38) {\n                        const prev = currentBtn?.previousElementSibling?.closest('button');\n                        prev?.focus();\n                    } else {\n                        const next = currentBtn?.nextElementSibling?.closest('button');\n                        next?.focus();\n                    }\n                }\n                return false;\n            }\n        };\n        document.addEventListener('keydown', focusHandler);\n\n        return () => {\n            document.removeEventListener('keydown', focusHandler);\n        };\n    }, [open]);\n\n    const clickHandler = () => setOpen(true);\n\n    const keyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.keyCode === 40) {\n            setOpen(true);\n        }\n    };\n\n    const changeHandler = (val: T | T[]) => {\n        setValue(val);\n        onChange?.(val);\n\n        // Close dropdown after selection if not multiSelect\n        if (!multiSelect) {\n            setOpen(false);\n        }\n    };\n\n    return (\n        <Popover\n            position={POPOVER_POSITION.BOTTOM_LEFT}\n            open={open}\n            element={() => (\n                <>\n                    <Input\n                        type=\"text\"\n                        value={value && String(value)}\n                        label={props.label}\n                        errorText={props.errorText}\n                        onClick={clickHandler}\n                        onKeyUp={keyUp}\n                        required={props.required}\n                        disabled={props.disabled}\n                    />\n                    <ArrowContainer>\n                        <ExpandMore />\n                    </ArrowContainer>\n                </>\n            )}\n            onClose={() => setOpen(false)}\n        >\n            <Menu value={value} multiSelect={multiSelect} onChange={changeHandler}>\n                {props.children}\n            </Menu>\n        </Popover>\n    );\n}\n\nDropdown.defaultProps = {\n    multiSelect: false,\n};\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/Input/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { ExpandMore } from '../../icons';\nimport { Menu } from '../Menu';\nimport { Popover, POPOVER_POSITION } from '../Popover';\nimport Input from './Input';\n\ntype DropdownProps<T> = {\n    /** Value of the control */\n    value?: T | T[];\n    /** If multiple elements can be selected */\n    multiSelect: boolean;\n    /** Change handler */\n    onChange?: (v: T | T[]) => void;\n    /** Label of the control */\n    label?: string;\n    /** Error message */\n    errorText?: string;\n    /** Makes field required */\n    required?: boolean;\n    /** Disables the field */\n    disabled?: boolean;\n} & React.PropsWithChildren<unknown>;\n\nconst ArrowContainer = styled.span`\n    position: absolute;\n    right: 12px;\n    top: 16px;\n    pointer-events: none;\n`;\n\n/**\n * Dropdown component that allows selection from a list of options.\n * Supports single and multi-select modes.\n *\n * @template T - The type of the value(s) in the dropdown.\n * @param {DropdownProps<T>} props - The properties for the Dropdown component.\n * @returns {JSX.Element} The rendered Dropdown component.\n */\nexport default function Dropdown<T extends object>(props: DropdownProps<T>) {\n    const { multiSelect, onChange } = props;\n    const [open, setOpen] = useState(false);\n    const [value, setValue] = useState(props.value);\n    const id = React.useId();\n    const menuId = `${id}-menu`;\n    const menuRef = React.useRef<HTMLDivElement>(null);\n    const triggerRef = React.useRef<HTMLInputElement>(null);\n\n    // Focus menu when opened\n    useEffect(() => {\n        if (open) {\n            // Wait for Popover to fully open and focus itself first\n            // Then move focus to the first menu item\n            const timer = setTimeout(() => {\n                const firstItem = menuRef.current?.querySelector('[role=\"option\"]') as HTMLElement;\n                if (firstItem) {\n                    firstItem.focus();\n                }\n            }, 100); // Wait after Popover has set initial focus\n            return () => clearTimeout(timer);\n        }\n    }, [open]);\n\n    /**\n     * Handles keydown events on the input trigger.\n     * Opens the menu on 'Enter', 'Space', 'ArrowDown', or 'ArrowUp'.\n     *\n     * @param {React.KeyboardEvent<HTMLInputElement>} e - The keyboard event.\n     */\n    const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {\n            e.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    /**\n     * Handles changes to the dropdown value.\n     * Updates local state and calls the external onChange handler.\n     * Closes the dropdown if not in multi-select mode.\n     *\n     * @param {T | T[]} val - The new value(s).\n     */\n    const changeHandler = (val: T | T[]) => {\n        setValue(val);\n        onChange?.(val);\n\n        // Close dropdown after selection if not multiSelect\n        if (!multiSelect) {\n            setOpen(false);\n            triggerRef.current?.focus();\n        }\n    };\n\n    /**\n     * Toggles the dropdown open state on click.\n     */\n    const clickHandler = () => setOpen(true);\n\n    const TriggerElement = React.forwardRef<HTMLInputElement>((passedProps, ref) => (\n        <>\n            <Input\n                {...passedProps}\n                ref={ref}\n                type=\"text\"\n                value={value && String(value)}\n                label={props.label}\n                errorText={props.errorText}\n                onClick={clickHandler}\n                onKeyDown={onKeyDown}\n                required={props.required}\n                disabled={props.disabled}\n                readOnly\n                role=\"combobox\"\n                aria-haspopup=\"listbox\"\n                aria-expanded={open}\n                aria-controls={menuId}\n            />\n            <ArrowContainer aria-hidden=\"true\">\n                <ExpandMore />\n            </ArrowContainer>\n        </>\n    ));\n    TriggerElement.displayName = 'DropdownTrigger';\n\n    return (\n        <Popover\n            position={POPOVER_POSITION.BOTTOM_LEFT}\n            open={open}\n            element={TriggerElement}\n            onClose={() => {\n                setOpen(false);\n                triggerRef.current?.focus();\n            }}\n        >\n            <Menu\n                ref={menuRef}\n                id={menuId}\n                value={value}\n                multiSelect={multiSelect}\n                onChange={changeHandler}\n            >\n                {props.children}\n            </Menu>\n        </Popover>\n    );\n}\n\nDropdown.defaultProps = {\n    multiSelect: false,\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,KAAK,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IAC1D,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA6HF,QAAA,MAAM,KAAK,iGAkCT,CAAC;AAIH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAK1D,KAAK,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IAC1D,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA4HF,QAAA,MAAM,KAAK,iGA4CT,CAAC;AAIH,eAAe,KAAK,CAAC"}

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useState, useEffect, useId } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 const Label = styled.label `
     display: inline-flex;
     flex-direction: column;
-    flex: 1;
     position: relative;
     margin: 10px 5px;
 `;
@@ -18,46 +17,46 @@ const TextField = styled.input `
     min-height: 30px;
     width: 250px;
     border-radius: 3px;
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
     display: inline-block;
-    background-color: var(--background, ${constants.BACKGROUND});
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
 
     /** Focused */
     &:focus,
     &:active {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:focus + span,
     &:active + span {
-        color: var(--primary, ${constants.PRIMARY});
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /** Disabled */
     &:disabled {
-        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
     }
 
     &:disabled + span {
-        color: #777;
+        color: ${getThemeValue(THEME_NAME.DISABLED)};
     }
 
     /** Invalid */
     &:focus:invalid {
-        border-color: var(--error, ${constants.ERROR});
-        box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};
     }
 
     ${(props) => props.touched
     ? `
     &:invalid {
-        border-color: var(--error, ${constants.ERROR});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
     }
 
     &:invalid + span {
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
     `
     : ''}
@@ -65,10 +64,10 @@ const TextField = styled.input `
     /** Error */
     ${(props) => props.errorText
     ? `
-    border-color: var(--error, ${constants.ERROR});
+    border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
     & + span {
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
     `
     : ''}
@@ -77,7 +76,7 @@ const TextField = styled.input `
     &:required + span:after {
         content: '*';
         margin-left: 2px;
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
 
     /** Label Animation */
@@ -95,7 +94,7 @@ const TextField = styled.input `
     ? `
     & + span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
@@ -104,13 +103,13 @@ const TextField = styled.input `
 
     &:focus + span, &:placeholder-shown + span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
 `;
 const ErrorContainer = styled.div `
-    color: var(--error, ${constants.ERROR});
+    color: ${getThemeValue(THEME_NAME.ERROR)};
     padding-top: 3px;
     font-size: 12px;
     line-height: 14px;
@@ -119,6 +118,12 @@ const ErrorContainer = styled.div `
 const Input = React.forwardRef((props, ref) => {
     const [touched, setTouched] = useState(false);
     const [value, setValue] = useState(props.value || '');
+    const errorId = useId();
+    useEffect(() => {
+        if (props.value !== undefined) {
+            setValue(props.value);
+        }
+    }, [props.value]);
     const handleFocus = (e) => {
         setTouched(true);
         if (props.onFocus) {
@@ -134,7 +139,7 @@ const Input = React.forwardRef((props, ref) => {
             setValue(e.target.value);
         }
     };
-    return (_jsxs(Label, { children: [_jsx(TextField, Object.assign({}, props, { ref: ref, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched })), _jsx("span", { children: props.label }), props.errorText && _jsx(ErrorContainer, { children: props.errorText })] }));
+    return (_jsxs(Label, { children: [_jsx(TextField, Object.assign({}, props, { ref: ref, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched, "aria-invalid": !!props.errorText, "aria-required": props.required, "aria-describedby": props.errorText ? errorId : undefined })), _jsx("span", { children: props.label }), props.errorText && _jsx(ErrorContainer, { id: errorId, children: props.errorText })] }));
 });
 Input.displayName = 'Input';
 export default Input;

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\ntype InputProps = React.AllHTMLAttributes<HTMLInputElement> & {\n    /** Label for the field */\n    label?: string;\n    /** Error message for the field */\n    errorText?: string;\n};\n\ntype InputInternalProps = InputProps & {\n    touched: boolean;\n};\n\nconst Label = styled.label`\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1;\n    position: relative;\n    margin: 10px 5px;\n`;\n\nconst TextField = styled.input<InputInternalProps>`\n    outline: none;\n    color: inherit;\n    padding: 0 8px;\n    line-height: 30px;\n    min-height: 30px;\n    width: 250px;\n    border-radius: 3px;\n    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});\n    display: inline-block;\n    background-color: var(--background, ${constants.BACKGROUND});\n\n    /** Focused */\n    &:focus,\n    &:active {\n        border-color: var(--primary, ${constants.PRIMARY});\n        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});\n    }\n\n    &:focus + span,\n    &:active + span {\n        color: var(--primary, ${constants.PRIMARY});\n    }\n\n    /** Disabled */\n    &:disabled {\n        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});\n        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});\n    }\n\n    &:disabled + span {\n        color: #777;\n    }\n\n    /** Invalid */\n    &:focus:invalid {\n        border-color: var(--error, ${constants.ERROR});\n        box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});\n    }\n\n    ${(props) =>\n        props.touched\n            ? `\n    &:invalid {\n        border-color: var(--error, ${constants.ERROR});\n    }\n\n    &:invalid + span {\n        color: var(--error, ${constants.ERROR});\n    }\n    `\n            : ''}\n\n    /** Error */\n    ${(props) =>\n        props.errorText\n            ? `\n    border-color: var(--error, ${constants.ERROR});\n\n    & + span {\n        color: var(--error, ${constants.ERROR});\n    }\n    `\n            : ''}\n\n    /** Required */\n    &:required + span:after {\n        content: '*';\n        margin-left: 2px;\n        color: var(--error, ${constants.ERROR});\n    }\n\n    /** Label Animation */\n    & + span {\n        position: absolute;\n        padding: 0 5px;\n        top: 0px;\n        left: 4px;\n        font-size: 14px;\n        line-height: 32px;\n        transition: all 300ms ease;\n    }\n\n    ${(props) =>\n        props.value !== ''\n            ? `\n    & + span {\n        top: -8px;\n        background: var(--background, ${constants.BACKGROUND});\n        font-size: 12px;\n        line-height: 14px;\n    }\n    `\n            : ''}\n\n    &:focus + span, &:placeholder-shown + span {\n        top: -8px;\n        background: var(--background, ${constants.BACKGROUND});\n        font-size: 12px;\n        line-height: 14px;\n    }\n`;\n\nconst ErrorContainer = styled.div`\n    color: var(--error, ${constants.ERROR});\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n    margin-left: 3px;\n`;\n\nconst Input = React.forwardRef<HTMLInputElement, Omit<InputProps, 'as'>>((props, ref) => {\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState(props.value || '');\n\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (props.onChange) {\n            setValue(e.target.value);\n            props.onChange(e);\n        } else {\n            setValue(e.target.value);\n        }\n    };\n\n    return (\n        <Label>\n            <TextField\n                {...props}\n                ref={ref}\n                value={value}\n                onChange={onChangeHandler}\n                onFocus={handleFocus}\n                touched={touched}\n            />\n            <span>{props.label}</span>\n            {props.errorText && <ErrorContainer>{props.errorText}</ErrorContainer>}\n        </Label>\n    );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n\nInput.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string,\n    /** Error text to be shown below the field */\n    errorText: PropTypes.string,\n};\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useId } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\ntype InputProps = React.AllHTMLAttributes<HTMLInputElement> & {\n    /** Label for the field */\n    label?: string;\n    /** Error message for the field */\n    errorText?: string;\n};\n\ntype InputInternalProps = InputProps & {\n    touched: boolean;\n};\n\nconst Label = styled.label`\n    display: inline-flex;\n    flex-direction: column;\n    position: relative;\n    margin: 10px 5px;\n`;\n\nconst TextField = styled.input<InputInternalProps>`\n    outline: none;\n    color: inherit;\n    padding: 0 8px;\n    line-height: 30px;\n    min-height: 30px;\n    width: 250px;\n    border-radius: 3px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    display: inline-block;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n\n    /** Focused */\n    &:focus,\n    &:active {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:focus + span,\n    &:active + span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** Disabled */\n    &:disabled {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:disabled + span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    /** Invalid */\n    &:focus:invalid {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n\n    ${(props) =>\n        props.touched\n            ? `\n    &:invalid {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n\n    &:invalid + span {\n        color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n    `\n            : ''}\n\n    /** Error */\n    ${(props) =>\n        props.errorText\n            ? `\n    border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n    & + span {\n        color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n    `\n            : ''}\n\n    /** Required */\n    &:required + span:after {\n        content: '*';\n        margin-left: 2px;\n        color: ${getThemeValue(THEME_NAME.ERROR)};\n    }\n\n    /** Label Animation */\n    & + span {\n        position: absolute;\n        padding: 0 5px;\n        top: 0px;\n        left: 4px;\n        font-size: 14px;\n        line-height: 32px;\n        transition: all 300ms ease;\n    }\n\n    ${(props) =>\n        props.value !== ''\n            ? `\n    & + span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n    `\n            : ''}\n\n    &:focus + span, &:placeholder-shown + span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n`;\n\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n    margin-left: 3px;\n`;\n\nconst Input = React.forwardRef<HTMLInputElement, Omit<InputProps, 'as'>>((props, ref) => {\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState(props.value || '');\n    const errorId = useId();\n\n    useEffect(() => {\n        if (props.value !== undefined) {\n            setValue(props.value);\n        }\n    }, [props.value]);\n\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (props.onChange) {\n            setValue(e.target.value);\n            props.onChange(e);\n        } else {\n            setValue(e.target.value);\n        }\n    };\n\n    return (\n        <Label>\n            <TextField\n                {...props}\n                ref={ref}\n                value={value}\n                onChange={onChangeHandler}\n                onFocus={handleFocus}\n                touched={touched}\n                aria-invalid={!!props.errorText}\n                aria-required={props.required}\n                aria-describedby={props.errorText ? errorId : undefined}\n            />\n            <span>{props.label}</span>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </Label>\n    );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n\nInput.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string,\n    /** Error text to be shown below the field */\n    errorText: PropTypes.string,\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AA2EnC,iBAAS,KAAK,CACV,KAAK,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,GAAG,OAAO,KAAK,CAAC,SAAS,CAAC,oDAQlG;kBATQ,KAAK;;QAYV,0BAA0B;;;;AAI9B,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AA4FnC,iBAAS,KAAK,CACV,KAAK,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,GAAG,OAAO,KAAK,CAAC,SAAS,CAAC,oDASlG;kBAVQ,KAAK;;QAaV,0BAA0B;;;;AAI9B,eAAe,KAAK,CAAC"}