@wireapp/react-ui-kit 9.18.0 → 9.19.0

package/lib/Form/Button.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.filterButtonProps = exports.Button = exports.ButtonVariant = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -45,10 +34,7 @@ var ButtonVariant;
     ButtonVariant["SEND"] = "send";
     ButtonVariant["CANCEL"] = "cancel";
 })(ButtonVariant || (exports.ButtonVariant = ButtonVariant = {}));
-const Button = (_a) => {
-    var { showLoading, children, loadingColor = Identity_1.COLOR.WHITE } = _a, props = __rest(_a, ["showLoading", "children", "loadingColor"]);
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ css: (theme) => (0, Button_styles_1.buttonStyle)(theme, props) }, (0, exports.filterButtonProps)(props), { children: showLoading ? (0, jsx_runtime_1.jsx)(Misc_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children })));
-};
+const Button = ({ showLoading, children, loadingColor = Identity_1.COLOR.WHITE, ...props }) => ((0, jsx_runtime_1.jsx)("button", { css: (theme) => (0, Button_styles_1.buttonStyle)(theme, props), ...(0, exports.filterButtonProps)(props), children: showLoading ? (0, jsx_runtime_1.jsx)(Misc_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children }));
 exports.Button = Button;
 const filterButtonProps = (props) => {
     return (0, util_1.filterProps)((0, Text_1.filterTextProps)(props), ['backgroundColor', 'noCapital']);

package/lib/Form/Button.styles.js

@@ -17,17 +17,6 @@
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buttonStyle = void 0;
 const Button_1 = require("./Button");
@@ -40,20 +29,23 @@ const buttonPrimaryStyles = (theme, { backgroundColor, disabled, isActive }) =>
         border: `1px solid ${theme.Button.primaryActiveBorder}`,
         color: Identity_1.COLOR.WHITE,
     };
-    return Object.assign(Object.assign({}, (isActive
-        ? activeStyles
-        : {
-            color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor,
-            backgroundColor: backgroundColor || disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg,
-        })), (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: theme.Button.primaryHoverBg,
-        },
-        '&:focus': {
-            border: `1px solid ${theme.Button.primaryFocusBorder}`,
-        },
-        '&:active': activeStyles,
-    }));
+    return {
+        ...(isActive
+            ? activeStyles
+            : {
+                color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor,
+                backgroundColor: backgroundColor || disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg,
+            }),
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                backgroundColor: theme.Button.primaryHoverBg,
+            },
+            '&:focus': {
+                border: `1px solid ${theme.Button.primaryFocusBorder}`,
+            },
+            '&:active': activeStyles,
+        }),
+    };
 };
 const buttonSecondaryStyles = (theme, { backgroundColor, disabled, isActive }) => {
     const activeStyles = {
@@ -61,20 +53,24 @@ const buttonSecondaryStyles = (theme, { backgroundColor, disabled, isActive }) =
         border: `1px solid ${theme.Button.secondaryActiveBorder}`,
         color: theme.general.primaryColor,
     };
-    return Object.assign(Object.assign({ border: `1px solid ${theme.IconButton.primaryBorderColor}` }, (isActive
-        ? activeStyles
-        : {
-            color: disabled ? theme.Input.placeholderColor : theme.general.color,
-            backgroundColor: backgroundColor || disabled ? theme.IconButton.primaryDisabledBgColor : theme.IconButton.primaryBgColor,
-        })), (!disabled && {
-        '&:hover, &:focus': {
-            border: `1px solid ${theme.Button.secondaryHoverBorder}`,
-        },
-        '&:focus': {
-            color: theme.IconButton.primaryActiveFillColor,
-        },
-        '&:active': activeStyles,
-    }));
+    return {
+        border: `1px solid ${theme.IconButton.primaryBorderColor}`,
+        ...(isActive
+            ? activeStyles
+            : {
+                color: disabled ? theme.Input.placeholderColor : theme.general.color,
+                backgroundColor: backgroundColor || disabled ? theme.IconButton.primaryDisabledBgColor : theme.IconButton.primaryBgColor,
+            }),
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                border: `1px solid ${theme.Button.secondaryHoverBorder}`,
+            },
+            '&:focus': {
+                color: theme.IconButton.primaryActiveFillColor,
+            },
+            '&:active': activeStyles,
+        }),
+    };
 };
 const buttonTertiaryStyles = (theme, { backgroundColor, disabled, isActive }) => {
     const activeStyles = {
@@ -84,95 +80,146 @@ const buttonTertiaryStyles = (theme, { backgroundColor, disabled, isActive }) =>
             fill: theme.IconButton.primaryActiveFillColor,
         },
     };
