@itcase/ui 1.8.123 → 1.8.124

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_CZss7cXh.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 };

package/dist/components/Dadata.js

@@ -1,9 +1,8 @@
-import { _ as __assign, b as __rest } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { PartySuggestions } from 'react-dadata';
-import { I as Input } from '../Input_es_Cv5nEb_n.js';
+import { I as Input } from '../Input_es_BnCXATnh.js';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
@@ -20,15 +19,21 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 
 function Dadata(props) {
-    var delay = props.delay, input = props.input, inputProps = props.inputProps, meta = props.meta, token = props.token, setValue = props.setValue;
-    var dadataInputProps = useMemo(function () {
-        return __assign(__assign({}, inputProps), { className: clsx('react-dadata__input', meta.active && 'input_state_focus', meta.error &&
+    const { delay, input, inputProps, meta, token, setValue } = props;
+    const dadataInputProps = useMemo(() => {
+        return {
+            ...inputProps,
+            className: clsx('react-dadata__input', meta.active && 'input_state_focus', meta.error &&
                 meta.touched &&
-                "input_state_".concat(meta.error.key || 'error')), 
+                `input_state_${meta.error.key || 'error'}`),
             // https://www.npmjs.com/package/react-dadata
             // "Свойство value игнорируется."
             // value: input.value,
-            inputValue: input.value, onBlur: input.onBlur, onChange: input.onChange, onFocus: input.onFocus });
+            inputValue: input.value,
+            onBlur: input.onBlur,
+            onChange: input.onChange,
+            onFocus: input.onFocus,
+        };
     }, [
         inputProps,
         meta.active,
@@ -42,8 +47,8 @@ function Dadata(props) {
     return (jsx(PartySuggestions, { minChars: 3, customInput: DadataCustomInput, delay: delay || 750, inputProps: dadataInputProps, token: token, onChange: setValue }));
 }
 function DadataCustomInput(props) {
-    var inputValue = props.inputValue, otherProps = __rest(props, ["inputValue"]);
-    return jsx(Input, __assign({}, otherProps, { value: inputValue }));
+    const { inputValue, ...otherProps } = props;
+    return jsx(Input, { ...otherProps, value: inputValue });
 }
 
 export { Dadata };

package/dist/components/DatePeriod.js

@@ -2,11 +2,10 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_DRyCMO0I.js';
+import { D as DatePickerInput } from '../DatePicker_es_D1LvY5RT.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_ayPPUwQ7.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_BVQ7_n0k.js';
 import 'date-fns/locale';
 import 'react-datepicker';
 import '../hooks/useStyles/useStyles.js';
@@ -21,20 +20,20 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Button_es_CZss7cXh.js';
-import '../Icon_es_BrwLifge.js';
+import '../Button_es_Cn3wtv3M.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 '../Loader_es_BUSqFrCd.js';
-import '../Input_es_Cv5nEb_n.js';
-import '../Label_es_SULlg9bL.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Text_es_CnymlElo.js';
+import '../Loader_es_CmSggwbR.js';
+import '../Input_es_BnCXATnh.js';
+import '../Label_es_DCqpSw_F.js';
 import '@itcase/icons/default';
 import 'lodash/castArray';
 
-var datePeriodAppearanceSize = {
+const datePeriodAppearanceSize = {
     sizeL: {
         size: 'm',
         chipsAppearanceSize: 'sizeL',
@@ -51,7 +50,7 @@ var datePeriodAppearanceSize = {
     },
 };
 
-var datePeriodAppearanceSurface = {
+const datePeriodAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         chipsAppearance: 'surfacePrimary ghost',
@@ -70,27 +69,30 @@ var datePeriodAppearanceSurface = {
     },
 };
 
-var datePeriodAppearance = __assign(__assign({}, datePeriodAppearanceSurface), datePeriodAppearanceSize);
+const datePeriodAppearance = {
+    ...datePeriodAppearanceSurface,
+    ...datePeriodAppearanceSize,
+};
 
-var datePeriodConfig = {
+const datePeriodConfig = {
     appearance: datePeriodAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         datePeriodConfig.appearance = appearanceConfig;
     },
 };
 function DatePeriod(props) {
-    var appearance = props.appearance, className = props.className, _a = props.datePeriodIntervalsList, datePeriodIntervalsList = _a === void 0 ? Object.values(DATE_PERIOD_INTERVALS) : _a, datePeriodValueEnd = props.datePeriodValueEnd, datePeriodValueStart = props.datePeriodValueStart, monthsShown = props.monthsShown, isDisabled = props.isDisabled, isSkeleton = props.isSkeleton, onChangeDatePeriod = props.onChangeDatePeriod, onKeyDown = props.onKeyDown;
-    var appearanceConfig = useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var _b = propsGenerator, fillClass = _b.fillClass, chipsAppearance = _b.chipsAppearance, chipsAppearanceSize = _b.chipsAppearanceSize, chipsShape = _b.chipsShape, datePickerAppearance = _b.datePickerAppearance, datePickerAppearanceSize = _b.datePickerAppearanceSize, datePickerInputAppearance = _b.datePickerInputAppearance, datePickerInputFillHover = _b.datePickerInputFillHover, datePickerInputSize = _b.datePickerInputSize, datePickerInputTextSize = _b.datePickerInputTextSize, shapeClass = _b.shapeClass, sizeClass = _b.sizeClass;
-    var onClickPeriodChips = useCallback(function (selectedPeriodItem) {
-        var dateStartIso = selectedPeriodItem.dateIntervalsList[0];
-        var dateEndIso = selectedPeriodItem.dateIntervalsList[1];
+    const { appearance, className, datePeriodIntervalsList = Object.values(DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputFillHover, datePickerInputSize, datePickerInputTextSize, shapeClass, sizeClass, } = propsGenerator;
+    const onClickPeriodChips = useCallback((selectedPeriodItem) => {
+        const dateStartIso = selectedPeriodItem.dateIntervalsList[0];
+        const dateEndIso = selectedPeriodItem.dateIntervalsList[1];
         onChangeDatePeriod(new Date(dateStartIso), new Date(dateEndIso));
     }, [onChangeDatePeriod]);
-    var checkIsChipsActive = useCallback(function (targetPeriodItem) {
-        var dateStartIso = targetPeriodItem.dateIntervalsList[0];
-        var dateEndIso = targetPeriodItem.dateIntervalsList[1];
+    const checkIsChipsActive = useCallback((targetPeriodItem) => {
+        const dateStartIso = targetPeriodItem.dateIntervalsList[0];
+        const dateEndIso = targetPeriodItem.dateIntervalsList[1];
         return (dateStartIso === datePeriodValueStart &&
             dateEndIso === datePeriodValueEnd);
     }, [datePeriodValueEnd, datePeriodValueStart]);
@@ -108,18 +110,18 @@ function DatePeriod(props) {
     //   },
     //   [onChangeDatePeriod],
     // )
-    return (jsx("div", { className: clsx(className, 'date-period', shapeClass && "date-period_shape_".concat(shapeClass), sizeClass && "date-period_size_".concat(sizeClass), isSkeleton && "date-period_skeleton", fillClass && "fill_".concat(fillClass), 'cursor_type_pointer'), children: jsxs(ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map(function (datePeriodItem) { return (jsx(Chips, { appearance: "".concat(chipsAppearance, " ").concat(chipsAppearanceSize), label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: function () { return onClickPeriodChips(datePeriodItem); } }, datePeriodItem.value)); }), jsx(DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
-                        appearance: "".concat(datePickerAppearance, " ").concat(datePickerAppearanceSize),
+    return (jsx("div", { className: clsx(className, 'date-period', shapeClass && `date-period_shape_${shapeClass}`, sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: jsxs(ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map((datePeriodItem) => (jsx(Chips, { appearance: `${chipsAppearance} ${chipsAppearanceSize}`, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))), jsx(DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
+                        appearance: `${datePickerAppearance} ${datePickerAppearanceSize}`,
                         dateFormat: 'dd/MM/yyyy',
                         monthsShown: monthsShown,
-                        selectsRange: true,
+                        selectsRange: selectsRange,
                         showWeekNumbers: true,
                         isClearable: false,
                         isStartDefaultNull: true,
                         onKeyDown: onKeyDown,
                     }, endValue: datePeriodValueEnd, inputProps: {
-                        appearance: "".concat(datePickerInputAppearance, " ghost"),
-                        className: "date-period__datepicker-input date-period__datepicker-input_size_".concat(datePickerInputSize),
+                        appearance: `${datePickerInputAppearance} ghost`,
+                        className: `date-period__datepicker-input date-period__datepicker-input_size_${datePickerInputSize}`,
                         fillHover: datePickerInputFillHover,
                         textSize: datePickerInputTextSize,
                         placeholder: 'Выбрать период',