no-frills-ui 0.0.14-alpha.0 → 0.0.14-alpha.10

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;+CACb,SAAS,CAAC,aAAa;gDACtB,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,CAAC,KAA+F;IAC1G,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,CAAA;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/Input/Radio.tsx"],"sourcesContent":["import React from 'react';\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\ntype RadioProps = {\n    /** Label for the field */\n    label?: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nfunction RadioComponent(props: RadioProps, ref: React.Ref<HTMLInputElement>) {\n    const { label, ...rest } = props;\n\n    return (\n        <Label>\n            <HiddenInput {...rest} ref={ref} type=\"radio\" />\n            <StyledRadio />\n            <span>{label}</span>\n        </Label>\n    );\n}\n\nconst Radio = React.forwardRef<HTMLInputElement, RadioProps>(RadioComponent);\nexport default Radio;\n"],"names":["Label","styled","StyledRadio","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","HiddenInput","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","LIGHT_GREY","RadioComponent","props","ref","label","rest","_jsxs","_jsx","type","span","Radio","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,OAAAA,iBAAQC,MAAAA,CAAAA,OAAAA,EAAAA;;;;AAQd,MAAMC,WAAAA,iBAAcD,MAAAA,CAAAA,MAAAA,EAAAA;;;AAIIE,CAAAA,CAAAA,CAAAA,2DAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,YAAY,CAAA,EAAA,gOAAA,EAevBF,aAAAA,CAAcC,WAAWE,UAAU,CAAA,EAAA,2CAAA,CAAA;AAMzE,MAAMC,WAAAA,iBAAcN,MAAAA,CAAAA,OAAAA,EAAAA;;;yEAQFC,WAAAA,EAAAA,gBAAAA,EACMC,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,oBAAA,EAC5BL,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,gBAAA,EAG1CN,WAAAA,EAAAA,uCAAAA,EAKMA,WAAAA,EAAAA,gBAAAA,EACAC,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,6BACxBL,aAAAA,CAAcC,UAAAA,CAAWK,aAAa,CAAA,EAAA,8BAAA,EAGtCP,WAAAA,EAAAA,gBAAAA,EACRC,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,wBAAA,EACxBL,aAAAA,CAAcC,UAAAA,CAAWK,aAAa,CAAA,EAAA,sBAAA,EAI9CP,WAAAA,EAAAA,gBAAAA,EACAC,cAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,iCAAA,EAIvCL,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,iBAAA,EAI9BN,WAAAA,EAAAA,gBAAAA,EACKC,aAAAA,CAAcC,UAAAA,CAAWM,eAAe,CAAA,EAAA,oBAAA,EACpCP,aAAAA,CAAcC,UAAAA,CAAWO,UAAU,CAAA,EAAA,4CAAA,EAIpCT,WAAAA,EAAAA,gBAAAA,EACHC,aAAAA,CAAcC,UAAAA,CAAWM,eAAe,CAAA,EAAA,oBAAA,EACpCP,aAAAA,CAAcC,UAAAA,CAAWM,eAAe,CAAA,EAAA,4BAAA,EAInDP,aAAAA,CAAcC,UAAAA,CAAWM,eAAe,CAAA,EAAA,uBAAA,CAAA;AAUzD,SAASE,cAAAA,CAAeC,KAAiB,EAAEC,GAAgC,EAAA;AACvE,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAE3B,IAAA,qBACII,IAAA,CAACjB,OAAAA,EAAAA;;0BACGkB,GAAA,CAACX,WAAAA,EAAAA;AAAa,gBAAA,GAAGS,IAAI;gBAAEF,GAAAA,EAAKA,GAAAA;gBAAKK,IAAAA,EAAK;;0BACtCD,GAAA,CAAChB,WAAAA,EAAAA,EAAAA,CAAAA;0BACDgB,GAAA,CAACE,MAAAA,EAAAA;AAAML,gBAAAA,QAAAA,EAAAA;;;;AAGnB;AAEA,MAAMM,KAAAA,iBAAQC,KAAAA,CAAMC,UAAU,CAA+BX,cAAAA;;;;"}

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

@@ -1,14 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export declare const RadioGroup: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare function RadioButton(props: PropTypes.InferProps<React.AllHTMLAttributes<HTMLInputElement> & typeof RadioButton.propTypes>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace RadioButton {
-    var propTypes: {
-        /** Label for the field */
-        label: PropTypes.Requireable<string>;
-    };
-}
+declare const RadioButton: React.ForwardRefExoticComponent<{
+    /** Label for the field */
+    label?: string;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 export default RadioButton;

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

@@ -1,73 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import PropTypes from 'prop-types';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-const Input = styled.input `
-    appearance: none;
-    margin: 0;
-    width: 0;
-
-    & + span {
-        color: var(--primary, ${constants.PRIMARY});
-        padding: 6px 12px;
-        border: none;
-        border: 1px solid var(--primary, ${constants.PRIMARY});
-        cursor: pointer;
-        margin-right: -1px;
-        line-height: 18px;
-    }
-
-    &:enabled:focus + span {
-        box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
-    }
-
-    &:enabled:hover + span {
-        background-color: var(--primary, ${constants.PRIMARY_LIGHT});
-        color: #fff;
-    }
-
-    &:enabled:checked + span {
-        background-color: var(--primary, ${constants.PRIMARY});
-        color: #fff;
-    }
-
-    &:disabled + span {
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-        color: var(--disabled-border, ${constants.DISABLED_BORDER});
-    }
-
-    &:disabled:checked + span {
-        background-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        color: #fff;
-    }
-`;
-const Label = styled.label `
-    display: inline-flex;
-
-    &:focus-within {
-        z-index: 1;
-    }
-`;
-export const RadioGroup = styled.div `
-    display: inline-flex;
-    align-items: center;
-    border-radius: 3px;
-    margin: 5px 0;
-
-    & ${Label}:first-child > span {
-        border-radius: 3px 0 0 3px;
-    }
-
-    & ${Label}:last-child > span {
-        border-radius: 0 3px 3px 0;
-    }
-`;
-function RadioButton(props) {
-    return (_jsxs(Label, { children: [_jsx(Input, Object.assign({}, props, { type: 'radio' })), _jsx("span", { children: props.label })] }));
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+
+const Input = /*#__PURE__*/ styled("input", {
+    target: "e1fy5k9l0",
+    label: "Input"
+})("appearance:none;margin:0;width:0;& + span{color:", getThemeValue(THEME_NAME.PRIMARY), ";padding:6px 12px;border:none;border:1px solid ", getThemeValue(THEME_NAME.PRIMARY), ";cursor:pointer;margin-right:-1px;line-height:18px;}&:enabled:focus + span{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:enabled:hover + span{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";}&:enabled:checked + span{background-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";}&:disabled + span{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}&:disabled:checked + span{background-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";}");
+const Label = /*#__PURE__*/ styled("label", {
+    target: "e1fy5k9l1",
+    label: "Label"
+})("display:inline-flex;&:focus-within{z-index:1;}");
+const RadioGroup = /*#__PURE__*/ styled("div", {
+    target: "e1fy5k9l2",
+    label: "RadioGroup"
+})("display:inline-flex;align-items:center;border-radius:3px;margin:5px 0;& ", Label, ":first-child > span{border-radius:3px 0 0 3px;}& ", Label, ":last-child > span{border-radius:0 3px 3px 0;}");
+function RadioButtonComponent(props, ref) {
+    const { label, ...rest } = props;
+    return /*#__PURE__*/ jsxs(Label, {
+        children: [
+            /*#__PURE__*/ jsx(Input, {
+                ...rest,
+                type: "radio",
+                ref: ref
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: label
+            })
+        ]
+    });
 }
-RadioButton.propTypes = {
-    /** Label for the field */
-    label: PropTypes.string,
-};
-export default RadioButton;
-//# sourceMappingURL=RadioButton.js.map
+const RadioButton = /*#__PURE__*/ React.forwardRef(RadioButtonComponent);
+
+export { RadioGroup, RadioButton as default };
+//# sourceMappingURL=RadioButton.js.map

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,CAAC,KAAqG;IACtH,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,CAAA;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"RadioButton.js","sources":["../../../src/components/Input/RadioButton.tsx"],"sourcesContent":["import React from 'react';\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\ntype RadioButtonProps = {\n    /** Label for the field */\n    label?: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nfunction RadioButtonComponent(props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) {\n    const { label, ...rest } = props;\n    return (\n        <Label>\n            <Input {...rest} type=\"radio\" ref={ref} />\n            <span>{label}</span>\n        </Label>\n    );\n}\n\nconst RadioButton = React.forwardRef(RadioButtonComponent);\nexport default RadioButton;\n"],"names":["Input","styled","getThemeValue","THEME_NAME","PRIMARY","PRIMARY_LIGHT","TEXT_COLOR_LIGHT","BORDER_LIGHT_COLOR","DISABLED_BORDER","Label","RadioGroup","RadioButtonComponent","props","ref","label","rest","_jsxs","_jsx","type","span","RadioButton","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,KAAAA,iBAAQC,MAAAA,CAAAA,OAAAA,EAAAA;;;AAMGC,CAAAA,CAAAA,CAAAA,kDAAAA,EAAAA,aAAAA,CAAcC,WAAWC,OAAO,CAAA,EAAA,iDAAA,EAGrBF,cAAcC,UAAAA,CAAWC,OAAO,uGAO5BF,aAAAA,CAAcC,UAAAA,CAAWE,aAAa,CAAA,EAAA,4CAAA,EAI1CH,cAAcC,UAAAA,CAAWE,aAAa,cACjDH,aAAAA,CAAcC,UAAAA,CAAWG,gBAAgB,CAAA,EAAA,8CAAA,EAI9BJ,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,cAC3CF,aAAAA,CAAcC,UAAAA,CAAWG,gBAAgB,CAAA,EAAA,uCAAA,EAI9BJ,aAAAA,CAAcC,WAAWI,kBAAkB,CAAA,EAAA,SAAA,EACtDL,cAAcC,UAAAA,CAAWK,eAAe,oDAI7BN,aAAAA,CAAcC,UAAAA,CAAWK,eAAe,CAAA,EAAA,SAAA,EACnDN,aAAAA,CAAcC,WAAWG,gBAAgB,CAAA,EAAA,IAAA,CAAA;AAI1D,MAAMG,KAAAA,iBAAQR,MAAAA,CAAAA,OAAAA,EAAAA;;;;MAQDS,UAAAA,iBAAaT,MAAAA,CAAAA,KAAAA,EAAAA;;;AAMlBQ,CAAAA,CAAAA,CAAAA,0EAAAA,EAAAA,KAAAA,EAAAA,mDAAAA,EAIAA,KAAAA,EAAAA,gDAAAA;AAUR,SAASE,oBAAAA,CAAqBC,KAAuB,EAAEC,GAAgC,EAAA;AACnF,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAC3B,IAAA,qBACII,IAAA,CAACP,KAAAA,EAAAA;;0BACGQ,GAAA,CAACjB,KAAAA,EAAAA;AAAO,gBAAA,GAAGe,IAAI;gBAAEG,IAAAA,EAAK,OAAA;gBAAQL,GAAAA,EAAKA;;0BACnCI,GAAA,CAACE,MAAAA,EAAAA;AAAML,gBAAAA,QAAAA,EAAAA;;;;AAGnB;AAEA,MAAMM,WAAAA,iBAAcC,KAAAA,CAAMC,UAAU,CAACX,oBAAAA;;;;"}

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

@@ -1,15 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-interface SelectProps extends PropTypes.InferType<typeof Select.propTypes>, React.InputHTMLAttributes<HTMLSelectElement> {
-    value?: string;
-}
-declare function Select(props: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Select {
-    var propTypes: {
-        /** Label for the field */
-        label: PropTypes.Requireable<string>;
-        /** Error text to be shown below the field */
-        errorText: PropTypes.Requireable<string>;
-    };
-}
+declare const Select: React.ForwardRefExoticComponent<{
+    /** Label for the field */
+    label?: string;
+    /** Error text to be shown below the field */
+    errorText?: string;
+} & React.InputHTMLAttributes<HTMLSelectElement> & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

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

@@ -1,151 +1,104 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useState } from 'react';
-import PropTypes from 'prop-types';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React, { useState, useId, useEffect } from 'react';
 import styled from '@emotion/styled';
-import ExpandMore from '../../icons/ExpandMore';
-import constants from '../../shared/constants';
-const Label = styled.label `
-    display: inline-flex;
-    flex-direction: column;
-    flex: 1;
-    position: relative;
-    margin: 10px 5px;
-    pointer-events: none;
-    max-width: 268px;
+import ExpandMore from '../../icons/ExpandMore.js';
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-    & svg {
-        fill: currentColor;
-    }
-`;
-const SelectField = styled.select `
-    border: none;
-    color: inherit;
-    padding: 0 8px;
-    line-height: 30px;
-    min-height: 32px;
-    width: 268px;
-    border-radius: 3px;
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-    display: inline-block;
-    background-color: var(--background, ${constants.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});
-    }
-
-    &:focus ~ span, &:active ~ span {
-        color: var(--primary, ${constants.PRIMARY});
-    }
-
-    /** Disabled */
-    &:disabled {
-        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
-    }
-    
-    &:disabled ~ span {
-        color: var(--disabled, ${constants.DISABLED});
-    }
-
-    /** Invalid */
-    &:focus:invalid {
-        border-color: var(--error, ${constants.ERROR});
-        box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
-    }
-
-    ${props => props.touched ? `
+const Label$3 = /*#__PURE__*/ styled("label", {
+    target: "e1l48s8r0",
+    label: "Label"
+})("display:inline-flex;flex-direction:column;position:relative;margin:10px 5px;pointer-events:none;max-width:268px;& svg{fill:currentColor;}");
+const SelectField = /*#__PURE__*/ styled("select", {
+    target: "e1l48s8r1",
+    label: "SelectField"
+})("border:none;color:inherit;padding:0 8px;line-height:30px;min-height:32px;width:268px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";display:inline-block;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";pointer-events:auto;appearance:none;&:focus,&:active{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:focus ~ span,&:active ~ span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:disabled{border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:disabled ~ span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:focus:invalid{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)};
     }
-    ` : ''}
-
-    /** Error */
-    ${props => props.errorText ? `
-    border-color: var(--error, ${constants.ERROR});
+    ` : '', "    \n    ", (props)=>props.errorText ? `
+    border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
     & ~ span {
-        color: var(--error, ${constants.ERROR});
-    }
-    ` : ''}
-
-    /** Required */
-    &:required + span:after {
-        content: '*';
-        margin-left: 2px;
-        color: var(--error, ${constants.ERROR});
+        color: ${getThemeValue(THEME_NAME.ERROR)};
     }
-
-    /** Label Animation */
-    & + span {
-        position: absolute;
-        padding: 0 5px;
-        top: 0px;
-        left: 4px;
-        font-size: 14px;
-        line-height: 32px;
-        transition: all 300ms ease;
-    }
-
-    ${props => props.value !== '' ? `
+    ` : '', "    \n    &:required + span:after{content:'*';margin-left:2px;color:", getThemeValue(THEME_NAME.ERROR), ";}& + span{position:absolute;padding:0 5px;top:0px;left:4px;font-size:14px;line-height:32px;transition:all 300ms ease;}", (props)=>props.value !== '' ? `
     & + span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
-    ` : ''}
-
-    &:focus + span, &:placeholder-shown + span {
-        top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
-        font-size: 12px;
-        line-height: 14px;
-    }
-`;
-const ErrorContainer = styled.div `
-    color: var(--error, ${constants.ERROR});
-    padding-top: 3px;
-    font-size: 12px;
-    line-height: 14px;
-    margin-left: 3px;
-`;
-const ArrowContainer = styled.span `
-    position: absolute;
-    right: 8px;
-    top: 8px;
-`;
-export default function Select(props) {
+    ` : '', "    &:focus + span,&:placeholder-shown + span{top:-8px;background:", getThemeValue(THEME_NAME.BACKGROUND), ";font-size:12px;line-height:14px;}");
+const ErrorContainer$1 = /*#__PURE__*/ styled("div", {
+    target: "e1l48s8r2",
+    label: "ErrorContainer"
+})("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
+const ArrowContainer$1 = /*#__PURE__*/ styled("span", {
+    target: "e1l48s8r3",
+    label: "ArrowContainer"
+})("position:absolute;right:8px;top:8px;");
+function SelectComponent(props, ref) {
     const [touched, setTouched] = useState(false);
     const [value, setValue] = useState(props.value || '');
-    const handleFocus = (e) => {
+    const errorId = useId();
+    useEffect(()=>{
+        if (props.value !== undefined) {
+            setValue(props.value);
+        }
+    }, [
+        props.value
+    ]);
+    const handleFocus = (e)=>{
         setTouched(true);
         if (props.onFocus) {
             props.onFocus(e);
         }
     };
-    const onChangeHandler = (e) => {
+    const onChangeHandler = (e)=>{
         if (props.onChange) {
             setValue(e.target.value);
             props.onChange(e);
-        }
-        else {
+        } else {
             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 /*#__PURE__*/ jsxs(Label$3, {
+        children: [
+            /*#__PURE__*/ jsxs(SelectField, {
+                ...props,
+                ref: ref,
+                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: [
+                    /*#__PURE__*/ jsx("option", {}),
+                    props.children
+                ]
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: props.label
+            }),
+            /*#__PURE__*/ jsx(ArrowContainer$1, {
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ jsx(ExpandMore, {})
+            }),
+            props.errorText && /*#__PURE__*/ jsx(ErrorContainer$1, {
+                id: errorId,
+                children: props.errorText
+            })
+        ]
+    });
 }
-Select.propTypes = {
-    /** Label for the field */
-    label: PropTypes.string,
-    /** Error text to be shown below the field */
-    errorText: PropTypes.string,
-};
-//# sourceMappingURL=Select.js.map
+const Select = /*#__PURE__*/ React.forwardRef(SelectComponent);
+
+export { Select as default };
+//# sourceMappingURL=Select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Input/Select.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAW/C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;;;;CAYzB,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAqB;;;;;;;;4CAQV,SAAS,CAAC,YAAY;;0CAExB,SAAS,CAAC,UAAU;;;;;;uCAMvB,SAAS,CAAC,OAAO;+CACT,SAAS,CAAC,aAAa;;;;gCAItC,SAAS,CAAC,OAAO;;;;;+CAKF,SAAS,CAAC,eAAe;uDACjB,SAAS,CAAC,mBAAmB;;;;iCAInD,SAAS,CAAC,QAAQ;;;;;qCAKd,SAAS,CAAC,KAAK;mDACD,SAAS,CAAC,WAAW;;;MAGlE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;;qCAEM,SAAS,CAAC,KAAK;;;;8BAItB,SAAS,CAAC,KAAK;;KAExC,CAAC,CAAC,CAAC,EAAE;;;MAGJ,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;iCACA,SAAS,CAAC,KAAK;;;8BAGlB,SAAS,CAAC,KAAK;;KAExC,CAAC,CAAC,CAAC,EAAE;;;;;;8BAMoB,SAAS,CAAC,KAAK;;;;;;;;;;;;;;MAcvC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC;;;wCAGI,SAAS,CAAC,UAAU;;;;KAIvD,CAAA,CAAC,CAAC,EAAE;;;;wCAI+B,SAAS,CAAC,UAAU;;;;CAI3D,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;0BACP,SAAS,CAAC,KAAK;;;;;CAKxC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAkB;IAC7C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC3D,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAChB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACrB,CAAC;IACL,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,CAAC,CAAuC,EAAE,EAAE;QAChE,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACzB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;IACL,CAAC,CAAA;IAED,OAAO,CACH,MAAC,KAAK,eACF,MAAC,WAAW,oBACJ,KAAK,IACT,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,aAEhB,kBAAU,EACT,KAAK,CAAC,QAAQ,KACL,EACd,yBAAO,KAAK,CAAC,KAAK,GAAQ,EAC1B,KAAC,cAAc,cAAC,KAAC,UAAU,KAAG,GAAiB,EAC7C,KAAK,CAAC,SAAS,IAAI,KAAC,cAAc,cAAE,KAAK,CAAC,SAAS,GAAkB,IACnE,CACX,CAAC;AACN,CAAC;AAED,MAAM,CAAC,SAAS,GAAG;IACf,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,6CAA6C;IAC7C,SAAS,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAC"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Input/Select.tsx"],"sourcesContent":["import React, { useState, useEffect, useId } from 'react';\nimport styled from '@emotion/styled';\nimport ExpandMore from '../../icons/ExpandMore';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\ntype SelectProps = {\n    /** Label for the field */\n    label?: string;\n    /** Error text to be shown below the field */\n    errorText?: string;\n} & React.InputHTMLAttributes<HTMLSelectElement>;\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\nfunction SelectComponent(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\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                ref={ref}\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\nconst Select = React.forwardRef(SelectComponent);\nexport default Select;\n"],"names":["Label","styled","SelectField","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED_BACKGROUND","DISABLED","ERROR","ERROR_LIGHT","props","touched","errorText","value","ErrorContainer","ArrowContainer","SelectComponent","ref","setTouched","useState","setValue","errorId","useId","useEffect","undefined","handleFocus","e","onFocus","onChangeHandler","onChange","target","_jsxs","multiple","aria-invalid","aria-required","required","aria-describedby","_jsx","option","children","span","label","aria-hidden","ExpandMore","id","Select","React","forwardRef"],"mappings":"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"}

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

@@ -1,15 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-interface TextAreaProps extends PropTypes.InferType<typeof TextArea.propTypes>, React.InputHTMLAttributes<HTMLTextAreaElement> {
-    value?: string;
-}
-declare function TextArea(props: TextAreaProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace TextArea {
-    var propTypes: {
-        /** Label for the field */
-        label: PropTypes.Requireable<string>;
-        /** Error text to be shown below the field */
-        errorText: PropTypes.Requireable<string>;
-    };
-}
+declare const TextArea: React.ForwardRefExoticComponent<{
+    /** Label for the field */
+    label: string;
+    /** Error text to be shown below the field */
+    errorText?: string;
+} & React.InputHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;