@itcase/ui 1.8.123 → 1.8.124

package/dist/cjs/components/Checkbox.js

@@ -4,8 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text_cjs_0EINiUq4.js');
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
+var Text = require('../../Text_cjs_BDTjOTVB.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -22,7 +21,7 @@ require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 
-var checkboxAppearanceDefault = {
+const checkboxAppearanceDefault = {
     defaultPrimary: {
         fillCheckbox: 'surfaceSecondary',
         fillCheckboxActive: 'surfaceSecondary',
@@ -38,7 +37,7 @@ var checkboxAppearanceDefault = {
     },
 };
 
-var checkboxAppearanceDisabled = {
+const checkboxAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceFillDisabled',
         borderColor: 'errorBorderQuaternary',
@@ -58,7 +57,7 @@ var checkboxAppearanceDisabled = {
     },
 };
 
-var checkboxAppearanceError = {
+const checkboxAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         fillCheckbox: 'errorPrimary',
@@ -83,7 +82,7 @@ var checkboxAppearanceError = {
     },
 };
 
-var checkboxAppearanceRequire = {
+const checkboxAppearanceRequire = {
     requirePrimary: {
         fillCheckbox: 'warningTertiary',
         fillCheckboxActive: 'warningPrimary',
@@ -107,7 +106,7 @@ var checkboxAppearanceRequire = {
     },
 };
 
-var checkboxAppearanceSize = {
+const checkboxAppearanceSize = {
     sizeXL: {
         size: 'xl',
         labelTextSize: 'm',
@@ -130,7 +129,7 @@ var checkboxAppearanceSize = {
     },
 };
 
-var checkboxAppearanceStyle = {
+const checkboxAppearanceStyle = {
     solid: {
         borderColorCheckbox: 'none',
         borderColorCheckboxActive: 'none',
@@ -152,7 +151,7 @@ var checkboxAppearanceStyle = {
     },
 };
 
-var checkboxAppearanceSuccess = {
+const checkboxAppearanceSuccess = {
     successPrimary: {
         fillCheckbox: 'successPrimary',
         fillCheckboxActive: 'successPrimary',
@@ -176,39 +175,47 @@ var checkboxAppearanceSuccess = {
     },
 };
 
-var checkboxAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, checkboxAppearanceDefault), checkboxAppearanceError), checkboxAppearanceSuccess), checkboxAppearanceRequire), checkboxAppearanceDisabled), checkboxAppearanceSize), checkboxAppearanceStyle);
+const checkboxAppearance = {
+    ...checkboxAppearanceDefault,
+    ...checkboxAppearanceError,
+    ...checkboxAppearanceSuccess,
+    ...checkboxAppearanceRequire,
+    ...checkboxAppearanceDisabled,
+    ...checkboxAppearanceSize,
+    ...checkboxAppearanceStyle,
+};
 
-var checkboxConfig = {
+const checkboxConfig = {
     appearance: checkboxAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         checkboxConfig.appearance = appearanceConfig;
     },
 };
 function Checkbox(props) {
-    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, disabled = props.disabled, isDisabled = props.isDisabled, checked = props.checked, indeterminate = props.indeterminate, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, before = props.before, after = props.after, isActive = props.isActive, isChecked = props.isChecked, isSkeleton = props.isSkeleton, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
-    var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, checkboxConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillCheckboxActiveClass = propsGenerator.fillCheckboxActiveClass, fillCheckboxActiveHoverClass = propsGenerator.fillCheckboxActiveHoverClass, fillCheckboxClass = propsGenerator.fillCheckboxClass, fillCheckboxHoverClass = propsGenerator.fillCheckboxHoverClass, fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorCheckboxActiveClass = propsGenerator.borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass = propsGenerator.borderColorCheckboxActiveHoverClass, borderColorCheckboxClass = propsGenerator.borderColorCheckboxClass, borderColorCheckboxHoverClass = propsGenerator.borderColorCheckboxHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
-    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_".concat(fillHoverClass), sizeClass && "checkbox_size_".concat(sizeClass), !checked
-            ? fillCheckboxClass && "checkbox_fill_".concat(fillCheckboxClass)
+    const { id, className, appearance, label, desc, disabled, isDisabled, checked, indeterminate, Tag = 'label', value, before, after, isActive, isChecked, isSkeleton, onBlur, onChange, onFocus, } = props;
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, checkboxConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const { fillCheckboxActiveClass, fillCheckboxActiveHoverClass, fillCheckboxClass, fillCheckboxHoverClass, fillCheckmarkClass, fillClass, fillHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass, borderColorCheckboxClass, borderColorCheckboxHoverClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, sizeClass && `checkbox_size_${sizeClass}`, !checked
+            ? fillCheckboxClass && `checkbox_fill_${fillCheckboxClass}`
             : fillCheckboxActiveClass &&
-                "checkbox_fill_active_".concat(fillCheckboxActiveClass), !checked
+                `checkbox_fill_active_${fillCheckboxActiveClass}`, !checked
             ? fillCheckboxHoverClass &&
-                "checkbox_fill_hover_".concat(fillCheckboxHoverClass)
+                `checkbox_fill_hover_${fillCheckboxHoverClass}`
             : fillCheckboxActiveHoverClass &&
-                "checkbox_fill_active_hover_".concat(fillCheckboxActiveHoverClass), !checked
+                `checkbox_fill_active_hover_${fillCheckboxActiveHoverClass}`, !checked
             ? borderColorCheckboxClass &&
-                "checkbox_border-color_".concat(borderColorCheckboxClass)
+                `checkbox_border-color_${borderColorCheckboxClass}`
             : borderColorCheckboxActiveClass &&
-                "checkbox_border-color_active_".concat(borderColorCheckboxActiveClass), !checked
+                `checkbox_border-color_active_${borderColorCheckboxActiveClass}`, !checked
             ? borderColorCheckboxHoverClass &&
-                "checkbox_border-color_hover_".concat(borderColorCheckboxHoverClass)
+                `checkbox_border-color_hover_${borderColorCheckboxHoverClass}`
             : borderColorCheckboxActiveHoverClass &&
-                "checkbox_border-color_active_hover_".concat(borderColorCheckboxActiveHoverClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: "checkbox__item", children: [jsxRuntime.jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx(!indeterminate
+                `checkbox_border-color_active_hover_${borderColorCheckboxActiveHoverClass}`, widthClass && `width_${widthClass}`, isSkeleton && `checkbox_skeleton`), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: "checkbox__item", children: [jsxRuntime.jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx(!indeterminate
                             ? 'checkbox__state-checkmark'
                             : 'checkbox__state-indeterminate', (checked || indeterminate) &&
                             fillCheckmarkClass &&
-                            "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
+                            `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
 }
 
 exports.Checkbox = Checkbox;

package/dist/cjs/components/Checkmark.js

@@ -5,7 +5,6 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -21,7 +20,7 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
 
-var checkmarkAppearanceAccent = {
+const checkmarkAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
         fillActive: 'accentPrimary',
@@ -31,7 +30,7 @@ var checkmarkAppearanceAccent = {
     },
 };
 
-var checkmarkAppearanceDisabled = {
+const checkmarkAppearanceDisabled = {
     disabled: {
         fill: 'surfaceDisabled',
         fillActive: 'surfaceDisabled',
@@ -42,7 +41,7 @@ var checkmarkAppearanceDisabled = {
     },
 };
 
-var checkmarkAppearanceSize = {
+const checkmarkAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
     },
@@ -66,7 +65,7 @@ var checkmarkAppearanceSize = {
     },
 };
 
-var checkmarkAppearanceStyle = {
+const checkmarkAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -80,7 +79,7 @@ var checkmarkAppearanceStyle = {
     },
 };
 
-var checkmarkAppearanceSurface = {
+const checkmarkAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillActive: 'surfacePrimary',
@@ -101,33 +100,39 @@ var checkmarkAppearanceSurface = {
     },
 };
 
-var checkmarkAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, checkmarkAppearanceAccent), checkmarkAppearanceDisabled), checkmarkAppearanceStyle), checkmarkAppearanceSurface), checkmarkAppearanceSize);
+const checkmarkAppearance = {
+    ...checkmarkAppearanceAccent,
+    ...checkmarkAppearanceDisabled,
+    ...checkmarkAppearanceStyle,
+    ...checkmarkAppearanceSurface,
+    ...checkmarkAppearanceSize,
+};
 
-var checkmarkConfig = {
+const checkmarkConfig = {
     appearance: checkmarkAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         checkmarkConfig.appearance = appearanceConfig;
     },
 };
 function Checkmark(props) {
-    var className = props.className, appearance = props.appearance, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isActive = props.isActive, isChecked = props.isChecked, onClick = props.onClick;
-    var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, checkmarkConfig);
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, checkmarkFillClass = propsGenerator.checkmarkFillClass, sizeClass = propsGenerator.sizeClass;
+    const { className, appearance, isDisabled = false, isActive, isChecked, onClick, } = props;
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, checkmarkConfig);
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, checkmarkFillClass, sizeClass, } = propsGenerator;
     // @ts-expect-error
-    var checkmarkStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'checkmark', sizeClass && "checkmark_size_".concat(sizeClass), !isChecked || !isActive
-            ? fillClass && "fill_".concat(fillClass)
-            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isChecked || !isActive
-            ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), !isChecked || !isActive
-            ? borderColorClass && "border-color_".concat(borderColorClass)
+    const { styles: checkmarkStyles } = useStyles.useStyles(props);
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'checkmark', sizeClass && `checkmark_size_${sizeClass}`, !isChecked || !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isChecked || !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, !isChecked || !isActive
+            ? borderColorClass && `border-color_${borderColorClass}`
             : borderColorActiveClass &&
-                "border-color_active_".concat(borderColorActiveClass), !isChecked || !isActive
+                `border-color_active_${borderColorActiveClass}`, !isChecked || !isActive
             ? borderColorHoverClass &&
-                "border-color_hover_".concat(borderColorHoverClass)
+                `border-color_hover_${borderColorHoverClass}`
             : borderColorActiveHoverClass &&
-                "border-color_active_hover_".concat(borderColorActiveHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), isDisabled), style: checkmarkStyles, onClick: onClick, children: (isChecked || isActive) && (jsxRuntime.jsx("div", { className: clsx('checkmark__icon', "svg_path_fill_".concat(checkmarkFillClass)), children: jsxRuntime.jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: checkmarkFillClass, d: "M28.0896 0.706312L11.4967 18.1772L3.9104 10.1895C3.01576 9.24775 1.56549 9.24775 0.670845 10.1895C-0.223615 11.1315 -0.223615 12.6585 0.670845 13.6005L9.87695 23.2936C10.3243 23.7644 10.9105 24 11.4967 24C12.083 24 12.6692 23.7644 13.1165 23.2936L31.3292 4.11744C32.2236 3.17547 32.2236 1.64848 31.3292 0.706504C30.4345 -0.235469 28.9841 -0.235469 28.0896 0.706312Z" }) }) })) }));
+                `border-color_active_hover_${borderColorActiveHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, isDisabled), style: checkmarkStyles, onClick: onClick, children: (isChecked || isActive) && (jsxRuntime.jsx("div", { className: clsx('checkmark__icon', `svg_path_fill_${checkmarkFillClass}`), children: jsxRuntime.jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: checkmarkFillClass, d: "M28.0896 0.706312L11.4967 18.1772L3.9104 10.1895C3.01576 9.24775 1.56549 9.24775 0.670845 10.1895C-0.223615 11.1315 -0.223615 12.6585 0.670845 13.6005L9.87695 23.2936C10.3243 23.7644 10.9105 24 11.4967 24C12.083 24 12.6692 23.7644 13.1165 23.2936L31.3292 4.11744C32.2236 3.17547 32.2236 1.64848 31.3292 0.706504C30.4345 -0.235469 28.9841 -0.235469 28.0896 0.706312Z" }) }) })) }));
 }
 
 exports.Checkmark = Checkmark;

package/dist/cjs/components/Chips/stories/__mock__.js

@@ -2,7 +2,7 @@
 
 var _default = require('@itcase/icons/default');
 
-var chipsListMock = {
+const chipsListMock = {
     chipsList: [
         {
             id: 1,

package/dist/cjs/components/Chips.js

@@ -1,10 +1,9 @@
 'use strict';
 
-var ChipsGroup = require('../../ChipsGroup_cjs_C8L3ZeD_.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_Dgskkc1e.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');
@@ -21,12 +20,12 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Icon_cjs_Cz6IyOkb.js');
+require('../../Icon_cjs_DpFxIFv5.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_C5UsZUiF.js');
-require('../../Text_cjs_0EINiUq4.js');
+require('../../Link_cjs_qKXVfU8e.js');
+require('../../Text_cjs_BDTjOTVB.js');
 
 
 

package/dist/cjs/components/Choice/stories/__mock__.js

@@ -2,7 +2,7 @@
 
 var _default = require('@itcase/icons/default');
 
-var choiceListMock = {
+const choiceListMock = {
     active: {
         value: 1,
     },
@@ -39,7 +39,7 @@ var choiceListMock = {
         },
     ],
 };
-var choiceListIconMock = {
+const choiceListIconMock = {
     active: {
         value: 1,
     },

package/dist/cjs/components/Choice.js

@@ -6,10 +6,9 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_Cz6IyOkb.js');
-var Loader = require('../../Loader_cjs_D3lnxPlI.js');
-var Text = require('../../Text_cjs_0EINiUq4.js');
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
+var Icon = require('../../Icon_cjs_DpFxIFv5.js');
+var Loader = require('../../Loader_cjs_DIDsIq3J.js');
+var Text = require('../../Text_cjs_BDTjOTVB.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -26,9 +25,9 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_C5UsZUiF.js');
+require('../../Link_cjs_qKXVfU8e.js');
 
-var choiceAppearanceDefault = {
+const choiceAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         fillItem: 'surfaceSecondary',
@@ -47,7 +46,7 @@ var choiceAppearanceDefault = {
     },
 };
 
-var choiceAppearanceDisabled = {
+const choiceAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         fillItem: 'surfaceDisabled',
@@ -66,7 +65,7 @@ var choiceAppearanceDisabled = {
     },
 };
 
-var choiceAppearanceError = {
+const choiceAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         fillItem: 'errorItemTertiary',
@@ -84,7 +83,7 @@ var choiceAppearanceError = {
     },
 };
 
-var choiceAppearanceRequire = {
+const choiceAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         fillItem: 'warningTertiary',
@@ -102,7 +101,7 @@ var choiceAppearanceRequire = {
     },
 };
 
-var choiceAppearanceShape = {
+const choiceAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -127,7 +126,7 @@ var choiceAppearanceShape = {
     },
 };
 
-var choiceAppearanceSize = {
+const choiceAppearanceSize = {
     sizeL: {
         size: 'l',
         labelTextSize: 'm',
@@ -145,7 +144,7 @@ var choiceAppearanceSize = {
     },
 };
 
-var choiceAppearanceStyle = {
+const choiceAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -163,7 +162,7 @@ var choiceAppearanceStyle = {
     },
 };
 
-var choiceAppearanceSuccess = {
+const choiceAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         fillItem: 'successTertiary',
@@ -181,54 +180,61 @@ var choiceAppearanceSuccess = {
     },
 };
 
-var choiceAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, choiceAppearanceError), choiceAppearanceDisabled), choiceAppearanceDefault), choiceAppearanceSuccess), choiceAppearanceRequire), choiceAppearanceStyle), choiceAppearanceShape), choiceAppearanceSize);
+const choiceAppearance = {
+    ...choiceAppearanceError,
+    ...choiceAppearanceDisabled,
+    ...choiceAppearanceDefault,
+    ...choiceAppearanceSuccess,
+    ...choiceAppearanceRequire,
+    ...choiceAppearanceStyle,
+    ...choiceAppearanceShape,
+    ...choiceAppearanceSize,
+};
 
-var choiceConfig = {
+const choiceConfig = {
     appearance: choiceAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         choiceConfig.appearance = appearanceConfig;
     },
 };
 function Choice(props) {
-    var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, name = props.name, appearance = props.appearance, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, _b = props.active, active = _b === void 0 ? { value: undefined } : _b, itemAfter = props.itemAfter, itemBefore = props.itemBefore, _c = props.options, options = _c === void 0 ? [] : _c, setActiveSegment = props.setActiveSegment, before = props.before, after = props.after, _d = props.isCheckbox, isCheckbox = _d === void 0 ? false : _d, _e = props.isLoading, isLoading = _e === void 0 ? false : _e, isSkeleton = props.isSkeleton;
-    var controlRef = React.useRef(null);
-    var optionsRefs = React.useMemo(function () {
-        return new Map(options.map(function (item) { return [item.value, React.createRef()]; }));
-    }, [options]);
-    var onChange = React.useCallback(function (event, item) {
-        var isChecked = isCheckbox ? event.target.checked : true;
+    const { id, dataTestId, dataTour, className, name, appearance, isDisabled = false, active = { value: undefined }, itemAfter, itemBefore, options = [], setActiveSegment, before, after, isCheckbox = false, isLoading = false, isSkeleton, } = props;
+    const controlRef = React.useRef(null);
+    const optionsRefs = React.useMemo(() => new Map(options.map((item) => [item.value, React.createRef()])), [options]);
+    const onChange = React.useCallback((event, item) => {
+        const isChecked = isCheckbox ? event.target.checked : true;
         setActiveSegment && setActiveSegment(item, isChecked);
     }, [isCheckbox, setActiveSegment]);
-    var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, choiceConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillItemActiveClass = propsGenerator.fillItemActiveClass, fillItemActiveDisabledClass = propsGenerator.fillItemActiveDisabledClass, fillItemActiveHoverClass = propsGenerator.fillItemActiveHoverClass, fillItemClass = propsGenerator.fillItemClass, fillItemDisabledClass = propsGenerator.fillItemDisabledClass, fillItemHoverClass = propsGenerator.fillItemHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, iconAfterFillDisabled = propsGenerator.iconAfterFillDisabled, iconBeforeFillDisabled = propsGenerator.iconBeforeFillDisabled, iconFillDisabled = propsGenerator.iconFillDisabled, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActive = propsGenerator.iconAfterFillActive, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActive = propsGenerator.iconBeforeFillActive, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, wrapClass = propsGenerator.wrapClass;
-    var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'choice', size && "choice_size_".concat(size), fillClass && "fill_".concat(fillClass), wrapClass && "choice_wrap_".concat(wrapClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), isSkeleton && "choice_skeleton"), ref: controlRef, "data-test-id": dataTestId && "".concat(dataTestId, "Choice"), "data-tour": dataTour, style: styles, children: [before && jsxRuntime.jsx("div", { className: "choice__before", children: before }), isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsxRuntime.jsx(React.Fragment, { children: options.map(function (item) {
-                    var isActive = typeof active === 'object'
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, choiceConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const { size, fillClass, fillItemActiveClass, fillItemActiveDisabledClass, fillItemActiveHoverClass, fillItemClass, fillItemDisabledClass, fillItemHoverClass, labelTextActiveColor, labelTextColor, labelTextSize, labelTextWeight, labelTextWrap, iconAfterFillDisabled, iconBeforeFillDisabled, iconFillDisabled, borderColorClass, borderTypeClass, borderWidthClass, iconAfterFill, iconAfterFillActive, iconAfterSize, iconBeforeFill, iconBeforeFillActive, iconBeforeSize, iconFill, iconFillActive, iconSize, shapeClass, shapeStrengthClass, wrapClass, } = propsGenerator;
+    const { styles } = useStyles.useStyles(props);
+    return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'choice', size && `choice_size_${size}`, fillClass && `fill_${fillClass}`, wrapClass && `choice_wrap_${wrapClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `choice_skeleton`), ref: controlRef, "data-test-id": dataTestId && `${dataTestId}Choice`, "data-tour": dataTour, style: styles, children: [before && jsxRuntime.jsx("div", { className: "choice__before", children: before }), isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsxRuntime.jsx(React.Fragment, { children: options.map((item) => {
+                    const isActive = typeof active === 'object'
                         ? String(item.value) === String(active.value)
                         : String(item.value) === String(active);
-                    return (jsxRuntime.jsxs("div", { className: clsx('choice__item', size && "choice__item_size_".concat(size), (item.icon || item.iconActive) && 'choice__item_icon', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), !isActive && !isDisabled
-                            ? fillItemClass && "fill_".concat(fillItemClass)
+                    return (jsxRuntime.jsxs("div", { className: clsx('choice__item', size && `choice__item_size_${size}`, (item.icon || item.iconActive) && 'choice__item_icon', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, !isActive && !isDisabled
+                            ? fillItemClass && `fill_${fillItemClass}`
                             : fillItemDisabledClass &&
-                                "fill_disabled_".concat(fillItemDisabledClass), !isActive && !isDisabled
-                            ? fillItemHoverClass && "fill_hover_".concat(fillItemHoverClass)
+                                `fill_disabled_${fillItemDisabledClass}`, !isActive && !isDisabled
+                            ? fillItemHoverClass && `fill_hover_${fillItemHoverClass}`
                             : fillItemActiveHoverClass &&
-                                "fill_active_hover_".concat(fillItemActiveHoverClass), isActive
+                                `fill_active_hover_${fillItemActiveHoverClass}`, isActive
                             ? !isDisabled
                                 ? fillItemActiveClass &&
-                                    "fill_active_".concat(fillItemActiveClass)
+                                    `fill_active_${fillItemActiveClass}`
                                 : fillItemActiveDisabledClass &&
-                                    "fill_active_disabled_".concat(fillItemActiveDisabledClass)
+                                    `fill_active_disabled_${fillItemActiveDisabledClass}`
                             : !isDisabled
-                                ? fillItemClass && "fill_".concat(fillItemClass)
+                                ? fillItemClass && `fill_${fillItemClass}`
                                 : fillItemDisabledClass &&
-                                    "fill_disabled_".concat(fillItemDisabledClass), !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
+                                    `fill_disabled_${fillItemDisabledClass}`, !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
                             isDisabled &&
-                            'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { id: "".concat(name, "-").concat(item.value), className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, disabled: isDisabled, checked: isActive, value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconBeforeFillDisabled, isDisabled: isDisabled, iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconSize: iconBeforeSize, SvgImage: isActive
+                            'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { id: `${name}-${item.value}`, className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, disabled: isDisabled, checked: isActive, value: item.value, onChange: (event) => onChange(event, item) }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: `${name}-${item.value}`, children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconBeforeFillDisabled, isDisabled: isDisabled, iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconSize: iconBeforeSize, SvgImage: isActive
                                             ? item.iconBeforeActive || item.iconBefore
                                             : item.iconBefore, isActive: isActive })), item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconFillDisabled, iconFill: iconFill, iconFillActive: iconFillActive, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })), (item.iconAfter || item.iconAfterActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconAfterFillDisabled, iconFill: iconAfterFill, iconFillActive: iconAfterFillActive, iconSize: iconAfterSize, SvgImage: isActive
                                             ? item.iconAfterActive || item.iconAfter
-                                            : item.iconAfter, isActive: isActive })), itemAfter] })] }, "".concat(name, "-").concat(item.value)));
+                                            : item.iconAfter, isActive: isActive })), itemAfter] })] }, `${name}-${item.value}`));
                 }) })), after && jsxRuntime.jsx("div", { className: "choice__after", children: after })] }));
 }