@itcase/ui 1.8.122 → 1.8.124

package/dist/components/Checkmark.js

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -19,7 +18,7 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
-var checkmarkAppearanceAccent = {
+const checkmarkAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
         fillActive: 'accentPrimary',
@@ -29,7 +28,7 @@ var checkmarkAppearanceAccent = {
     },
 };
 
-var checkmarkAppearanceDisabled = {
+const checkmarkAppearanceDisabled = {
     disabled: {
         fill: 'surfaceDisabled',
         fillActive: 'surfaceDisabled',
@@ -40,7 +39,7 @@ var checkmarkAppearanceDisabled = {
     },
 };
 
-var checkmarkAppearanceSize = {
+const checkmarkAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
     },
@@ -64,7 +63,7 @@ var checkmarkAppearanceSize = {
     },
 };
 
-var checkmarkAppearanceStyle = {
+const checkmarkAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -78,7 +77,7 @@ var checkmarkAppearanceStyle = {
     },
 };
 
-var checkmarkAppearanceSurface = {
+const checkmarkAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillActive: 'surfacePrimary',
@@ -99,33 +98,39 @@ var checkmarkAppearanceSurface = {
     },
 };
 
-var checkmarkAppearance = __assign(__assign(__assign(__assign(__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(appearance, checkmarkConfig);
-    var propsGenerator = 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(appearance, checkmarkConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, checkmarkFillClass, sizeClass, } = propsGenerator;
     // @ts-expect-error
-    var checkmarkStyles = useStyles(props).styles;
-    return (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(props);
+    return (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) && (jsx("div", { className: clsx('checkmark__icon', "svg_path_fill_".concat(checkmarkFillClass)), children: jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: 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) && (jsx("div", { className: clsx('checkmark__icon', `svg_path_fill_${checkmarkFillClass}`), children: jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: 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" }) }) })) }));
 }
 
 export { Checkmark, checkmarkAppearance, checkmarkConfig };

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

@@ -1,6 +1,6 @@
 import { icons20 } from '@itcase/icons/default';
 
-var chipsListMock = {
+const chipsListMock = {
     chipsList: [
         {
             id: 1,

package/dist/components/Chips.js

@@ -1,8 +1,7 @@
-export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_ayPPUwQ7.js';
+export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_BVQ7_n0k.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
@@ -19,9 +18,9 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Icon_es_BrwLifge.js';
+import '../Icon_es_D5eiycFI.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_XiqbdwLp.js';
-import '../Text_es_CwV9rjFD.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Text_es_CnymlElo.js';

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

@@ -1,6 +1,6 @@
 import { icons24 } from '@itcase/icons/default';
 
-var choiceListMock = {
+const choiceListMock = {
     active: {
         value: 1,
     },
@@ -37,7 +37,7 @@ var choiceListMock = {
         },
     ],
 };
-var choiceListIconMock = {
+const choiceListIconMock = {
     active: {
         value: 1,
     },

package/dist/components/Choice.js

@@ -4,10 +4,9 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_BrwLifge.js';
-import { L as Loader } from '../Loader_es_BUSqFrCd.js';
-import { T as Text } from '../Text_es_CwV9rjFD.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { I as Icon } from '../Icon_es_D5eiycFI.js';
+import { L as Loader } from '../Loader_es_CmSggwbR.js';
+import { T as Text } from '../Text_es_CnymlElo.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -24,9 +23,9 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_XiqbdwLp.js';
+import '../Link_es_P2b6ya7P.js';
 
-var choiceAppearanceDefault = {
+const choiceAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         fillItem: 'surfaceSecondary',
@@ -45,7 +44,7 @@ var choiceAppearanceDefault = {
     },
 };
 
-var choiceAppearanceDisabled = {
+const choiceAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         fillItem: 'surfaceDisabled',
@@ -64,7 +63,7 @@ var choiceAppearanceDisabled = {
     },
 };
 
-var choiceAppearanceError = {
+const choiceAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         fillItem: 'errorItemTertiary',
@@ -82,7 +81,7 @@ var choiceAppearanceError = {
     },
 };
 
-var choiceAppearanceRequire = {
+const choiceAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         fillItem: 'warningTertiary',
@@ -100,7 +99,7 @@ var choiceAppearanceRequire = {
     },
 };
 
-var choiceAppearanceShape = {
+const choiceAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -125,7 +124,7 @@ var choiceAppearanceShape = {
     },
 };
 
-var choiceAppearanceSize = {
+const choiceAppearanceSize = {
     sizeL: {
         size: 'l',
         labelTextSize: 'm',
@@ -143,7 +142,7 @@ var choiceAppearanceSize = {
     },
 };
 
-var choiceAppearanceStyle = {
+const choiceAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -161,7 +160,7 @@ var choiceAppearanceStyle = {
     },
 };
 
-var choiceAppearanceSuccess = {
+const choiceAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         fillItem: 'successTertiary',
@@ -179,54 +178,61 @@ var choiceAppearanceSuccess = {
     },
 };
 
-var choiceAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__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 = useRef(null);
-    var optionsRefs = useMemo(function () {
-        return new Map(options.map(function (item) { return [item.value, createRef()]; }));
-    }, [options]);
-    var onChange = 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 = useRef(null);
+    const optionsRefs = useMemo(() => new Map(options.map((item) => [item.value, createRef()])), [options]);
+    const onChange = useCallback((event, item) => {
+        const isChecked = isCheckbox ? event.target.checked : true;
         setActiveSegment && setActiveSegment(item, isChecked);
     }, [isCheckbox, setActiveSegment]);
-    var appearanceConfig = useAppearanceConfig(appearance, choiceConfig, isDisabled);
-    var propsGenerator = 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(props).styles;
-    return (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 && jsx("div", { className: "choice__before", children: before }), isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsx(React.Fragment, { children: options.map(function (item) {
-                    var isActive = typeof active === 'object'
+    const appearanceConfig = useAppearanceConfig(appearance, choiceConfig, isDisabled);
+    const propsGenerator = 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(props);
+    return (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 && jsx("div", { className: "choice__before", children: before }), isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsx(React.Fragment, { children: options.map((item) => {
+                    const isActive = typeof active === 'object'
                         ? String(item.value) === String(active.value)
                         : String(item.value) === String(active);
-                    return (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 (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: [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); } }), 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) && (jsx(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: [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) }), jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: `${name}-${item.value}`, children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsx(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 && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (jsx(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) && (jsx(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 && jsx("div", { className: "choice__after", children: after })] }));
 }
 

package/dist/components/Code.js

@@ -1,4 +1,3 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import clsx from 'clsx';
@@ -18,7 +17,7 @@ import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 
-var codeAppearanceDefault = {
+const codeAppearanceDefault = {
     defaultPrimary: {
         inputBorderColor: 'surfaceBorderTertiary',
         inputCaretColor: 'surfaceItemPrimary',
@@ -29,7 +28,7 @@ var codeAppearanceDefault = {
     },
 };
 
-var codeAppearanceDisabled = {
+const codeAppearanceDisabled = {
     disabledPrimary: {
         inputBorderColor: 'surfaceBorderDisabled',
         inputBorderColorHover: 'surfaceBorderDisabled',
@@ -41,7 +40,7 @@ var codeAppearanceDisabled = {
     },
 };
 
-var codeAppearanceError = {
+const codeAppearanceError = {
     errorPrimary: {
         inputBorderColor: 'errorBorderQuaternary',
         inputBorderColorHover: 'errorBorderSecondary',
@@ -53,7 +52,7 @@ var codeAppearanceError = {
     },
 };
 
-var codeAppearanceRequire = {
+const codeAppearanceRequire = {
     requirePrimary: {
         inputBorderColor: 'warningBorderSecondary',
         inputBorderColorHover: 'warningBorderSecondary',
@@ -65,7 +64,7 @@ var codeAppearanceRequire = {
     },
 };
 
-var codeAppearanceShape = {
+const codeAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -90,7 +89,7 @@ var codeAppearanceShape = {
     },
 };
 
-var codeAppearanceSize = {
+const codeAppearanceSize = {
     sizeL: {
         size: 'l',
         inputSize: 'l',
@@ -103,7 +102,7 @@ var codeAppearanceSize = {
     },
 };
 
-var codeAppearanceStyle = {
+const codeAppearanceStyle = {
     full: {
         inputBorderColor: 'none',
     },
@@ -119,7 +118,7 @@ var codeAppearanceStyle = {
     },
 };
 
-var codeAppearanceSuccess = {
+const codeAppearanceSuccess = {
     successPrimary: {
         inputBorderColor: 'successBorderSecondary',
         inputBorderColorHover: 'successBorderSecondary',
@@ -131,37 +130,46 @@ var codeAppearanceSuccess = {
     },
 };
 
-var codeAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, codeAppearanceDisabled), codeAppearanceShape), codeAppearanceRequire), codeAppearanceSize), codeAppearanceDefault), codeAppearanceStyle), codeAppearanceError), codeAppearanceSuccess);
+const codeAppearance = {
+    ...codeAppearanceDisabled,
+    ...codeAppearanceShape,
+    ...codeAppearanceRequire,
+    ...codeAppearanceSize,
+    ...codeAppearanceDefault,
+    ...codeAppearanceStyle,
+    ...codeAppearanceError,
+    ...codeAppearanceSuccess,
+};
 
-var codeConfig = {
+const codeConfig = {
     appearance: codeAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         codeConfig.appearance = appearanceConfig;
     },
 };
 function Code(props) {
-    var className = props.className, appearance = props.appearance, _a = props.initialValue, initialValue = _a === void 0 ? '' : _a, isDisabled = props.isDisabled, inputAutoFocus = props.inputAutoFocus, _b = props.inputCount, inputCount = _b === void 0 ? 6 : _b, inputPlaceholder = props.inputPlaceholder, _c = props.inputType, inputType = _c === void 0 ? 'number' : _c, separatorComponent = props.separatorComponent, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
-    var _d = useState(initialValue), otp = _d[0], setOtp = _d[1];
-    var appearanceConfig = useAppearanceConfig(appearance, codeConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputBorderFocusColorClass = propsGenerator.inputBorderFocusColorClass, inputBorderWidthClass = propsGenerator.inputBorderWidthClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputFillHoverClass = propsGenerator.inputFillHoverClass, inputPlaceholderTextColorClass = propsGenerator.inputPlaceholderTextColorClass, inputSizeClass = propsGenerator.inputSizeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    const { className, appearance, initialValue = '', isDisabled, inputAutoFocus, inputCount = 6, inputPlaceholder, inputType = 'number', separatorComponent, before, after, isSkeleton, onBlur, onChange, onFocus, } = props;
+    const [otp, setOtp] = useState(initialValue);
+    const appearanceConfig = useAppearanceConfig(appearance, codeConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { inputBorderColorClass, inputBorderColorHoverClass, inputBorderFocusColorClass, inputBorderWidthClass, inputCaretColorClass, inputFillClass, inputFillHoverClass, inputPlaceholderTextColorClass, inputSizeClass, inputTextColorClass, inputTextSizeClass, inputTextWeightClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     // NOTE: too many dependencies for "useCallback" and possible too many checks
-    var renderInput = function (otpInputProps, index) {
-        return (jsx("input", __assign({}, otpInputProps, { className: clsx('code__input', inputCaretColorClass && "caret-color_".concat(inputCaretColorClass), inputFillClass && "fill_".concat(inputFillClass), inputFillHoverClass && "fill_hover_".concat(inputFillHoverClass), inputPlaceholderTextColorClass &&
-                "placeholder-text-color_".concat(inputPlaceholderTextColorClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), inputTextSizeClass && "text_size_".concat(inputTextSizeClass), inputTextColorClass && "text-color_".concat(inputTextColorClass), inputTextWeightClass && "text-weight_".concat(inputTextWeightClass), inputBorderWidthClass && "border-width_".concat(inputBorderWidthClass), inputBorderColorClass && "border-color_".concat(inputBorderColorClass), inputBorderColorHoverClass &&
-                "border-color_hover_".concat(inputBorderColorHoverClass), inputBorderFocusColorClass &&
-                "border-color_focus_".concat(inputBorderFocusColorClass), inputSizeClass && "code__input_size_".concat(inputSizeClass), widthClass && "width_".concat(widthClass), isSkeleton && "code__input_skeleton"), name: "code-".concat(index), autoComplete: "one-time-code", placeholder: inputPlaceholder, onBlur: function (event) {
+    const renderInput = (otpInputProps, index) => {
+        return (jsx("input", { ...otpInputProps, className: clsx('code__input', inputCaretColorClass && `caret-color_${inputCaretColorClass}`, inputFillClass && `fill_${inputFillClass}`, inputFillHoverClass && `fill_hover_${inputFillHoverClass}`, inputPlaceholderTextColorClass &&
+                `placeholder-text-color_${inputPlaceholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, inputTextSizeClass && `text_size_${inputTextSizeClass}`, inputTextColorClass && `text-color_${inputTextColorClass}`, inputTextWeightClass && `text-weight_${inputTextWeightClass}`, inputBorderWidthClass && `border-width_${inputBorderWidthClass}`, inputBorderColorClass && `border-color_${inputBorderColorClass}`, inputBorderColorHoverClass &&
+                `border-color_hover_${inputBorderColorHoverClass}`, inputBorderFocusColorClass &&
+                `border-color_focus_${inputBorderFocusColorClass}`, inputSizeClass && `code__input_size_${inputSizeClass}`, widthClass && `width_${widthClass}`, isSkeleton && `code__input_skeleton`), name: `code-${index}`, autoComplete: "one-time-code", placeholder: inputPlaceholder, onBlur: (event) => {
                 onBlur && onBlur(event);
                 otpInputProps.onBlur(event);
-            }, onFocus: function (event) {
+            }, onFocus: (event) => {
                 onFocus && onFocus(event);
                 otpInputProps.onFocus(event);
-            } })));
+            } }));
     };
-    useEffect(function () {
+    useEffect(() => {
         onChange && onChange(otp);
     }, [otp]);
-    return (jsxs("div", { className: clsx(className, 'code', widthClass, sizeClass && "code_size_".concat(sizeClass)), children: [before, jsx(OtpInput, { containerStyle: clsx(className, 'code__wrapper'), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
+    return (jsxs("div", { className: clsx(className, 'code', widthClass, sizeClass && `code_size_${sizeClass}`), children: [before, jsx(OtpInput, { containerStyle: clsx(className, 'code__wrapper'), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
 }
 
 export { Code, codeAppearance, codeConfig };

package/dist/components/CookiesWarning.js

@@ -4,9 +4,8 @@ import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { B as Button } from '../Button_es_CtH5EKJd.js';
-import { T as Text } from '../Text_es_CwV9rjFD.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { B as Button } from '../Button_es_Cn3wtv3M.js';
+import { T as Text } from '../Text_es_CnymlElo.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -19,16 +18,16 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon_es_BrwLifge.js';
+import '../Icon_es_D5eiycFI.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_XiqbdwLp.js';
-import '../Loader_es_BUSqFrCd.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Loader_es_CmSggwbR.js';
 
-var cookiesWarningAppearanceDefault = {
+const cookiesWarningAppearanceDefault = {
     defaultPrimary: {
         fill: 'accentPrimary',
         fillHover: 'accentHover',
@@ -40,41 +39,42 @@ var cookiesWarningAppearanceDefault = {
     },
 };
 
-var cookiesWarningAppearance = __assign({}, cookiesWarningAppearanceDefault);
+const cookiesWarningAppearance = {
+    ...cookiesWarningAppearanceDefault,
+};
 
-var cookiesWarningConfig = {
+const cookiesWarningConfig = {
     appearance: cookiesWarningAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         cookiesWarningConfig.appearance = appearanceConfig;
     },
 };
 function CookiesWarning(props) {
-    var className = props.className, appearance = props.appearance, message = props.message, _a = props.isHideOnScroll, isHideOnScroll = _a === void 0 ? false : _a;
-    var cookiesWarningRef = useRef(null);
-    var isOpen = useMemo(function () { return Cookies.get('cookies-warning') !== 'close'; }, []);
-    var closeCookiesWarning = useCallback(function () {
-        var _a;
-        (_a = cookiesWarningRef.current) === null || _a === void 0 ? void 0 : _a.classList.add('cookies-warning_state_hidden');
+    const { className, appearance, message, isHideOnScroll = false } = props;
+    const cookiesWarningRef = useRef(null);
+    const isOpen = useMemo(() => Cookies.get('cookies-warning') !== 'close', []);
+    const closeCookiesWarning = useCallback(() => {
+        cookiesWarningRef.current?.classList.add('cookies-warning_state_hidden');
         Cookies.set('cookies-warning', 'close');
     }, []);
-    useEffect(function () {
+    useEffect(() => {
         if (isHideOnScroll) {
             window.addEventListener('scroll', closeCookiesWarning, true);
         }
-        return function () {
+        return () => {
             window.removeEventListener('scroll', closeCookiesWarning, true);
         };
     }, []);
-    useEffect(function () {
+    useEffect(() => {
         // isHideOnScroll &&
         if (!isOpen) {
             window.removeEventListener('scroll', closeCookiesWarning, true);
         }
     }, [isOpen]);
-    var appearanceConfig = useAppearanceConfig(appearance, cookiesWarningConfig);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, messageTextColor = propsGenerator.messageTextColor, messageTextSize = propsGenerator.messageTextSize, buttonAppearance = propsGenerator.buttonAppearance, buttonFill = propsGenerator.buttonFill, buttonFillHover = propsGenerator.buttonFillHover, buttonLabel = propsGenerator.buttonLabel, buttonLabelSize = propsGenerator.buttonLabelSize, buttonLabelTextColor = propsGenerator.buttonLabelTextColor, buttonShape = propsGenerator.buttonShape, buttonSize = propsGenerator.buttonSize, buttonWidth = propsGenerator.buttonWidth, elevationClass = propsGenerator.elevationClass;
-    return (isOpen && (jsx("div", { className: clsx('cookies-warning', className, fillClass && "fill_".concat(fillClass), elevationClass && "elevation_".concat(elevationClass)), ref: cookiesWarningRef, children: jsxs("div", { className: "cookies-warning__inner", children: [jsx(Text, { size: messageTextSize, textColor: messageTextColor, children: message }), jsx(Button, { appearance: buttonAppearance, width: buttonWidth, size: buttonSize, fill: buttonFill, fillHover: buttonFillHover, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, shape: buttonShape, onClick: closeCookiesWarning, children: buttonLabel })] }) })));
+    const appearanceConfig = useAppearanceConfig(appearance, cookiesWarningConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, messageTextColor, messageTextSize, buttonAppearance, buttonFill, buttonFillHover, buttonLabel, buttonLabelSize, buttonLabelTextColor, buttonShape, buttonSize, buttonWidth, elevationClass, } = propsGenerator;
+    return (isOpen && (jsx("div", { className: clsx('cookies-warning', className, fillClass && `fill_${fillClass}`, elevationClass && `elevation_${elevationClass}`), ref: cookiesWarningRef, children: jsxs("div", { className: "cookies-warning__inner", children: [jsx(Text, { size: messageTextSize, textColor: messageTextColor, children: message }), jsx(Button, { appearance: buttonAppearance, width: buttonWidth, size: buttonSize, fill: buttonFill, fillHover: buttonFillHover, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, shape: buttonShape, onClick: closeCookiesWarning, children: buttonLabel })] }) })));
 }
 
 export { CookiesWarning, cookiesWarningAppearance, cookiesWarningConfig };