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

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

@@ -1,78 +1,94 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 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;
     align-items: center;
     margin: 5px 0;
+    cursor: pointer;
+    position: relative;
 `;
-const Input = styled.input `
-    appearance: none;
-    margin: 0;
+const StyledRadio = styled.span `
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
+    border-radius: 50%;
+    display: block;
+    transition: background-color 0.3s ease;
+    position: relative;
+    flex-shrink: 0;
 
-    &::before {
-        content: ' ';
-        width: 16px;
-        height: 16px;
-        margin: 0 5px;
-        border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+    &::after {
+        content: '';
+        width: 100%;
+        height: 100%;
         border-radius: 50%;
-        display: block;
-        transition: background-color 0.3s ease;
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-shadow: inset 0 0 0 3px ${getThemeValue(THEME_NAME.BACKGROUND)};
+        opacity: 0;
+        transition: opacity 0.2s ease;
     }
+`;
+const HiddenInput = styled.input `
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+    margin: 0;
 
     /* checked */
-    &:checked::before {
-        border: 1px solid var(--primary, ${constants.PRIMARY});
-        background-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: inset 0 0 0 3px var(--background, ${constants.BACKGROUND});
+    &:checked + ${StyledRadio} {
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+    }
+
+    &:checked + ${StyledRadio}::after {
+        opacity: 1;
     }
 
     /* focus */
-    &:enabled:focus::before {
-        border: 1px solid var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});
-        cursor: pointer;
+    &:enabled:focus + ${StyledRadio} {
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
-    &:enabled:checked:focus::before {
-        border: 1px solid var(--primary, ${constants.PRIMARY});
-        box-shadow:
-            0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT}),
-            inset 0 0 0 3px var(--background, ${constants.BACKGROUND});
-        cursor: pointer;
+    &:enabled:checked:focus + ${StyledRadio} {
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     /* hover */
-    &:enabled:hover::before {
-        border: 1px solid var(--primary, ${constants.PRIMARY});
-        cursor: pointer;
+    &:enabled:hover + ${StyledRadio} {
+        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
-    &:enabled:hover + span {
-        color: var(--primary, ${constants.PRIMARY});
-        cursor: pointer;
+    &:enabled:hover ~ span {
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
     }
 
     /* disabled */
-    &:disabled::before {
-        border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
-        background-color: var(--light-grey, ${constants.LIGHT_GREY});
+    &:disabled + ${StyledRadio} {
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};
+        cursor: not-allowed;
     }
 
-    &:disabled:checked::before {
-        border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
-        background-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        box-shadow: inset 0 0 0 3px var(--background, ${constants.BACKGROUND});
+    &:disabled:checked + ${StyledRadio} {
+        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
     }
 
-    &:disabled + span {
-        color: var(--disabled-border, ${constants.DISABLED_BORDER});
+    &:disabled ~ span {
+        color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        cursor: not-allowed;
     }
 `;
 function Radio(props) {
-    return (_jsxs(Label, { children: [_jsx(Input, Object.assign({}, props, { type: "radio" })), _jsx("span", { children: props.label })] }));
+    return (_jsxs(Label, { children: [_jsx(HiddenInput, Object.assign({}, props, { type: "radio" })), _jsx(StyledRadio, {}), _jsx("span", { children: props.label })] }));
 }
 Radio.propTypes = {
     /** Label for the field */

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Input/Radio.tsx"],"names":[],"mappings":";AACA,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;;;;CAIzB,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;gDASsB,SAAS,CAAC,YAAY;;;;;;;;2CAQ3B,SAAS,CAAC,OAAO;2CACjB,SAAS,CAAC,OAAO;wDACJ,SAAS,CAAC,UAAU;;;;;2CAKjC,SAAS,CAAC,OAAO;+CACb,SAAS,CAAC,aAAa;;;;;2CAK3B,SAAS,CAAC,OAAO;;uCAErB,SAAS,CAAC,aAAa;gDACd,SAAS,CAAC,UAAU;;;;;;2CAMzB,SAAS,CAAC,OAAO;;;;;gCAK5B,SAAS,CAAC,OAAO;;;;;;mDAME,SAAS,CAAC,eAAe;8CAC9B,SAAS,CAAC,UAAU;;;;mDAIf,SAAS,CAAC,eAAe;mDACzB,SAAS,CAAC,eAAe;wDACpB,SAAS,CAAC,UAAU;;;;wCAIpC,SAAS,CAAC,eAAe;;CAEhE,CAAC;AAEF,SAAS,KAAK,CACV,KAA+F;IAE/F,OAAO,CACH,MAAC,KAAK,eACF,KAAC,KAAK,oBAAK,KAAK,IAAE,IAAI,EAAC,OAAO,IAAG,EACjC,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACtB,CACX,CAAC;AACN,CAAC;AAED,KAAK,CAAC,SAAS,GAAG;IACd,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nconst Label = styled.label`\n    display: inline-flex;\n    align-items: center;\n    margin: 5px 0;\n`;\n\nconst Input = styled.input`\n    appearance: none;\n    margin: 0;\n\n    &::before {\n        content: ' ';\n        width: 16px;\n        height: 16px;\n        margin: 0 5px;\n        border: 1px solid var(--border-color, ${constants.BORDER_COLOR});\n        border-radius: 50%;\n        display: block;\n        transition: background-color 0.3s ease;\n    }\n\n    /* checked */\n    &:checked::before {\n        border: 1px solid var(--primary, ${constants.PRIMARY});\n        background-color: var(--primary, ${constants.PRIMARY});\n        box-shadow: inset 0 0 0 3px var(--background, ${constants.BACKGROUND});\n    }\n\n    /* focus */\n    &:enabled:focus::before {\n        border: 1px solid var(--primary, ${constants.PRIMARY});\n        box-shadow: 0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT});\n        cursor: pointer;\n    }\n\n    &:enabled:checked:focus::before {\n        border: 1px solid var(--primary, ${constants.PRIMARY});\n        box-shadow:\n            0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT}),\n            inset 0 0 0 3px var(--background, ${constants.BACKGROUND});\n        cursor: pointer;\n    }\n\n    /* hover */\n    &:enabled:hover::before {\n        border: 1px solid var(--primary, ${constants.PRIMARY});\n        cursor: pointer;\n    }\n\n    &:enabled:hover + span {\n        color: var(--primary, ${constants.PRIMARY});\n        cursor: pointer;\n    }\n\n    /* disabled */\n    &:disabled::before {\n        border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});\n        background-color: var(--light-grey, ${constants.LIGHT_GREY});\n    }\n\n    &:disabled:checked::before {\n        border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});\n        background-color: var(--disabled-border, ${constants.DISABLED_BORDER});\n        box-shadow: inset 0 0 0 3px var(--background, ${constants.BACKGROUND});\n    }\n\n    &:disabled + span {\n        color: var(--disabled-border, ${constants.DISABLED_BORDER});\n    }\n`;\n\nfunction Radio(\n    props: PropTypes.InferProps<React.AllHTMLAttributes<HTMLInputElement> & typeof Radio.propTypes>,\n) {\n    return (\n        <Label>\n            <Input {...props} type=\"radio\" />\n            <span>{props.label}</span>\n        </Label>\n    );\n}\n\nRadio.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string,\n};\n\nexport default Radio;\n"]}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Input/Radio.tsx"],"names":[],"mappings":";AACA,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,WAAW,GAAG,MAAM,CAAC,IAAI,CAAA;;;;wBAIP,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;sCAexB,aAAa,CAAC,UAAU,CAAC,UAAU,CAAC;;;;CAIzE,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;kBAQd,WAAW;wBACL,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;4BAC7B,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;kBAG3C,WAAW;;;;;wBAKL,WAAW;wBACX,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;gCACzB,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC;;;gCAGvC,WAAW;wBACnB,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;gCACzB,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC;;;;wBAI/C,WAAW;wBACX,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;;iBAIxC,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;;mBAI/B,WAAW;wBACN,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC;4BACrC,aAAa,CAAC,UAAU,CAAC,UAAU,CAAC;;;;2BAIrC,WAAW;wBACd,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC;4BACrC,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC;;;;iBAIpD,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC;;;CAGzD,CAAC;AAEF,SAAS,KAAK,CACV,KAA+F;IAE/F,OAAO,CACH,MAAC,KAAK,eACF,KAAC,WAAW,oBAAK,KAAK,IAAE,IAAI,EAAC,OAAO,IAAG,EACvC,KAAC,WAAW,KAAG,EACf,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACtB,CACX,CAAC;AACN,CAAC;AAED,KAAK,CAAC,SAAS,GAAG;IACd,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import React 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    display: inline-flex;\n    align-items: center;\n    margin: 5px 0;\n    cursor: pointer;\n    position: relative;\n`;\n\nconst StyledRadio = styled.span`\n    width: 16px;\n    height: 16px;\n    margin-right: 5px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 50%;\n    display: block;\n    transition: background-color 0.3s ease;\n    position: relative;\n    flex-shrink: 0;\n\n    &::after {\n        content: '';\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n        position: absolute;\n        top: 0;\n        left: 0;\n        box-shadow: inset 0 0 0 3px ${getThemeValue(THEME_NAME.BACKGROUND)};\n        opacity: 0;\n        transition: opacity 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 + ${StyledRadio} {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:checked + ${StyledRadio}::after {\n        opacity: 1;\n    }\n\n    /* focus */\n    &:enabled:focus + ${StyledRadio} {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:enabled:checked:focus + ${StyledRadio} {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    /* hover */\n    &:enabled:hover + ${StyledRadio} {\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 + ${StyledRadio} {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        cursor: not-allowed;\n    }\n\n    &:disabled:checked + ${StyledRadio} {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n\n    &:disabled ~ span {\n        color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        cursor: not-allowed;\n    }\n`;\n\nfunction Radio(\n    props: PropTypes.InferProps<React.AllHTMLAttributes<HTMLInputElement> & typeof Radio.propTypes>,\n) {\n    return (\n        <Label>\n            <HiddenInput {...props} type=\"radio\" />\n            <StyledRadio />\n            <span>{props.label}</span>\n        </Label>\n    );\n}\n\nRadio.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string,\n};\n\nexport default Radio;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/Input/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAoDnC,eAAO,MAAM,UAAU;;SA7Bf,MAAO,WAAW;qFA0CzB,CAAC;AAEF,iBAAS,WAAW,CAChB,KAAK,EAAE,SAAS,CAAC,UAAU,CACvB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,GAAG,OAAO,WAAW,CAAC,SAAS,CAC3E,oDAQJ;kBAXQ,WAAW;;QAchB,0BAA0B;;;;AAI9B,eAAe,WAAW,CAAC"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/Input/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAoDnC,eAAO,MAAM,UAAU;;SAhC8C,MACjE,WAEE;qFA0CL,CAAC;AAEF,iBAAS,WAAW,CAChB,KAAK,EAAE,SAAS,CAAC,UAAU,CACvB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,GAAG,OAAO,WAAW,CAAC,SAAS,CAC3E,oDAQJ;kBAXQ,WAAW;;QAchB,0BAA0B;;;;AAI9B,eAAe,WAAW,CAAC"}

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

@@ -1,44 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 const Input = styled.input `
     appearance: none;
     margin: 0;
     width: 0;
 
     & + span {
-        color: var(--primary, ${constants.PRIMARY});
+        color: ${getThemeValue(THEME_NAME.PRIMARY)};
         padding: 6px 12px;
         border: none;
-        border: 1px solid var(--primary, ${constants.PRIMARY});
+        border: 1px solid ${getThemeValue(THEME_NAME.PRIMARY)};
         cursor: pointer;
         margin-right: -1px;
         line-height: 18px;
     }
 
     &:enabled:focus + span {
-        box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
+        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
     }
 
     &:enabled:hover + span {
-        background-color: var(--primary, ${constants.PRIMARY_LIGHT});
-        color: #fff;
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
+        color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
     }
 
     &:enabled:checked + span {
-        background-color: var(--primary, ${constants.PRIMARY});
-        color: #fff;
+        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};
+        color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
     }
 
     &:disabled + span {
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-        color: var(--disabled-border, ${constants.DISABLED_BORDER});
+        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
+        color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
     }
 
     &:disabled:checked + span {
-        background-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        color: #fff;
+        background-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
+        color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
     }
 `;
 const Label = styled.label `

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/components/Input/RadioButton.tsx"],"names":[],"mappings":";AACA,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;;;;;;gCAMM,SAAS,CAAC,OAAO;;;2CAGN,SAAS,CAAC,OAAO;;;;;;;+CAOb,SAAS,CAAC,aAAa;;;;2CAI3B,SAAS,CAAC,aAAa;;;;;2CAKvB,SAAS,CAAC,OAAO;;;;;sDAKN,SAAS,CAAC,kBAAkB;wCAC1C,SAAS,CAAC,eAAe;;;;mDAId,SAAS,CAAC,eAAe;;;CAG3E,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;CAMzB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;QAM5B,KAAK;;;;QAIL,KAAK;;;CAGZ,CAAC;AAEF,SAAS,WAAW,CAChB,KAEC;IAED,OAAO,CACH,MAAC,KAAK,eACF,KAAC,KAAK,oBAAK,KAAK,IAAE,IAAI,EAAC,OAAO,IAAG,EACjC,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACtB,CACX,CAAC;AACN,CAAC;AAED,WAAW,CAAC,SAAS,GAAG;IACpB,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nconst Input = styled.input`\n    appearance: none;\n    margin: 0;\n    width: 0;\n\n    & + span {\n        color: var(--primary, ${constants.PRIMARY});\n        padding: 6px 12px;\n        border: none;\n        border: 1px solid var(--primary, ${constants.PRIMARY});\n        cursor: pointer;\n        margin-right: -1px;\n        line-height: 18px;\n    }\n\n    &:enabled:focus + span {\n        box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});\n    }\n\n    &:enabled:hover + span {\n        background-color: var(--primary, ${constants.PRIMARY_LIGHT});\n        color: #fff;\n    }\n\n    &:enabled:checked + span {\n        background-color: var(--primary, ${constants.PRIMARY});\n        color: #fff;\n    }\n\n    &:disabled + span {\n        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});\n        color: var(--disabled-border, ${constants.DISABLED_BORDER});\n    }\n\n    &:disabled:checked + span {\n        background-color: var(--disabled-border, ${constants.DISABLED_BORDER});\n        color: #fff;\n    }\n`;\n\nconst Label = styled.label`\n    display: inline-flex;\n\n    &:focus-within {\n        z-index: 1;\n    }\n`;\n\nexport const RadioGroup = styled.div`\n    display: inline-flex;\n    align-items: center;\n    border-radius: 3px;\n    margin: 5px 0;\n\n    & ${Label}:first-child > span {\n        border-radius: 3px 0 0 3px;\n    }\n\n    & ${Label}:last-child > span {\n        border-radius: 0 3px 3px 0;\n    }\n`;\n\nfunction RadioButton(\n    props: PropTypes.InferProps<\n        React.AllHTMLAttributes<HTMLInputElement> & typeof RadioButton.propTypes\n    >,\n) {\n    return (\n        <Label>\n            <Input {...props} type=\"radio\" />\n            <span>{props.label}</span>\n        </Label>\n    );\n}\n\nRadioButton.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string,\n};\n\nexport default RadioButton;\n"]}
+{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/components/Input/RadioButton.tsx"],"names":[],"mappings":";AACA,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;;;;;;iBAMT,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;4BAGtB,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;;;;;;;gCAO7B,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC;;;;4BAI3C,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC;iBAClD,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC;;;;4BAI/B,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;iBAC5C,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC;;;;4BAI/B,aAAa,CAAC,UAAU,CAAC,kBAAkB,CAAC;iBACvD,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC;;;;4BAI9B,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC;iBACpD,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC;;CAE1D,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;CAMzB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;QAM5B,KAAK;;;;QAIL,KAAK;;;CAGZ,CAAC;AAEF,SAAS,WAAW,CAChB,KAEC;IAED,OAAO,CACH,MAAC,KAAK,eACF,KAAC,KAAK,oBAAK,KAAK,IAAE,IAAI,EAAC,OAAO,IAAG,EACjC,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACtB,CACX,CAAC;AACN,CAAC;AAED,WAAW,CAAC,SAAS,GAAG;IACpB,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Input = styled.input`\n    appearance: none;\n    margin: 0;\n    width: 0;\n\n    & + span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        padding: 6px 12px;\n        border: none;\n        border: 1px solid ${getThemeValue(THEME_NAME.PRIMARY)};\n        cursor: pointer;\n        margin-right: -1px;\n        line-height: 18px;\n    }\n\n    &:enabled:focus + span {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:enabled:hover + span {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n        color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    }\n\n    &:enabled:checked + span {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    }\n\n    &:disabled + span {\n        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n        color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n\n    &:disabled:checked + span {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    }\n`;\n\nconst Label = styled.label`\n    display: inline-flex;\n\n    &:focus-within {\n        z-index: 1;\n    }\n`;\n\nexport const RadioGroup = styled.div`\n    display: inline-flex;\n    align-items: center;\n    border-radius: 3px;\n    margin: 5px 0;\n\n    & ${Label}:first-child > span {\n        border-radius: 3px 0 0 3px;\n    }\n\n    & ${Label}:last-child > span {\n        border-radius: 0 3px 3px 0;\n    }\n`;\n\nfunction RadioButton(\n    props: PropTypes.InferProps<\n        React.AllHTMLAttributes<HTMLInputElement> & typeof RadioButton.propTypes\n    >,\n) {\n    return (\n        <Label>\n            <Input {...props} type=\"radio\" />\n            <span>{props.label}</span>\n        </Label>\n    );\n}\n\nRadioButton.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string,\n};\n\nexport default RadioButton;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,UAAU,WACN,SACI,SAAS,CAAC,SAAS,CAAC,OAAO,MAAM,CAAC,SAAS,CAAC,EAC5C,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AA2ID,iBAAwB,MAAM,CAAC,KAAK,EAAE,WAAW,oDAwChD;kBAxCuB,MAAM;;QA2C1B,0BAA0B;;QAE1B,6CAA6C;;;;eA7CzB,MAAM"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,UAAU,WACN,SACI,SAAS,CAAC,SAAS,CAAC,OAAO,MAAM,CAAC,SAAS,CAAC,EAC5C,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AA0ID,iBAAwB,MAAM,CAAC,KAAK,EAAE,WAAW,oDAkDhD;kBAlDuB,MAAM;;QAqD1B,0BAA0B;;QAE1B,6CAA6C;;;;eAvDzB,MAAM"}

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

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useEffect, useId } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import ExpandMore from '../../icons/ExpandMore';
-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;
     pointer-events: none;
@@ -25,48 +24,48 @@ const SelectField = styled.select `
     min-height: 32px;
     width: 268px;
     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)};
     pointer-events: auto;
     appearance: none;
 
     /** Focused */
     &:focus,
     &:active {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 4px var(--primary, ${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: var(--disabled, ${constants.DISABLED});
+        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)};
     }
     `
     : ''}
@@ -74,10 +73,10 @@ const SelectField = styled.select `
     /** 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)};
     }
     `
     : ''}
@@ -86,7 +85,7 @@ const SelectField = styled.select `
     &:required + span:after {
         content: '*';
         margin-left: 2px;
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
 
     /** Label Animation */
@@ -104,7 +103,7 @@ const SelectField = styled.select `
     ? `
     & + span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
@@ -113,13 +112,13 @@ const SelectField = styled.select `
 
     &: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;
@@ -133,6 +132,12 @@ const ArrowContainer = styled.span `
 export default function Select(props) {
     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) {
@@ -148,7 +153,7 @@ export default function Select(props) {
             setValue(e.target.value);
         }
     };
-    return (_jsxs(Label, { children: [_jsxs(SelectField, Object.assign({}, props, { multiple: false, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched, children: [_jsx("option", {}), props.children] })), _jsx("span", { children: props.label }), _jsx(ArrowContainer, { children: _jsx(ExpandMore, {}) }), props.errorText && _jsx(ErrorContainer, { children: props.errorText })] }));
+    return (_jsxs(Label, { children: [_jsxs(SelectField, Object.assign({}, props, { multiple: false, value: value, onChange: onChangeHandler, onFocus: handleFocus, touched: touched, "aria-invalid": !!props.errorText, "aria-required": props.required, "aria-describedby": props.errorText ? errorId : undefined, children: [_jsx("option", {}), props.children] })), _jsx("span", { children: props.label }), _jsx(ArrowContainer, { "aria-hidden": "true", children: _jsx(ExpandMore, {}) }), props.errorText && _jsx(ErrorContainer, { id: errorId, children: props.errorText })] }));
 }
 Select.propTypes = {
     /** Label for the field */

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Input/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport ExpandMore from '../../icons/ExpandMore';\nimport constants from '../../shared/constants';\n\ninterface SelectProps\n    extends\n        PropTypes.InferType<typeof Select.propTypes>,\n        React.InputHTMLAttributes<HTMLSelectElement> {\n    value?: string;\n}\n\ntype SelectInternalProps = SelectProps & {\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    pointer-events: none;\n    max-width: 268px;\n\n    & svg {\n        fill: currentColor;\n    }\n`;\n\nconst SelectField = styled.select<SelectInternalProps>`\n    border: none;\n    color: inherit;\n    padding: 0 8px;\n    line-height: 30px;\n    min-height: 32px;\n    width: 268px;\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    pointer-events: auto;\n    appearance: none;\n\n    /** Focused */\n    &:focus,\n    &:active {\n        border-color: var(--primary, ${constants.PRIMARY});\n        box-shadow: 0 0 0 4px var(--primary, ${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: var(--disabled, ${constants.DISABLED});\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 ArrowContainer = styled.span`\n    position: absolute;\n    right: 8px;\n    top: 8px;\n`;\n\nexport default function Select(props: SelectProps) {\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState(props.value || '');\n\n    const handleFocus = (e: React.FocusEvent<HTMLSelectElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    const onChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {\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            <SelectField\n                {...props}\n                multiple={false}\n                value={value}\n                onChange={onChangeHandler}\n                onFocus={handleFocus}\n                touched={touched}\n            >\n                <option />\n                {props.children}\n            </SelectField>\n            <span>{props.label}</span>\n            <ArrowContainer>\n                <ExpandMore />\n            </ArrowContainer>\n            {props.errorText && <ErrorContainer>{props.errorText}</ErrorContainer>}\n        </Label>\n    );\n}\n\nSelect.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":"Select.js","sourceRoot":"","sources":["../../../src/components/Input/Select.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 ExpandMore from '../../icons/ExpandMore';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\ninterface SelectProps\n    extends\n        PropTypes.InferType<typeof Select.propTypes>,\n        React.InputHTMLAttributes<HTMLSelectElement> {\n    value?: string;\n}\n\ntype SelectInternalProps = SelectProps & {\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    pointer-events: none;\n    max-width: 268px;\n\n    & svg {\n        fill: currentColor;\n    }\n`;\n\nconst SelectField = styled.select<SelectInternalProps>`\n    border: none;\n    color: inherit;\n    padding: 0 8px;\n    line-height: 30px;\n    min-height: 32px;\n    width: 268px;\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    pointer-events: auto;\n    appearance: none;\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 ArrowContainer = styled.span`\n    position: absolute;\n    right: 8px;\n    top: 8px;\n`;\n\nexport default function Select(props: SelectProps) {\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<HTMLSelectElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    const onChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {\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            <SelectField\n                {...props}\n                multiple={false}\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                <option />\n                {props.children}\n            </SelectField>\n            <span>{props.label}</span>\n            <ArrowContainer aria-hidden=\"true\">\n                <ExpandMore />\n            </ArrowContainer>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </Label>\n    );\n}\n\nSelect.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/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/Input/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,UAAU,aACN,SACI,SAAS,CAAC,SAAS,CAAC,OAAO,QAAQ,CAAC,SAAS,CAAC,EAC9C,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AA4HD,iBAAwB,QAAQ,CAAC,KAAK,EAAE,aAAa,oDAiCpD;kBAjCuB,QAAQ;;QAoC5B,0BAA0B;;QAE1B,6CAA6C;;;;eAtCzB,QAAQ"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/Input/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,UAAU,aACN,SACI,SAAS,CAAC,SAAS,CAAC,OAAO,QAAQ,CAAC,SAAS,CAAC,EAC9C,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AA2HD,iBAAwB,QAAQ,CAAC,KAAK,EAAE,aAAa,oDA2CpD;kBA3CuB,QAAQ;;QA8C5B,0BAA0B;;QAE1B,6CAA6C;;;;eAhDzB,QAAQ"}

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useState } from 'react';
+import { 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;
 `;
@@ -17,46 +16,46 @@ const TextField = styled.textarea `
     min-height: 150px;
     min-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, ${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: var(--disabled, ${constants.DISABLED});
+        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)};
     }
     `
     : ''}
@@ -64,10 +63,10 @@ const TextField = styled.textarea `
     /** 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)};
     }
     `
     : ''}
@@ -76,7 +75,7 @@ const TextField = styled.textarea `
     &:required + span:after {
         content: '*';
         margin-left: 2px;
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
 
     /** Label Animation */
@@ -94,7 +93,7 @@ const TextField = styled.textarea `
     ? `
     & + span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
@@ -103,13 +102,13 @@ const TextField = styled.textarea `
 
     &: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;
@@ -118,6 +117,12 @@ const ErrorContainer = styled.div `
 export default function TextArea(props) {
     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) {
@@ -133,7 +138,7 @@ export default function TextArea(props) {
             setValue(e.target.value);
         }
     };
-    return (_jsxs(Label, { children: [_jsx(TextField, Object.assign({}, props, { 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, { 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 })] }));
 }
 TextArea.propTypes = {
     /** Label for the field */

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/Input/TextArea.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\ninterface TextAreaProps\n    extends\n        PropTypes.InferType<typeof TextArea.propTypes>,\n        React.InputHTMLAttributes<HTMLTextAreaElement> {\n    value?: string;\n}\n\ntype TextAreaInternalProps = TextAreaProps & {\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.textarea<TextAreaInternalProps>`\n    border: none;\n    color: inherit;\n    padding: 8px;\n    min-height: 150px;\n    min-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, ${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: var(--disabled, ${constants.DISABLED});\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\nexport default function TextArea(props: TextAreaProps) {\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState(props.value || '');\n\n    const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\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                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\nTextArea.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":"TextArea.js","sourceRoot":"","sources":["../../../src/components/Input/TextArea.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\ninterface TextAreaProps\n    extends\n        PropTypes.InferType<typeof TextArea.propTypes>,\n        React.InputHTMLAttributes<HTMLTextAreaElement> {\n    value?: string;\n}\n\ntype TextAreaInternalProps = TextAreaProps & {\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.textarea<TextAreaInternalProps>`\n    border: none;\n    color: inherit;\n    padding: 8px;\n    min-height: 150px;\n    min-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\nexport default function TextArea(props: TextAreaProps) {\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<HTMLTextAreaElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\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                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\nTextArea.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"]}