@wireapp/react-ui-kit 9.0.8 → 9.0.10

package/lib/Form/Button.js

@@ -27,7 +27,7 @@ var ButtonVariant;
     ButtonVariant["SEND"] = "send";
 })(ButtonVariant = exports.ButtonVariant || (exports.ButtonVariant = {}));
 const buttonStyle = (theme, _a) => {
-    var { variant = ButtonVariant.PRIMARY, backgroundColor, block = false, disabled = false, noCapital = false, bold = true, center = true, color = Identity_1.COLOR.WHITE, fontSize = '16px', noWrap = true, textTransform = 'none', truncate = true } = _a, props = __rest(_a, ["variant", "backgroundColor", "block", "disabled", "noCapital", "bold", "center", "color", "fontSize", "noWrap", "textTransform", "truncate"]);
+    var { variant = ButtonVariant.PRIMARY, backgroundColor, block = false, disabled = false, noCapital = false, bold = true, center = true, color = Identity_1.COLOR.WHITE, fontSize = theme.fontSizes.base, noWrap = true, textTransform = 'none', truncate = true } = _a, props = __rest(_a, ["variant", "backgroundColor", "block", "disabled", "noCapital", "bold", "center", "color", "fontSize", "noWrap", "textTransform", "truncate"]);
     return (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block,
         bold,
         center,
@@ -65,7 +65,7 @@ const buttonStyle = (theme, _a) => {
             border: `1px solid ${theme.Button.secondaryActiveBorder}`,
             color: theme.general.primaryColor,
         },
-    })))), (variant === ButtonVariant.TERTIARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg), border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`, borderRadius: '12px', color: disabled ? theme.Input.placeholderColor : theme.general.color, fontSize: '14px', fontWeight: 700, lineHeight: '24px', padding: '4px 8px', '& > svg > path': {
+    })))), (variant === ButtonVariant.TERTIARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg), border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`, borderRadius: '12px', color: disabled ? theme.Input.placeholderColor : theme.general.color, fontSize: theme.fontSizes.medium, fontWeight: 700, lineHeight: '1.5rem', padding: '4px 8px', '& > svg > path': {
             fill: disabled ? theme.Input.placeholderColor : theme.general.color,
         } }, (!disabled && {
         '&:hover, &:focus': {
@@ -82,7 +82,7 @@ const buttonStyle = (theme, _a) => {
                 fill: theme.IconButton.primaryActiveFillColor,
             },
         },
-    })))), (variant === ButtonVariant.QUATERNARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? Identity_1.COLOR_V2.GRAY_50 : Identity_1.COLOR_V2.GREEN), color: disabled ? Identity_1.COLOR_V2.GRAY_80 : Identity_1.COLOR_V2.WHITE, lineHeight: '24px' }, (!disabled && {
+    })))), (variant === ButtonVariant.QUATERNARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? Identity_1.COLOR_V2.GRAY_50 : Identity_1.COLOR_V2.GREEN), color: disabled ? Identity_1.COLOR_V2.GRAY_80 : Identity_1.COLOR_V2.WHITE, lineHeight: '1.5rem' }, (!disabled && {
         '&:hover, &:focus': {
             backgroundColor: Identity_1.COLOR_V2.GREEN_LIGHT_600,
         },

package/lib/Form/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Form/Checkbox.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAkB,UAAU,EAAC,MAAM,SAAS,CAAC;AAGpD,OAAO,EAAO,SAAS,EAAY,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAmFD,UAAU,aAAa,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACjE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6D5C,CAAC;AAGF,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,eAAe,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAEnE,eAAO,MAAM,aAAa,iBAAgB,kBAAkB,qDAS3D,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Form/Checkbox.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAkB,UAAU,EAAC,MAAM,SAAS,CAAC;AAGpD,OAAO,EAAO,SAAS,EAAY,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAmFD,UAAU,aAAa,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACjE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8D5C,CAAC;AAGF,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,eAAe,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAEnE,eAAO,MAAM,aAAa,iBAAgB,kBAAkB,qDAS3D,CAAC"}

package/lib/Form/Checkbox.js

@@ -67,10 +67,10 @@ const StyledLabel = (_a) => {
                 fill: theme.general.backgroundColor,
             }, [`.${Input_1.INPUT_CLASSNAME} + & > svg`]: Object.assign({ fill: 'none', position: 'absolute', top: '50%', transform: 'translateY(-50%)' }, (labelBeforeCheckbox
                 ? {
-                    right: '0.75rem',
+                    right: theme.fontSizes.small,
                 }
                 : {
-                    left: '0.25rem',
+                    left: '4px',
                 })) }, (!disabled && {
             [`.${Input_1.INPUT_CLASSNAME}:hover + &::before`]: {
                 borderColor: theme.general.primaryColor,
@@ -83,10 +83,10 @@ const StyledLabel = (_a) => {
                 }
                 : {
                     border: `2px solid ${theme.Checkbox.disableBorderColor}`,
-                })), { borderRadius: '3px', boxSizing: 'border-box', content: '""', display: 'inline-block', width: '22px', height: '22px', lineHeight: 1.4, margin: '0 8px 0 0px', color: theme.general.color }) }), (labelBeforeCheckbox && {
+                })), { borderRadius: '3px', boxSizing: 'border-box', content: '""', display: 'inline-block', width: '22px', height: '22px', lineHeight: '1.4rem', margin: '0 8px 0 0px', color: theme.general.color }) }), (labelBeforeCheckbox && {
             flexDirection: 'row-reverse',
             justifyContent: 'space-between',
-        })), { alignItems: 'center', position: 'relative', margin: '0 0 0 -16px', width: aligncenter ? 'auto' : '100%', lineHeight: 1.4, display: 'flex', opacity: disabled ? 0.56 : 1, cursor: disabled ? 'not-allowed' : 'pointer', borderRadius: '4px' })) }, props, { children: [children, (0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "15", height: "13", viewBox: "0 0 16 13", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z" }) }))] })));
+        })), { alignItems: 'center', position: 'relative', margin: '0 0 0 -16px', width: aligncenter ? 'auto' : '100%', lineHeight: '1.4rem', display: 'flex', opacity: disabled ? 0.56 : 1, cursor: disabled ? 'not-allowed' : 'pointer', borderRadius: '4px' })) }, props, { children: [children, (0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "15", height: "13", viewBox: "0 0 16 13", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z" }) }))] })));
 };
 exports.Checkbox = React.forwardRef((_a, ref) => {
     var { id, children, style, disabled, wrapperCSS = {}, markInvalid, aligncenter, labelBeforeCheckbox, outlineOffset = '0.4rem' } = _a, props = __rest(_a, ["id", "children", "style", "disabled", "wrapperCSS", "markInvalid", "aligncenter", "labelBeforeCheckbox", "outlineOffset"]);
@@ -100,7 +100,7 @@ exports.Checkbox = React.forwardRef((_a, ref) => {
                     opacity: 0,
                     width: '22px',
                     cursor: disabled ? 'not-allowed' : 'pointer',
-                }, disabled: disabled, ref: ref, className: Input_1.INPUT_CLASSNAME }, props)), (0, jsx_runtime_1.jsx)(StyledLabel, Object.assign({ htmlFor: id, disabled: disabled, markInvalid: markInvalid, aligncenter: aligncenter, labelBeforeCheckbox: labelBeforeCheckbox }, { children: children }))] })));
+                }, disabled: disabled, ref: ref, className: Input_1.INPUT_CLASSNAME }, props)), (0, jsx_runtime_1.jsx)(StyledLabel, Object.assign({ htmlFor: id !== null && id !== void 0 ? id : inputId, disabled: disabled, markInvalid: markInvalid, aligncenter: aligncenter, labelBeforeCheckbox: labelBeforeCheckbox }, { children: children }))] })));
 });
 exports.Checkbox.displayName = 'Checkbox';
 const CheckboxLabel = (_a) => {

package/lib/Form/CodeInput.js

@@ -56,7 +56,7 @@ const digitInputStyle = (theme, props) => (Object.assign(Object.assign({}, (0, I
         marginLeft: 'min(19px, 2vw)',
     }, '&:hover': {
         boxShadow: `0 0 0 1px ${Identity_1.COLOR_V2.GRAY_60}`,
-    }, fontSize: '24px', lineHeight: '28px', borderRadius: '12px', padding: 0, textAlign: 'center', width: 'min(48px, 13vw)', height: '56px' }));
+    }, fontSize: theme.fontSizes.extraLarge, lineHeight: '1.75rem', borderRadius: '12px', padding: 0, textAlign: 'center', width: 'min(48px, 13vw)', height: '56px' }));
 const DigitInput = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => digitInputStyle(theme, props) }, props, { type: "tel" })));
 DigitInput.displayName = 'DigitInput';
 const CodeInput = ({ style, digits = 6, autoFocus = false, markInvalid, onCodeComplete = util_1.noop, disabled, }) => {

package/lib/Form/DropFileInput.js

@@ -56,7 +56,7 @@ const dropFileZoneWrapperStyle = (theme, isDraggedOver) => ({
     textAlign: 'center',
     backgroundColor: isDraggedOver ? theme.general.backgroundColor : Identity_1.COLOR.WHITE,
     fontWeight: 400,
-    fontSize: '12px',
+    fontSize: '0.75rem',
     lineHeight: '13px',
     color: Identity_1.COLOR.GRAY,
 });
@@ -79,8 +79,8 @@ exports.dropFileZoneHeadingStyle = {
 exports.dropFileZonDescriptionStyle = {
     marginTop: '12px',
     fontWeight: 400,
-    fontSize: '10px',
-    lineHeight: '13px',
+    fontSize: '0.625rem',
+    lineHeight: '0.8125rem',
     color: Identity_1.COLOR.GRAY,
     whiteSpace: 'pre-line',
 };

package/lib/Form/ErrorMessage.js

@@ -19,7 +19,7 @@ const Text_1 = require("../Text");
 const util_1 = require("../util");
 const errorMessageStyle = (theme, _a) => {
     var { justify = 'flex-start', align = 'center' } = _a, props = __rest(_a, ["justify", "align"]);
-    return (Object.assign(Object.assign({}, (0, Layout_1.flexBoxStyle)(Object.assign({ align, justify }, props))), { a: Object.assign({}, (0, Text_1.linkStyle)(theme, Object.assign({ bold: false, fontSize: '12px', textTransform: 'none' }, props))), marginBottom: '12px' }));
+    return (Object.assign(Object.assign({}, (0, Layout_1.flexBoxStyle)(Object.assign({ align, justify }, props))), { a: Object.assign({}, (0, Text_1.linkStyle)(theme, Object.assign({ bold: false, fontSize: theme.fontSizes.small, textTransform: 'none' }, props))), marginBottom: '12px' }));
 };
 exports.errorMessageStyle = errorMessageStyle;
 const filterErrorMessageProps = (props) => {

package/lib/Form/Input.js

@@ -62,7 +62,7 @@ const util_1 = require("../util");
 const inputStyle = (theme, { markInvalid = false, placeholderTextTransform = 'none', disabled = false }) => {
     const placeholderStyle = {
         color: theme.Input.placeholderColor,
-        fontSize: '16px',
+        fontSize: theme.fontSizes.base,
         textTransform: placeholderTextTransform,
     };
     return {
@@ -88,7 +88,7 @@ const inputStyle = (theme, { markInvalid = false, placeholderTextTransform = 'no
         color: theme.general.color,
         fontWeight: 300,
         height: '48px',
-        lineHeight: '24px',
+        lineHeight: '1.5rem',
         outline: 'none',
         padding: '0 16px',
         width: '100%',
@@ -114,7 +114,7 @@ exports.Input = React.forwardRef((_a, ref) => {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: exports.INPUT_GROUP, css: (theme) => (Object.assign({ marginBottom: hasError ? '2px' : '20px', width: '100%', '&:focus-within label': {
                 color: theme.general.primaryColor,
             } }, wrapperCSS)) }, { children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ htmlFor: props.id, isRequired: props.required, markInvalid: props.markInvalid }, { children: label }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { marginBottom: hasError && '8px', position: 'relative' } }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ className: exports.INPUT_CLASSNAME, css: (theme) => (0, exports.inputStyle)(theme, props, hasError), ref: ref, type: isPasswordInput ? toggledPasswordType : type, "aria-required": props.required }, filterInputProps(props))), hasError && !isPasswordInput && ((0, jsx_runtime_1.jsx)(Icon_1.ErrorIcon, { css: centerInputAction, width: 16, height: 16, "aria-hidden": "true" })), isPasswordInput && ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", "data-uie-name": !togglePassword ? 'do-show-password' : 'do-hide-password', css: Object.assign(Object.assign({}, centerInputAction), { background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 }), onClick: toggleSetPassword, title: "Toggle password visibility", "aria-controls": props.id, "aria-expanded": togglePassword }, { children: togglePassword ? (0, jsx_runtime_1.jsx)(Icon_1.HideIcon, {}) : (0, jsx_runtime_1.jsx)(Icon_1.ShowIcon, {}) })))] })), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: (theme) => ({
-                    fontSize: '12px',
+                    fontSize: theme.fontSizes.small,
                     fontWeight: 400,
                     color: theme.Input.placeholderColor,
                     marginTop: 8,

package/lib/Form/InputLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../src/Form/InputLabel.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,EAAE,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAKpC,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAenC,CAAC;AAEF,OAAO,EAAC,UAAU,EAAC,CAAC"}
+{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../src/Form/InputLabel.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,EAAE,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAKpC,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAqBnC,CAAC;AAEF,OAAO,EAAC,UAAU,EAAC,CAAC"}

package/lib/Form/InputLabel.js

@@ -17,10 +17,10 @@ const Identity_1 = require("../Identity");
 const InputLabel = (_a) => {
     var { htmlFor, markInvalid, isRequired, children } = _a, props = __rest(_a, ["htmlFor", "markInvalid", "isRequired", "children"]);
     return ((0, jsx_runtime_1.jsxs)("label", Object.assign({ htmlFor: htmlFor, css: (theme) => ({
-            fontSize: '14px',
+            fontSize: theme.fontSizes.medium,
             fontWeight: 400,
-            lineHeight: '16px',
+            lineHeight: '1rem',
             color: markInvalid ? Identity_1.COLOR_V2.RED_LIGHT_500 : theme.Input.labelColor,
-        }) }, props, { children: [children, isRequired && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: { fontSize: '16px', marginLeft: '4px', color: Identity_1.COLOR_V2.RED_LIGHT_500 } }, { children: "*" }))] })));
+        }) }, props, { children: [children, isRequired && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: (theme) => ({ fontSize: theme.fontSizes.base, marginLeft: '4px', color: Identity_1.COLOR_V2.RED_LIGHT_500 }) }, { children: "*" })))] })));
 };
 exports.InputLabel = InputLabel;

