@itcase/ui 1.4.2 → 1.4.5

package/dist/components/Checkbox.js

@@ -1,8 +1,8 @@
+import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { T as Text } from '../Text-C6NSmetx.js';
-import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -37,18 +37,20 @@ var checkboxState = {
 
 var checkboxConfig = {
     appearance: checkboxAppearance,
-    setAppearance: function (newComponent) {
-        checkboxConfig.appearance = newComponent;
-    },
     state: checkboxState,
-    // eslint-disable-next-line perfectionist/sort-objects
-    setState: function (newComponent) {
-        checkboxConfig.state = newComponent;
+    setAppearance: function (appearanceConfig) {
+        checkboxConfig.appearance = appearanceConfig;
+    },
+    setState: function (appearanceConfig) {
+        checkboxConfig.state = appearanceConfig;
     },
 };
 function Checkbox(props) {
-    var id = props.id, after = props.after, appearance = props.appearance, before = props.before, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
-    var appearanceConfig = checkboxConfig.appearance && checkboxConfig.appearance[appearance];
+    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, checked = props.checked, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (__assign(__assign({}, resultAppearance), (_a = checkboxConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass, stateBorderWidthClass = propsGenerator.stateBorderWidthClass, stateShapeClass = propsGenerator.stateShapeClass, widthClass = propsGenerator.widthClass;
     var stateFillClass = propsGenerator.getClassName(checked ? 'stateFillChecked' : 'stateFill', {
@@ -58,7 +60,7 @@ function Checkbox(props) {
     var stateCheckmarkFillClass = propsGenerator.getClassName(disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill', { prefix: 'checkbox_checkmark_fill_' });
     var stateBorderColorClass = propsGenerator.getClassName(checked ? 'stateBorderColorChecked' : 'stateBorderColor', { prefix: 'border-color_' });
     var stateBorderColorDisabledClass = propsGenerator.getClassName(checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled', { prefix: 'border-color_' });
-    return (jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), shapeClass && "checkbox_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass)), htmlFor: Tag === 'label' && id, children: [before, jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass), children: [jsx("input", { className: "checkbox__input", checked: checked, disabled: disabled, 
+    return (jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), shapeClass && "checkbox_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass), children: [jsx("input", { className: "checkbox__input", checked: checked, disabled: disabled, 
                         // @ts-expect-error
                         id: id, type: "checkbox", value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsx("div", { className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateShapeClass && "checkbox__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsx("div", { className: "checkbox__state-checkmark", children: "\u00A0" })] }), label && (jsx(Text, { className: "checkbox__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "checkbox__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textWeight: descTextWeight, children: desc })), after && jsx("div", { className: "checkbox__after", children: after })] }));
 }

package/dist/components/Checkmark.js

@@ -14,27 +14,53 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 
-var checkmarkAppearance = {
+var checkmarkAppearanceAccent = {
     accent: {
         fill: 'accentPrimary',
         borderColor: 'accentBorderPrimary',
-        borderWidth: '4',
+        borderWidth: '2',
         checkmarkFill: 'accentItemPrimary',
     },
+};
+
+var checkmarkAppearanceDisabled = {
     disabled: {
-        fill: 'surfaceItemSecondary',
-        borderColor: 'surfaceBorderTertiary',
-        borderWidth: '4',
-        checkmarkFill: '#surfaceItemSecondary',
+        fill: 'surfaceDisabled',
+        borderColor: 'surfaceBorderDisabled',
+        borderWidth: '2',
+        checkmarkFill: 'surfaceItemDisabled',
+    },
+};
+
+var checkmarkAppearanceStyle = {
+    full: {
+        borderColor: null,
     },
+    ghost: {
+        fill: null,
+        borderColor: null,
+    },
+    outlined: {
+        fill: null,
+    },
+    solid: {
+        borderColor: null,
+    },
+};
+
+var checkmarkAppearanceSurface = {
     surface: {
         fill: 'surfacePrimary',
+        fillHover: 'surfaceHover',
         borderColor: 'surfaceBorderTertiary',
-        borderWidth: '4',
+        borderColorHover: 'surfaceBorderPrimary',
+        borderWidth: '2',
         checkmarkFill: 'surfaceItemPrimary',
     },
 };
 
+var checkmarkAppearance = __assign(__assign(__assign(__assign({}, checkmarkAppearanceAccent), checkmarkAppearanceDisabled), checkmarkAppearanceStyle), checkmarkAppearanceSurface);
+
 var checkmarkConfig = {
     appearance: checkmarkAppearance,
     setAppearance: function (appearanceConfig) {
@@ -48,10 +74,11 @@ function Checkmark(props) {
         return (__assign(__assign({}, resultApperance), (_a = checkmarkConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderWidthClass = propsGenerator.borderWidthClass, checkmarkFillClass = propsGenerator.checkmarkFillClass, sizeClass = propsGenerator.sizeClass;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, checkmarkFillClass = propsGenerator.checkmarkFillClass, sizeClass = propsGenerator.sizeClass;
     // @ts-expect-error
     var checkmarkStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'checkmark', sizeClass && "checkmark_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), isDisabled), style: checkmarkStyles, onClick: onClick, children: isChecked && (jsx("div", { className: clsx('checkmark__icon', "svg_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: "none", 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" }) }) })) }));
+    return (jsx("div", { className: clsx(className, 'checkmark', sizeClass && "checkmark_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_".concat(fillHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorHoverClass &&
+            "border-color_hover_".concat(borderColorHoverClass), borderColorClass && "border-color_".concat(borderColorClass), isDisabled), style: checkmarkStyles, onClick: onClick, children: isChecked && (jsx("div", { className: clsx('checkmark__icon', "svg_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: "none", 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.js

@@ -66,18 +66,18 @@ var chipsConfig = {
     },
 };
 function Chips(props) {
-    var className = props.className, appearance = props.appearance, children = props.children, _a = props.label, label = _a === void 0 ? '' : _a, dataTestId = props.dataTestId, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, isActive = props.isActive, onClick = props.onClick;
+    var className = props.className, appearance = props.appearance, _a = props.label, label = _a === void 0 ? '' : _a, dataTestId = props.dataTestId, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, isActive = props.isActive, onClick = props.onClick, children = props.children;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultApperance, appearance) {
         var _a;
         return (__assign(__assign({}, resultApperance), (_a = chipsConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, cursorClass = propsGenerator.cursorClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, isDisabled = propsGenerator.isDisabled;
+    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, cursorClass = propsGenerator.cursorClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, isDisabled = propsGenerator.isDisabled;
     // @ts-expect-error
     var chipsStyles = useStyles(props).styles;
     return (jsx("div", { className: clsx(className, 'chips', isActive && 'chips_state_active', isActive
             ? fillActiveClass && "fill_active_".concat(fillActiveClass)
-            : fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), "data-testid": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, style: chipsStyles, onClick: onClick, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, size: iconBeforeSize, SvgImage: iconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", textColor: isActive ? labelTextActiveColor : labelTextColor, textWeight: labelTextWeight, textWrap: labelTextWrap, size: labelTextSize, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "chips__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, size: iconAfterSize, SvgImage: iconAfter }))] }) }));
+            : fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), "data-testid": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: isActive ? labelTextActiveColor : labelTextColor, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }));
 }
 
 export { Chips, chipsAppearance, chipsConfig };

package/dist/components/Choice.js

@@ -3,7 +3,7 @@ import { useRef, useMemo, createRef, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { I as Icon } from '../Icon-htF_V35Y.js';
-import { L as Loader } from '../Loader-CsPvc-9g.js';
+import { L as Loader } from '../Loader-D4_r7LML.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
@@ -52,17 +52,18 @@ var choiceConfig = {
     },
 };
 function Choice(props) {
-    var _a = props.isCheckbox, isCheckbox = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.active, active = _d === void 0 ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === void 0 ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === void 0 ? 'normal' : _f, type = props.type;
+    var className = props.className, type = props.type, name = props.name, appearance = props.appearance, _a = props.size, size = _a === void 0 ? 'normal' : _a, labelTextActiveColor = props.labelTextActiveColor, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, iconFillDisabled = props.iconFillDisabled, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColorDisabled = props.labelTextColorDisabled, _b = props.active, active = _b === void 0 ? { value: undefined } : _b, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, icon = props.icon, iconItemFill = props.iconItemFill, iconSize = props.iconSize, _c = props.options, options = _c === void 0 ? [] : _c, before = props.before, after = props.after, _d = props.isCheckbox, isCheckbox = _d === void 0 ? false : _d, _e = props.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = props.isLoading, isLoading = _f === void 0 ? false : _f, set = props.set, setActiveSegment = props.setActiveSegment;
     var controlRef = useRef(null);
-    var optionsRefs = useMemo(function () { return new Map(options.map(function (item) { return [item.value, createRef()]; })); }, [options]);
+    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;
         setActiveSegment && setActiveSegment(item, isChecked);
     }, [isCheckbox, setActiveSegment]);
-    // @ts-expect-error
     var appearanceConfig = choiceConfig.appearance && choiceConfig.appearance[appearance];
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, columnGapClass = propsGenerator.columnGapClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveDisabledClass = propsGenerator.fillActiveDisabledClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, gapClass = propsGenerator.gapClass, rowGapClass = propsGenerator.rowGapClass, shapeClass = propsGenerator.shapeClass, wrapClass = propsGenerator.wrapClass;
+    var fillActiveClass = propsGenerator.fillActiveClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, fillActiveDisabledClass = propsGenerator.fillActiveDisabledClass, fillDisabledClass = propsGenerator.fillDisabledClass, columnGapClass = propsGenerator.columnGapClass, gapClass = propsGenerator.gapClass, rowGapClass = propsGenerator.rowGapClass, shapeClass = propsGenerator.shapeClass, wrapClass = propsGenerator.wrapClass;
     return (jsx("div", { className: clsx(className, 'choice', shapeClass && "choice_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsx("div", { className: clsx(className, 'choice__wrapper', gapClass && "gap_".concat(gapClass), rowGapClass && "row-gap_".concat(rowGapClass), columnGapClass && "column-gap_".concat(columnGapClass), wrapClass && "choice_wrap_".concat(wrapClass)), children: options.map(function (item) {
                 // prettier-ignore
                 var isActive = typeof active === 'object'
@@ -70,21 +71,28 @@ function Choice(props) {
                     : String(item.value) === String(active);
                 return (jsxs("div", { className: clsx('choice__item', !isDisabled
                         ? fillClass && "fill_".concat(fillClass)
-                        : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, !isActive && isDisabled && 'choice__item_state_disabled', isActive
+                        : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
+                        ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
+                        : null, !isActive && isDisabled && 'choice__item_state_disabled', isActive
                         ? !isDisabled
                             ? fillActiveClass && "fill_active_".concat(fillActiveClass)
-                            : fillActiveDisabledClass && "fill_active_disabled_".concat(fillActiveDisabledClass)
+                            : fillActiveDisabledClass &&
+                                "fill_active_disabled_".concat(fillActiveDisabledClass)
                         : !isDisabled
                             ? fillClass && "fill_".concat(fillClass)
-                            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), isActive && isDisabled && 'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsx("input", { className: "choice__item-radio", name: name, checked: isActive, disabled: isDisabled, id: "".concat(name, "-").concat(item.value), type: isCheckbox ? 'checkbox' : 'radio', 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: [before, item.label && (jsx(Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: isActive
+                            : fillDisabledClass &&
+                                "fill_disabled_".concat(fillDisabledClass), 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: [before, item.label && (jsx(Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: isActive
                                         ? !isDisabled
-                                            ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
+                                            ? labelTextActiveColor ||
+                                                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
                                             : labelTextActiveColorDisabled
                                         : !isDisabled
                                             ? labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor)
-                                            : labelTextColorDisabled, children: item.label })), (icon || activeIcon) && (jsx(Icon, { className: "choice__item-icon", iconFillDisabled: isDisabled ? iconFillDisabled : undefined, iconSize: iconSize, SvgImage: isActive ? activeIcon : icon, iconFill: isActive
+                                            : labelTextColorDisabled, textWeight: labelTextWeight, children: item.label })), (icon || activeIcon) && (jsx(Icon, { className: "choice__item-icon", iconFillDisabled: isDisabled ? iconFillDisabled : undefined, iconFill: isActive
                                         ? activeIconItemFill || item.activeIconItemFill
-                                        : iconItemFill || item.iconItemFill })), after] })] }, "".concat(name, "-").concat(item.value)));
+                                        : iconItemFill || item.iconItemFill, iconSize: iconSize, SvgImage: isActive ? activeIcon : icon })), after] })] }, "".concat(name, "-").concat(item.value)));
             }) })) }));
 }
 