-    return Object.assign(Object.assign({ border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`, borderRadius: '12px', fontSize: theme.fontSizes.medium, fontWeight: 700, lineHeight: '1.5rem', padding: '4px 8px', '& > svg > path': {
+    return {
+        border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`,
+        borderRadius: '12px',
+        fontSize: theme.fontSizes.medium,
+        fontWeight: 700,
+        lineHeight: '1.5rem',
+        padding: '4px 8px',
+        '& > svg > path': {
             fill: disabled ? theme.Input.placeholderColor : theme.general.color,
-        } }, (isActive
-        ? activeStyles
-        : {
-            color: disabled ? theme.Input.placeholderColor : theme.general.color,
-            backgroundColor: backgroundColor || disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg,
-        })), (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: theme.Button.tertiaryHoverBg,
-            border: `1px solid ${theme.Button.tertiaryHoverBorder}`,
         },
-        '&:focus': {
-            border: `1px solid ${theme.general.focusColor}`,
-        },
-        '&:active': activeStyles,
-    }));
+        ...(isActive
+            ? activeStyles
+            : {
+                color: disabled ? theme.Input.placeholderColor : theme.general.color,
+                backgroundColor: backgroundColor || disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg,
+            }),
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                backgroundColor: theme.Button.tertiaryHoverBg,
+                border: `1px solid ${theme.Button.tertiaryHoverBorder}`,
+            },
+            '&:focus': {
+                border: `1px solid ${theme.general.focusColor}`,
+            },
+            '&:active': activeStyles,
+        }),
+    };
 };
 const buttonQuaternaryStyles = ({ backgroundColor, disabled, isActive }) => {
     const activeStyles = {
         backgroundColor: Identity_1.COLOR_V2.GREEN_LIGHT_700,
     };
-    return Object.assign(Object.assign({ lineHeight: '1.5rem' }, (isActive
-        ? activeStyles
-        : {
-            color: disabled ? Identity_1.COLOR_V2.GRAY_80 : Identity_1.COLOR_V2.WHITE,
-            backgroundColor: backgroundColor || disabled ? Identity_1.COLOR_V2.GRAY_50 : Identity_1.COLOR_V2.GREEN,
-        })), (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: Identity_1.COLOR_V2.GREEN_LIGHT_600,
-        },
-        '&:focus': {
-            border: `1px solid ${Identity_1.COLOR_V2.GREEN_LIGHT_700}`,
-        },
-        '&:active': activeStyles,
-    }));
+    return {
+        lineHeight: '1.5rem',
+        ...(isActive
+            ? activeStyles
+            : {
+                color: disabled ? Identity_1.COLOR_V2.GRAY_80 : Identity_1.COLOR_V2.WHITE,
+                backgroundColor: backgroundColor || disabled ? Identity_1.COLOR_V2.GRAY_50 : Identity_1.COLOR_V2.GREEN,
+            }),
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                backgroundColor: Identity_1.COLOR_V2.GREEN_LIGHT_600,
+            },
+            '&:focus': {
+                border: `1px solid ${Identity_1.COLOR_V2.GREEN_LIGHT_700}`,
+            },
+            '&:active': activeStyles,
+        }),
+    };
 };
 const buttonCancelStyles = ({ backgroundColor, disabled, isActive }) => {
     const activeStyles = {
         backgroundColor: Identity_1.COLOR_V2.RED_LIGHT_700,
     };
-    return Object.assign(Object.assign({ lineHeight: '1.5rem' }, (isActive
-        ? activeStyles
-        : {
-            color: disabled ? Identity_1.COLOR_V2.GRAY_80 : Identity_1.COLOR_V2.WHITE,
-            backgroundColor: backgroundColor || disabled ? Identity_1.COLOR_V2.GRAY_50 : Identity_1.COLOR_V2.RED,
-        })), (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: Identity_1.COLOR_V2.RED_LIGHT_600,
-        },
-        '&:focus': {
-            border: `1px solid ${Identity_1.COLOR_V2.RED_LIGHT_700}`,
-        },
-        '&:active': activeStyles,
-    }));
+    return {
+        lineHeight: '1.5rem',
+        ...(isActive
+            ? activeStyles
+            : {
+                color: disabled ? Identity_1.COLOR_V2.GRAY_80 : Identity_1.COLOR_V2.WHITE,
+                backgroundColor: backgroundColor || disabled ? Identity_1.COLOR_V2.GRAY_50 : Identity_1.COLOR_V2.RED,
+            }),
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                backgroundColor: Identity_1.COLOR_V2.RED_LIGHT_600,
+            },
+            '&:focus': {
+                border: `1px solid ${Identity_1.COLOR_V2.RED_LIGHT_700}`,
+            },
+            '&:active': activeStyles,
+        }),
+    };
 };
 const buttonSendStyles = ({ backgroundColor, disabled, isActive }) => {
     const activeStyles = {
         backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_700,
     };
-    return Object.assign(Object.assign({ width: '40px' }, (isActive
-        ? activeStyles
-        : {
-            backgroundColor: backgroundColor || disabled ? Identity_1.COLOR_V2.GRAY_70 : Identity_1.COLOR_V2.BLUE,
-        })), (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_600,
-        },
-        '&:focus': {
-            border: `1px solid ${Identity_1.COLOR_V2.BLUE_LIGHT_800}`,
-        },
-        '&:active': activeStyles,
-    }));
+    return {
+        width: '40px',
+        ...(isActive
+            ? activeStyles
+            : {
+                backgroundColor: backgroundColor || disabled ? Identity_1.COLOR_V2.GRAY_70 : Identity_1.COLOR_V2.BLUE,
+            }),
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_600,
+            },
+            '&:focus': {
+                border: `1px solid ${Identity_1.COLOR_V2.BLUE_LIGHT_800}`,
+            },
+            '&:active': activeStyles,
+        }),
+    };
 };