package/lib/Form/RangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeInput.d.ts","sourceRoot":"","sources":["../../src/Form/RangeInput.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,EAAE,EAAa,MAAM,OAAO,CAAC;AAErC,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAWzC,OAAO,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAElC,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA+C1C,CAAC"}
+{"version":3,"file":"RangeInput.d.ts","sourceRoot":"","sources":["../../src/Form/RangeInput.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,EAAE,EAAa,MAAM,OAAO,CAAC;AAErC,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAWzC,OAAO,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAElC,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAgD1C,CAAC"}

package/lib/Form/RangeInput.js

@@ -40,9 +40,6 @@ exports.RangeInput = (0, react_1.forwardRef)((_a, ref) => {
     const maxNum = Number(max);
     const valueNum = Number(value);
     const backgroundSize = `${((valueNum - minNum) * 100) / (maxNum - minNum)}% 100%`;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: wrapperCSS }, { children: [label && (0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: RangeInput_styles_1.rangeInputWrapperStyles }, { children: [minValueLabel && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: (0, RangeInput_styles_1.getValueLabelStyles)(RangeInput_styles_1.ValueLabelPosition.LEFT) }, { children: minValueLabel })), maxValueLabel && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: (0, RangeInput_styles_1.getValueLabelStyles)(RangeInput_styles_1.ValueLabelPosition.RIGHT) }, { children: maxValueLabel })), (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => {
-                            console.info('hallo', theme, backgroundSize);
-                            return (0, RangeInput_styles_1.getImageCropZoomInputStyles)(theme, backgroundSize);
-                        }, id: id, name: id, min: min, max: max, value: value, onChange: onChange, type: "range" }, inputProps))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: wrapperCSS }, { children: [label && (0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: RangeInput_styles_1.rangeInputWrapperStyles }, { children: [minValueLabel && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: (theme) => (0, RangeInput_styles_1.getValueLabelStyles)(theme, RangeInput_styles_1.ValueLabelPosition.LEFT) }, { children: minValueLabel }))), maxValueLabel && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: (theme) => (0, RangeInput_styles_1.getValueLabelStyles)(theme, RangeInput_styles_1.ValueLabelPosition.RIGHT) }, { children: maxValueLabel }))), (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => (0, RangeInput_styles_1.getImageCropZoomInputStyles)(theme, backgroundSize), id: id, name: id, min: min, max: max, value: value, onChange: onChange, type: "range" }, inputProps))] }))] })));
 });
 exports.RangeInput.displayName = 'RangeInput';