package/dist/components/CookiesWarning.js

@@ -3,7 +3,7 @@ import { useRef, useMemo, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { B as Button } from '../Button-BtAUGGPc.js';
+import { B as Button } from '../Button-Bsrw4D7p.js';
 import { G as Group } from '../Group-DiMnEfge.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import '../tslib.es6-5FtW-kfi.js';
@@ -22,7 +22,7 @@ import 'react-inlinesvg';
 import '../Link-BhJ5BdyS.js';
 import '../Tooltip-BYgzNVYI.js';
 import '../Title-Dck3eHNM.js';
-import '../Loader-CsPvc-9g.js';
+import '../Loader-D4_r7LML.js';
 
 function CookiesWarning(props) {
     var _a = props.isHideOnScroll, isHideOnScroll = _a === void 0 ? false : _a, buttonFill = props.buttonFill, buttonFillHover = props.buttonFillHover, _b = props.buttonLabel, buttonLabel = _b === void 0 ? 'I agree' : _b, buttonLabelSize = props.buttonLabelSize, buttonLabelTextColor = props.buttonLabelTextColor, buttonShape = props.buttonShape, buttonSize = props.buttonSize, buttonWidth = props.buttonWidth, className = props.className, _c = props.message, message = _c === void 0 ? 'The site uses cookies to collect technical information, to optimize the design and improvement of the website, and to provide certain functions. By using the website, you agree to the use of «cookies».' : _c, textColor = props.textColor, textSize = props.textSize;

package/dist/components/DatePicker.js

@@ -6,10 +6,10 @@ import { ru } from 'date-fns/locale';
 import DatePicker from 'react-datepicker';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button-BtAUGGPc.js';
+import { B as Button } from '../Button-Bsrw4D7p.js';
 import { I as Icon } from '../Icon-htF_V35Y.js';
 import { I as Input } from '../Input-COFdaiTe.js';
-import { L as Label } from '../Label-Dpeq55TV.js';
+import { L as Label } from '../Label-I9WNpCXa.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -21,7 +21,7 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Link-BhJ5BdyS.js';
-import '../Loader-CsPvc-9g.js';
+import '../Loader-D4_r7LML.js';
 import 'react-inlinesvg';
 import '../Tooltip-BYgzNVYI.js';
 import '../Title-Dck3eHNM.js';

package/dist/components/Label.js

@@ -1,4 +1,4 @@
-export { L as Label, a as labelAppearance, l as labelConfig } from '../Label-Dpeq55TV.js';
+export { L as Label, a as labelAppearance, l as labelConfig } from '../Label-I9WNpCXa.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components/Loader.js

@@ -1,4 +1,4 @@
-export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader-CsPvc-9g.js';
+export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader-D4_r7LML.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'clsx';

package/dist/components/MenuItem.js

@@ -1,8 +1,10 @@
-export { M as MenuItem, a as menuItemAppearance, m as menuItemConfig } from '../MenuItem-Cjlnmfwh.js';
-import 'react/jsx-runtime';
-import 'react';
-import 'clsx';
-import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from '../hooks/useStyles/useStyles.js';
+import { a as Link } from '../Link-BhJ5BdyS.js';
+import { T as Text } from '../Text-C6NSmetx.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -11,8 +13,38 @@ import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Link-BhJ5BdyS.js';
-import '../Text-C6NSmetx.js';
+
+var menuItemAppearance = {
+    any: {
+        fill: 'surfacePrimary',
+        textColor: 'surfaceTextPrimary',
+        textColorActive: 'surfaceTextAccent',
+        textColorHover: 'surfaceTextAccent',
+    },
+};
+
+var menuItemConfig = {
+    appearance: menuItemAppearance,
+    setAppearance: function (newComponent) {
+        menuItemConfig.appearance = newComponent;
+    },
+};
+function MenuItem(props) {
+    var children = props.children, isActive = props.isActive, isHover = props.isHover, after = props.after, appearance = props.appearance, before = props.before, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, href = props.href, label = props.label, link = props.link, linkFill = props.linkFill, rel = props.rel, set = props.set, target = props.target, textColor = props.textColor, textColorActive = props.textColorActive, textColorHover = props.textColorHover, textGradient = props.textGradient, textSize = props.textSize, textStyle = props.textStyle, textWeight = props.textWeight, textWrap = props.textWrap, underline = props.underline, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    // @ts-expect-error
+    var appearanceConfig = menuItemConfig.appearance && menuItemConfig.appearance[appearance];
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, justifyContentClass = propsGenerator.justifyContentClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
+    // @ts-expect-error
+    var menuItem = useStyles(props).styles;
+    return (jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass && "menu-item_direction_".concat(directionClass), className, sizeClass && "menu-item_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "menu-item_shape_".concat(shapeClass), typeClass && "menu-item_type_".concat(typeClass), widthClass && "width_".concat(widthClass), set && "menu-item_set_".concat(set), justifyContentClass && "menu-item_justify-content_".concat(justifyContentClass)), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('menu-item__label', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "menu-item__label", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textColorGradient: textGradient, textColorHover: textColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorHover), textStyle: textStyle, textWeight: textWeight, textWrap: textWrap, textColorActive: isActive && (textColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorActive)), children: label })), desc && (jsx(Text, { className: "menu-item__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColorHover), textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }));
+}
+MenuItem.defaultProps = {
+    direction: 'horizontal',
+    LinkComponent: 'a',
+    size: 'm',
+};
+
+export { MenuItem, menuItemAppearance, menuItemConfig };

package/dist/components/Modal.js

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { O as Overlay } from '../Overlay-BKh07Vb2.js';
-import { L as Loader } from '../Loader-CsPvc-9g.js';
+import { L as Loader } from '../Loader-D4_r7LML.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';