-const buttonStyle = (theme, _a) => {
-    var { variant = Button_1.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(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block,
-        bold,
-        center,
-        disabled,
-        fontSize,
-        noWrap,
-        textTransform,
-        truncate }, props))), { border: 0, cursor: disabled ? 'default' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '16px', padding: 0, outline: 'none', textDecoration: 'none', touchAction: 'manipulation', transition: motions_1.defaultTransition, width: block ? '100%' : 'auto', '&:hover, &:focus': {
+const buttonStyle = (theme, { variant = Button_1.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, ...props }) => {
+    return {
+        ...(0, Text_1.textStyle)(theme, {
+            block,
+            bold,
+            center,
+            disabled,
+            fontSize,
+            noWrap,
+            textTransform,
+            truncate,
+            ...props,
+        }),
+        border: 0,
+        cursor: disabled ? 'default' : 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: '16px',
+        padding: 0,
+        outline: 'none',
+        textDecoration: 'none',
+        touchAction: 'manipulation',
+        transition: motions_1.defaultTransition,
+        width: block ? '100%' : 'auto',
+        '&:hover, &:focus': {
             textDecoration: 'none',
-        } }), (variant !== Button_1.ButtonVariant.TERTIARY && Object.assign({ borderRadius: variant === Button_1.ButtonVariant.SEND ? '100%' : '16px', height: variant === Button_1.ButtonVariant.SEND ? '40px' : '48px', lineHeight: variant === Button_1.ButtonVariant.SEND ? '40px' : '48px' }, (variant !== Button_1.ButtonVariant.SEND && {
-        maxWidth: '100%',
-        minWidth: '125px',
-        padding: '0 16px',
-    })))), (variant === Button_1.ButtonVariant.PRIMARY && buttonPrimaryStyles(theme, props))), (variant === Button_1.ButtonVariant.SECONDARY && buttonSecondaryStyles(theme, props))), (variant === Button_1.ButtonVariant.TERTIARY && buttonTertiaryStyles(theme, props))), (variant === Button_1.ButtonVariant.QUATERNARY && buttonQuaternaryStyles(props))), (variant === Button_1.ButtonVariant.CANCEL && buttonCancelStyles(props))), (variant === Button_1.ButtonVariant.SEND && buttonSendStyles(props)));
+        },
+        ...(variant !== Button_1.ButtonVariant.TERTIARY && {
+            borderRadius: variant === Button_1.ButtonVariant.SEND ? '100%' : '16px',
+            height: variant === Button_1.ButtonVariant.SEND ? '40px' : '48px',
+            lineHeight: variant === Button_1.ButtonVariant.SEND ? '40px' : '48px',
+            ...(variant !== Button_1.ButtonVariant.SEND && {
+                maxWidth: '100%',
+                minWidth: '125px',
+                padding: '0 16px',
+            }),
+        }),
+        ...(variant === Button_1.ButtonVariant.PRIMARY && buttonPrimaryStyles(theme, props)),
+        ...(variant === Button_1.ButtonVariant.SECONDARY && buttonSecondaryStyles(theme, props)),
+        ...(variant === Button_1.ButtonVariant.TERTIARY && buttonTertiaryStyles(theme, props)),
+        ...(variant === Button_1.ButtonVariant.QUATERNARY && buttonQuaternaryStyles(props)),
+        ...(variant === Button_1.ButtonVariant.CANCEL && buttonCancelStyles(props)),
+        ...(variant === Button_1.ButtonVariant.SEND && buttonSendStyles(props)),
+    };
 };
 exports.buttonStyle = buttonStyle;

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.d.ts","sourceRoot":"","sources":["../../src/Form/ButtonLink.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAIrC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAKhC,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,SAGrF,CAAC;AAUH,eAAO,MAAM,UAAU,sDAKpB,YAAY,iBAAiB,CAAC,qDAIhC,CAAC"}
+{"version":3,"file":"ButtonLink.d.ts","sourceRoot":"","sources":["../../src/Form/ButtonLink.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAIrC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAKhC,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,SAGrF,CAAC;AAUH,eAAO,MAAM,UAAU,sDAKpB,WAAW,CAAC,iBAAiB,CAAC,qDAIhC,CAAC"}

package/lib/Form/ButtonLink.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonLink = exports.buttonLinkStyle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -18,7 +7,10 @@ const Identity_1 = require("../Identity");
 const Misc_1 = require("../Misc");
 const Text_1 = require("../Text");
 const util_1 = require("../util");
-const buttonLinkStyle = (theme, props) => (Object.assign(Object.assign({}, (0, Button_styles_1.buttonStyle)(theme, props)), { display: 'inline-flex !important' }));
+const buttonLinkStyle = (theme, props) => ({
+    ...(0, Button_styles_1.buttonStyle)(theme, props),
+    display: 'inline-flex !important',
+});
 exports.buttonLinkStyle = buttonLinkStyle;
 const filterButtonLinkProps = (props) => {
     return (0, util_1.filterProps)((0, Text_1.filterTextProps)(props), [
@@ -27,8 +19,5 @@ const filterButtonLinkProps = (props) => {
         'noCapital',
     ]);
 };
-const ButtonLink = (_a) => {
-    var { children, showLoading, loadingColor = Identity_1.COLOR.WHITE } = _a, props = __rest(_a, ["children", "showLoading", "loadingColor"]);
-    return ((0, jsx_runtime_1.jsx)("a", Object.assign({ css: (theme) => (0, exports.buttonLinkStyle)(theme, props) }, filterButtonLinkProps(props), { children: showLoading ? (0, jsx_runtime_1.jsx)(Misc_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children })));
-};
+const ButtonLink = ({ children, showLoading, loadingColor = Identity_1.COLOR.WHITE, ...props }) => ((0, jsx_runtime_1.jsx)("a", { css: (theme) => (0, exports.buttonLinkStyle)(theme, props), ...filterButtonLinkProps(props), children: showLoading ? (0, jsx_runtime_1.jsx)(Misc_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children }));
 exports.ButtonLink = ButtonLink;

package/lib/Form/Checkbox.js

@@ -22,17 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxLabel = exports.Checkbox = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -58,53 +47,94 @@ const react_1 = require("react");
 const React = __importStar(require("react"));
 const Input_1 = require("./Input");
 const Text_1 = require("../Text");
-const StyledLabel = (_a) => {
-    var { disabled, markInvalid, aligncenter = false, labelBeforeCheckbox = false, children } = _a, props = __rest(_a, ["disabled", "markInvalid", "aligncenter", "labelBeforeCheckbox", "children"]);
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({ css: (theme) => (Object.assign(Object.assign(Object.assign(Object.assign({ [`.${Input_1.INPUT_CLASSNAME}:checked + &::before`]: {
+const StyledLabel = ({ disabled, markInvalid, aligncenter = false, labelBeforeCheckbox = false, children, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)("label", { css: (theme) => ({
+            [`.${Input_1.INPUT_CLASSNAME}:checked + &::before`]: {
                 background: `${disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor}`,
                 borderColor: theme.general.primaryColor,
-            }, [`.${Input_1.INPUT_CLASSNAME}:checked + & > svg`]: {
+            },
+            [`.${Input_1.INPUT_CLASSNAME}:checked + & > svg`]: {
                 fill: theme.general.backgroundColor,
-            }, [`.${Input_1.INPUT_CLASSNAME} + & > svg`]: Object.assign({ fill: 'none', position: 'absolute', top: '50%', transform: 'translateY(-50%)' }, (labelBeforeCheckbox
-                ? {
-                    right: '11px',
-                }
-                : {
-                    left: '4px',
-                })) }, (!disabled && {
-            [`.${Input_1.INPUT_CLASSNAME}:hover + &::before`]: {
-                borderColor: theme.general.primaryColor,
             },
-        })), { [`.${Input_1.INPUT_CLASSNAME} + &::before`]: Object.assign(Object.assign({ background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background }, (!disabled
-                ? {
-                    border: markInvalid
-                        ? `2px solid ${theme.Checkbox.invalidBorderColor}`
-                        : `2px solid ${theme.Checkbox.border}`,
-                }
-                : {
-                    border: `2px solid ${theme.Checkbox.disableBorderColor}`,
-                })), { borderRadius: '3px', boxSizing: 'border-box', content: '""', display: 'inline-block', minWidth: '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.4rem', display: 'flex', opacity: disabled ? 0.56 : 1, cursor: disabled ? 'not-allowed' : 'pointer', borderRadius: '4px' })) }, props, { children: [children, (0, jsx_runtime_1.jsx)("svg", { 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" }) })] })));
+            [`.${Input_1.INPUT_CLASSNAME} + & > svg`]: {
+                fill: 'none',
+                position: 'absolute',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                ...(labelBeforeCheckbox
+                    ? {
+                        right: '11px',
+                    }
+                    : {
+                        left: '4px',
+                    }),
+            },
+            ...(!disabled && {
+                [`.${Input_1.INPUT_CLASSNAME}:hover + &::before`]: {
+                    borderColor: theme.general.primaryColor,
+                },
+            }),
+            [`.${Input_1.INPUT_CLASSNAME} + &::before`]: {
+                background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background,
+                ...(!disabled
+                    ? {
+                        border: markInvalid
+                            ? `2px solid ${theme.Checkbox.invalidBorderColor}`
+                            : `2px solid ${theme.Checkbox.border}`,
+                    }
+                    : {
+                        border: `2px solid ${theme.Checkbox.disableBorderColor}`,
+                    }),
+                borderRadius: '3px',
+                boxSizing: 'border-box',
+                content: '""',
+                display: 'inline-block',
+                minWidth: '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.4rem',
+            display: 'flex',
+            opacity: disabled ? 0.56 : 1,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            borderRadius: '4px',
+        }), ...props, children: [children, (0, jsx_runtime_1.jsx)("svg", { 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"]);
+exports.Checkbox = React.forwardRef(({ id, children, style, disabled, wrapperCSS = {}, markInvalid, aligncenter, labelBeforeCheckbox, outlineOffset = '0.4rem', ...props }, ref) => {
     const inputId = (0, react_1.useId)();
-    return ((0, jsx_runtime_1.jsxs)("div", { css: (theme) => (Object.assign({ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', position: 'relative', left: '-0.3rem', [`.${Input_1.INPUT_CLASSNAME}:focus-visible + label`]: {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: (theme) => ({
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'flex-start',
+            position: 'relative',
+            left: '-0.3rem',
+            [`.${Input_1.INPUT_CLASSNAME}:focus-visible + label`]: {
                 outline: `1px solid ${theme.general.primaryColor}`,
                 outlineOffset: outlineOffset,
-            } }, wrapperCSS)), style: style, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ type: "checkbox", id: id !== null && id !== void 0 ? id : inputId, style: {
+            },
+            ...wrapperCSS,
+        }), style: style, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: id ?? inputId, style: {
                     height: '22px',
                     marginBottom: '0',
                     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, { htmlFor: id !== null && id !== void 0 ? id : inputId, 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, { htmlFor: id ?? inputId, disabled: disabled, markInvalid: markInvalid, aligncenter: aligncenter, labelBeforeCheckbox: labelBeforeCheckbox, children: children })] }));
 });
 exports.Checkbox.displayName = 'Checkbox';
-const CheckboxLabel = (_a) => {
-    var props = __rest(_a, []);
-    return ((0, jsx_runtime_1.jsx)(Text_1.Text, Object.assign({ css: (theme) => (Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({}, props)))) }, props)));
-};
+const CheckboxLabel = ({ ...props }) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { css: (theme) => ({
+        ...(0, Text_1.textStyle)(theme, {
+            ...props,
+        }),
+    }), ...props }));
 exports.CheckboxLabel = CheckboxLabel;

package/lib/Form/CodeInput.js

@@ -48,16 +48,27 @@ const React = __importStar(require("react"));
 const Input_1 = require("./Input");
 const Identity_1 = require("../Identity");
 const util_1 = require("../util");
-const CodeInputWrapper = (props) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+const CodeInputWrapper = (props) => ((0, jsx_runtime_1.jsx)("div", { css: {
         display: 'flex',
         justifyContent: 'center',
-    } }, props)));
-const digitInputStyle = (theme, props) => (Object.assign(Object.assign({}, (0, Input_1.inputStyle)(theme, props)), { '& + &': {
+    }, ...props }));
+const digitInputStyle = (theme, props) => ({
+    ...(0, Input_1.inputStyle)(theme, props),
+    '& + &': {
         marginLeft: 'min(19px, 2vw)',
-    }, '&:hover': {
+    },
+    '&:hover': {
         boxShadow: `0 0 0 1px ${Identity_1.COLOR_V2.GRAY_60}`,
-    }, 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" }))));
+    },
+    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", { 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, }) => {
     const [values, setValues] = (0, react_1.useState)(Array(digits).fill(''));

package/lib/Form/DropFileInput.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropFileInput = exports.dropFileZonDescriptionStyle = exports.dropFileZoneHeadingStyle = exports.dropFileZoneLabelStyle = exports.dropFileZoneWrapperStyle = exports.dropFileWrapperStyle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -84,8 +73,7 @@ exports.dropFileZonDescriptionStyle = {
     color: Identity_1.COLOR.GRAY,
     whiteSpace: 'pre-line',
 };
-exports.DropFileInput = (0, react_1.forwardRef)((_a, ref) => {
-    var { onFilesUploaded, onInvalidFilesDropError, dropFileZoneWrapperCSS, labelText, headingText, description, accept, multiple } = _a, inputProps = __rest(_a, ["onFilesUploaded", "onInvalidFilesDropError", "dropFileZoneWrapperCSS", "labelText", "headingText", "description", "accept", "multiple"]);
+exports.DropFileInput = (0, react_1.forwardRef)(({ onFilesUploaded, onInvalidFilesDropError, dropFileZoneWrapperCSS, labelText, headingText, description, accept, multiple, ...inputProps }, ref) => {
     const [isDraggedOver, setIsDraggedOver] = (0, react_1.useState)(false);
     const resetDraggedOver = () => setIsDraggedOver(false);
     const handleDragOver = (event) => {
@@ -124,6 +112,9 @@ exports.DropFileInput = (0, react_1.forwardRef)((_a, ref) => {
         }
         onFilesUploaded(Array.from(files));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { css: exports.dropFileWrapperStyle, children: [(0, jsx_runtime_1.jsx)("div", { css: (theme) => (Object.assign(Object.assign({}, (0, exports.dropFileZoneWrapperStyle)(theme, isDraggedOver)), dropFileZoneWrapperCSS)), "data-testid": "dropzone", onDragOver: handleDragOver, onDragLeave: resetDraggedOver, onDrop: handleDrop, children: (0, jsx_runtime_1.jsxs)(Layout_1.FlexBox, { align: "center", justify: "center", flexWrap: "wrap", css: { maxWidth: '280px', margin: '0 auto' }, children: [(0, jsx_runtime_1.jsx)(Icon_1.UploadIcon, { css: { margin: '12px 0' } }), (0, jsx_runtime_1.jsxs)("div", { css: { maxWidth: '160px', margin: '0 25px' }, children: [(0, jsx_runtime_1.jsx)("span", { css: exports.dropFileZoneHeadingStyle, children: headingText }), (0, jsx_runtime_1.jsxs)("label", { "aria-label": `${headingText} ${labelText} (${description})`, css: (theme) => (0, exports.dropFileZoneLabelStyle)(theme), children: [(0, jsx_runtime_1.jsx)("span", { children: labelText }), (0, jsx_runtime_1.jsx)("input", Object.assign({ "data-testid": "file-input", ref: ref, accept: accept, multiple: multiple, css: visuallyHiddenStyles, onChange: handleChange, type: "file" }, inputProps))] })] })] }) }), description && (0, jsx_runtime_1.jsx)("p", { css: exports.dropFileZonDescriptionStyle, children: description })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: exports.dropFileWrapperStyle, children: [(0, jsx_runtime_1.jsx)("div", { css: (theme) => ({
+                    ...(0, exports.dropFileZoneWrapperStyle)(theme, isDraggedOver),
+                    ...dropFileZoneWrapperCSS,
+                }), "data-testid": "dropzone", onDragOver: handleDragOver, onDragLeave: resetDraggedOver, onDrop: handleDrop, children: (0, jsx_runtime_1.jsxs)(Layout_1.FlexBox, { align: "center", justify: "center", flexWrap: "wrap", css: { maxWidth: '280px', margin: '0 auto' }, children: [(0, jsx_runtime_1.jsx)(Icon_1.UploadIcon, { css: { margin: '12px 0' } }), (0, jsx_runtime_1.jsxs)("div", { css: { maxWidth: '160px', margin: '0 25px' }, children: [(0, jsx_runtime_1.jsx)("span", { css: exports.dropFileZoneHeadingStyle, children: headingText }), (0, jsx_runtime_1.jsxs)("label", { "aria-label": `${headingText} ${labelText} (${description})`, css: (theme) => (0, exports.dropFileZoneLabelStyle)(theme), children: [(0, jsx_runtime_1.jsx)("span", { children: labelText }), (0, jsx_runtime_1.jsx)("input", { "data-testid": "file-input", ref: ref, accept: accept, multiple: multiple, css: visuallyHiddenStyles, onChange: handleChange, type: "file", ...inputProps })] })] })] }) }), description && (0, jsx_runtime_1.jsx)("p", { css: exports.dropFileZonDescriptionStyle, children: description })] }));
 });
 exports.DropFileInput.displayName = 'DropFileInput';