package/lib/Form/RangeInput.styles.d.ts

@@ -6,5 +6,5 @@ export declare enum ValueLabelPosition {
     LEFT = "left",
     RIGHT = "right"
 }
-export declare const getValueLabelStyles: (position: ValueLabelPosition) => CSSObject;
+export declare const getValueLabelStyles: (theme: Theme, position: ValueLabelPosition) => CSSObject;
 //# sourceMappingURL=RangeInput.styles.d.ts.map

package/lib/Form/RangeInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeInput.styles.d.ts","sourceRoot":"","sources":["../../src/Form/RangeInput.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGzC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAGhC,eAAO,MAAM,uBAAuB,EAAE,SAGrC,CAAC;AAKF,eAAO,MAAM,2BAA2B,UAAW,KAAK,kBAAkB,GAAG,MAAM,KAAK,MAAM,GAAG,KAAG,SA4BlG,CAAC;AAEH,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,mBAAmB,aAAc,kBAAkB,KAAG,SAOjE,CAAC"}
+{"version":3,"file":"RangeInput.styles.d.ts","sourceRoot":"","sources":["../../src/Form/RangeInput.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGzC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAGhC,eAAO,MAAM,uBAAuB,EAAE,SAGrC,CAAC;AAKF,eAAO,MAAM,2BAA2B,UAAW,KAAK,kBAAkB,GAAG,MAAM,KAAK,MAAM,GAAG,KAAG,SA4BlG,CAAC;AAEH,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,mBAAmB,UAAW,KAAK,YAAY,kBAAkB,KAAG,SAO/E,CAAC"}

package/lib/Form/RangeInput.styles.js

@@ -48,10 +48,10 @@ var ValueLabelPosition;
     ValueLabelPosition["LEFT"] = "left";
     ValueLabelPosition["RIGHT"] = "right";
 })(ValueLabelPosition = exports.ValueLabelPosition || (exports.ValueLabelPosition = {}));
-const getValueLabelStyles = (position) => ({
+const getValueLabelStyles = (theme, position) => ({
     pointerEvents: 'none',
     bottom: '100%',
-    fontSize: '16px',
+    fontSize: theme.fontSizes.base,
     fontWeight: 300,
     position: 'absolute',
     [position]: '4px',

package/lib/Form/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AAEnD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAevF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,UAAU,WAAW,CAAC,OAAO,SAAS,OAAO,CAAE,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC;IACvF,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,MAAM,qOAkElB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AAEnD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAevF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,UAAU,WAAW,CAAC,OAAO,SAAS,OAAO,CAAE,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC;IACvF,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,MAAM,qOAyElB,CAAC"}

package/lib/Form/Select.js

@@ -34,6 +34,11 @@ const Select = (_a) => {
                     Menu: (0, SelectComponents_1.Menu)(dataUieName),
                     ValueContainer: SelectComponents_1.ValueContainer,
                     IndicatorsContainer: SelectComponents_1.IndicatorsContainer,
-                }, tabIndex: -1, isDisabled: disabled, hideSelectedOptions: false, isSearchable: false, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options }, props)), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: (theme) => ({ fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8 }) }, { children: helperText }))), error] })));
+                }, tabIndex: -1, isDisabled: disabled, hideSelectedOptions: false, isSearchable: false, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options }, props)), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: (theme) => ({
+                    fontSize: theme.fontSizes.small,
+                    fontWeight: 400,
+                    color: theme.Input.labelColor,
+                    marginTop: 8,
+                }) }, { children: helperText }))), error] })));
 };
 exports.Select = Select;

package/lib/Form/SelectComponents.js

@@ -59,7 +59,7 @@ const CustomOption = (dataUieName) => (props) => {
             'data-uie-selected': isSelected,
         }), { children: [isMulti && ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isSelected, onChange: () => null, css: { gridArea: 'checkbox', width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' } })), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { gridArea: 'label', overflowWrap: 'break-word', overflow: 'hidden' } }, { children: children })), data && data.description && ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: (theme) => ({
                         marginBottom: 0,
-                        fontSize: '14px',
+                        fontSize: theme.fontSizes.medium,
                         color: isSelected ? theme.Select.focusedDescriptionColor : theme.Input.labelColor,
                         gridArea: 'description',
                     }) }, { children: data.description })))] })) })));

package/lib/Form/SelectStyles.d.ts

@@ -143,7 +143,7 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
             fontKerning?: import("csstype").Property.FontKerning | NonNullable<import("csstype").Property.FontKerning>[] | import("csstype").Property.FontKerning[];
             fontLanguageOverride?: string[] | import("csstype").Property.FontLanguageOverride | import("csstype").Property.FontLanguageOverride[];
             fontOpticalSizing?: import("csstype").Property.FontOpticalSizing | NonNullable<import("csstype").Property.FontOpticalSizing>[] | import("csstype").Property.FontOpticalSizing[];
-            fontSize?: (string | (string & {}))[] | import("csstype").Property.FontSize<string | number> | NonNullable<import("csstype").Property.FontSize<string | number>>[];
+            fontSize?: import("csstype").Property.FontSize<string | number> | NonNullable<import("csstype").Property.FontSize<string | number>>[] | (string | (string & {}))[];
             fontSizeAdjust?: import("csstype").Property.FontSizeAdjust | NonNullable<import("csstype").Property.FontSizeAdjust>[] | ("none" | (string & {}) | import("csstype").Globals | "from-font")[];
             fontSmooth?: string[] | import("csstype").Property.FontSmooth<string | number> | NonNullable<import("csstype").Property.FontSmooth<string | number>>[];
             fontStretch?: string[] | import("csstype").Property.FontStretch | import("csstype").Property.FontStretch[];
@@ -382,7 +382,7 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
             animation?: import("csstype").Property.Animation<string & {}> | NonNullable<import("csstype").Property.Animation<string & {}>>[] | (import("csstype").Globals | import("csstype").DataType.SingleAnimationDirection | import("csstype").DataType.SingleAnimationFillMode | "infinite" | "paused" | "running" | import("csstype").DataType.EasingFunction)[];
             background?: (string | (string & {}))[] | import("csstype").Property.Background<string | number> | NonNullable<import("csstype").Property.Background<string | number>>[];
             backgroundPosition?: (string | (string & {}))[] | import("csstype").Property.BackgroundPosition<string | number> | NonNullable<import("csstype").Property.BackgroundPosition<string | number>>[];
-            border?: import("csstype").Property.Border<string | number> | NonNullable<import("csstype").Property.Border<string | number>>[] | (string | (string & {}))[];
+            border?: (string | (string & {}))[] | import("csstype").Property.Border<string | number> | NonNullable<import("csstype").Property.Border<string | number>>[];
             borderBlock?: (string | (string & {}))[] | import("csstype").Property.BorderBlock<string | number> | NonNullable<import("csstype").Property.BorderBlock<string | number>>[];
             borderBlockEnd?: (string | (string & {}))[] | import("csstype").Property.BorderBlockEnd<string | number> | NonNullable<import("csstype").Property.BorderBlockEnd<string | number>>[];
             borderBlockStart?: (string | (string & {}))[] | import("csstype").Property.BorderBlockStart<string | number> | NonNullable<import("csstype").Property.BorderBlockStart<string | number>>[];

package/lib/Form/SelectStyles.js

@@ -64,7 +64,7 @@ const customStyles = (theme, markInvalid = false) => ({
     },
     menu: provided => (Object.assign(Object.assign({}, provided), { boxShadow: `0 0 0 1px ${theme.general.primaryColor}, 0 4px 11px hsl(0deg 0% 0% / 10%)`, borderRadius: 12, marginBottom: 0, marginTop: 4, overflowY: 'overlay' })),
     menuList: provided => (Object.assign(Object.assign({}, provided), { borderRadius: 12, paddingBottom: 0, paddingTop: 0 })),
-    option: (provided, { isMulti, isDisabled, isFocused, isSelected }) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), { backgroundColor: theme.Input.backgroundColor, color: theme.general.color, padding: '10px 18px', cursor: isDisabled ? 'not-allowed' : 'pointer', fontSize: '16px', fontWeight: 300, lineHeight: '24px' }), (isSelected &&
+    option: (provided, { isMulti, isDisabled, isFocused, isSelected }) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), { backgroundColor: theme.Input.backgroundColor, color: theme.general.color, padding: '10px 18px', cursor: isDisabled ? 'not-allowed' : 'pointer', fontSize: theme.fontSizes.base, fontWeight: 300, lineHeight: '1.5rem' }), (isSelected &&
         !isDisabled &&
         !isMulti && {
         background: theme.general.primaryColor,

package/lib/Form/ShakeBox.d.ts

@@ -8,5 +8,5 @@ export interface ShakeBoxProps extends React.HTMLProps<HTMLDivElement> {
 export interface ShakeBoxRef {
     shake: () => void;
 }
-export declare const ShakeBox: React.ForwardRefExoticComponent<Pick<ShakeBoxProps, "children" | "className" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "css" | "color" | "content" | "height" | "translate" | "width" | "key" | "value" | "hidden" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "start" | "size" | "default" | "wrap" | "open" | "multiple" | "disabled" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "name" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "wmode" | "amplitude" | "speed" | "damping" | "threshold"> & React.RefAttributes<ShakeBoxRef>>;
+export declare const ShakeBox: React.ForwardRefExoticComponent<Pick<ShakeBoxProps, "children" | "className" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "css" | "color" | "content" | "height" | "translate" | "width" | "key" | "value" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "amplitude" | "speed" | "damping" | "threshold"> & React.RefAttributes<ShakeBoxRef>>;
 //# sourceMappingURL=ShakeBox.d.ts.map

package/lib/Form/Switch.js

@@ -56,7 +56,7 @@ const Switch = ({ id = Math.random().toString(), checked, onToggle = () => { },
                                 display: 'block',
                                 float: 'left',
                                 height: '25px',
-                                lineHeight: '25px',
+                                lineHeight: '1.5625rem',
                                 padding: 0,
                                 width: '50%',
                             },

package/lib/Form/TextArea.js

@@ -49,7 +49,7 @@ const util_1 = require("../util");
 const textAreaStyle = (theme, { markInvalid = false, placeholderTextTransform = 'none', disabled = false }) => {
     const placeholderStyle = {
         color: theme.Input.placeholderColor,
-        fontSize: '16px',
+        fontSize: theme.fontSizes.base,
         textTransform: placeholderTextTransform,
     };
     return {
@@ -71,7 +71,7 @@ const textAreaStyle = (theme, { markInvalid = false, placeholderTextTransform =
         caretColor: Identity_1.COLOR.BLUE,
         color: theme.general.color,
         fontWeight: 300,
-        lineHeight: '24px',
+        lineHeight: '1.5rem',
         margin: '0 0 16px',
         outline: 'none',
         padding: '16px 16px',

package/lib/Form/Tooltip.js

@@ -24,10 +24,10 @@ const tooltipStyle = ({ disabled = false, bottom = false, left = false, right =
         color: light ? Identity_1.COLOR.TEXT : Identity_1.COLOR.WHITE,
         content: 'attr(data-text)',
         display: 'block',
-        fontSize: '12px',
+        fontSize: '0.75rem',
         fontWeight: light ? 400 : 600,
         left: right ? 'calc(100% + 8px)' : 'auto',
-        lineHeight: '14px',
+        lineHeight: '0.875rem',
         maxWidth: '200px',
         minWidth: '120px',
         opacity: 0,

package/lib/GlobalStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../src/GlobalStyle.tsx"],"names":[],"mappings":";AAuBA,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAC;AA4C/B,eAAO,MAAM,WAAW;WAA+B,KAAK;;;EAU1D,CAAC"}
+{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../src/GlobalStyle.tsx"],"names":[],"mappings":";AAsBA,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAC;AA8C/B,eAAO,MAAM,WAAW;WAA+B,KAAK;;;EAU1D,CAAC"}

package/lib/GlobalStyle.js

@@ -25,7 +25,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  */
 const react_1 = require("@emotion/react");
 const emotion_normalize_1 = __importDefault(require("emotion-normalize"));
-const GlobalCssVariables_1 = require("./GlobalCssVariables");
+const GlobalCssVariables_1 = require("./Theme/GlobalCssVariables");
 const getGlobalStyles = (theme) => ({
     '*': {
         boxSizing: 'border-box',
@@ -39,6 +39,7 @@ const getGlobalStyles = (theme) => ({
     html: {
         background: theme.general.backgroundColor,
         transition: 'background 0.15s',
+        fontSize: '16px',
     },
     p: {
         marginTop: 0,