@itcase/ui 1.8.135 → 1.8.137

package/dist/{Button_cjs_BxoEdSG6.js → Button_cjs_BXEwg-En.js}

@@ -461,10 +461,10 @@ const buttonConfig = {
     },
 };
 const Button = React.forwardRef(function Button(props, ref) {
-    const { dataTestId, dataTour, className, appearance, label, Badge, href, htmlType = 'button', link, rel, target, before, after, isDisabled, isLoading = false, onClick, onMouseDown, children, } = props;
+    const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, before, after, isDisabled, isLoading = false, onClick, onMouseDown, children, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, buttonConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { fillClass, fillHoverClass, borderColorClass, borderTypeClass, borderWidthClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextTruncate, labelTextWeight, labelTextWidth, labelTextWrap, elevationClass, icon, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'simple', shapeClass, shapeStrengthClass, sizeClass, widthClass, isSkeleton, } = propsGenerator;
+    const { fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextTruncate, labelTextWeight, labelTextWidth, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, icon, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'simple', shapeClass, shapeStrengthClass, sizeClass, widthClass, isSkeleton, } = propsGenerator;
     const { label: labelStyles, styles: buttonStyles } = useStyles.useStyles(props);
     const buttonTypeClass = after ||
         before ||
@@ -480,7 +480,7 @@ const Button = React.forwardRef(function Button(props, ref) {
                 ? 'buttom_type_label'
                 : buttonTypeClass
                     ? 'button_type_icon'
-                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, disabled: isDisabled, "data-test-id": dataTestId && `${dataTestId}Button`, "data-tour": dataTour, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
+                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-test-id": dataTestId && `${dataTestId}Button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
 });
 
 exports.Button = Button;

package/dist/{Button_es_B-SYHL6T.js → Button_es_DEn6z83v.js}

@@ -459,10 +459,10 @@ const buttonConfig = {
     },
 };
 const Button = React.forwardRef(function Button(props, ref) {
-    const { dataTestId, dataTour, className, appearance, label, Badge, href, htmlType = 'button', link, rel, target, before, after, isDisabled, isLoading = false, onClick, onMouseDown, children, } = props;
+    const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, before, after, isDisabled, isLoading = false, onClick, onMouseDown, children, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, buttonConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { fillClass, fillHoverClass, borderColorClass, borderTypeClass, borderWidthClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextTruncate, labelTextWeight, labelTextWidth, labelTextWrap, elevationClass, icon, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'simple', shapeClass, shapeStrengthClass, sizeClass, widthClass, isSkeleton, } = propsGenerator;
+    const { fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextTruncate, labelTextWeight, labelTextWidth, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, icon, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'simple', shapeClass, shapeStrengthClass, sizeClass, widthClass, isSkeleton, } = propsGenerator;
     const { label: labelStyles, styles: buttonStyles } = useStyles(props);
     const buttonTypeClass = after ||
         before ||
@@ -478,7 +478,7 @@ const Button = React.forwardRef(function Button(props, ref) {
                 ? 'buttom_type_label'
                 : buttonTypeClass
                     ? 'button_type_icon'
-                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, disabled: isDisabled, "data-test-id": dataTestId && `${dataTestId}Button`, "data-tour": dataTour, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsx(Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
+                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-test-id": dataTestId && `${dataTestId}Button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsx(Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
 });
 
 export { Button as B, buttonAppearance as a, buttonConfig as b };

package/dist/{DatePicker_cjs_BLOiIsfD.js → DatePicker_cjs_Dxbyx8GV.js}

@@ -8,7 +8,7 @@ var DatePicker = require('react-datepicker');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Button = require('./Button_cjs_BxoEdSG6.js');
+var Button = require('./Button_cjs_BXEwg-En.js');
 var Icon = require('./Icon_cjs_DKzT-zmQ.js');
 var Input = require('./Input_cjs_DDi5JVAV.js');
 var Label = require('./Label_cjs_D2YMjCoS.js');

package/dist/{DatePicker_es_VslTy9Qw.js → DatePicker_es_mX0NSjO5.js}

@@ -6,7 +6,7 @@ import DatePicker from 'react-datepicker';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { B as Button } from './Button_es_B-SYHL6T.js';
+import { B as Button } from './Button_es_DEn6z83v.js';
 import { I as Icon } from './Icon_es_5JUPM7bP.js';
 import { I as Input } from './Input_es_BnCXATnh.js';
 import { L as Label } from './Label_es_B5uGQwNN.js';

package/dist/cjs/components/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button_cjs_BxoEdSG6.js');
+var Button = require('../../Button_cjs_BXEwg-En.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/Choice.js

@@ -28,14 +28,32 @@ require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_qKXVfU8e.js');
 
 const choiceAppearanceDefault = {
+    defaultMutedPrimary: {
+        fill: 'surfaceSecondary',
+        fillItem: 'surfaceSecondary',
+        fillItemActive: 'accentTertiary',
+        fillItemActiveHover: 'accentPrimary',
+        fillItemHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'surfaceTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
+        borderColor: 'surfaceBorderSecondary',
+        iconAfterFill: 'surfaceItemQuaternary',
+        iconAfterFillActive: 'surfaceItemSecondary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconBeforeFillActive: 'surfaceItemSecondary',
+        iconFill: 'surfaceItemQuaternary',
+        iconFillActive: 'surfaceItemSecondary',
+    },
     defaultPrimary: {
         fill: 'surfaceSecondary',
         fillItem: 'surfaceSecondary',
         fillItemActive: 'accentPrimary',
         fillItemActiveHover: 'accentHoverPrimary',
         fillItemHover: 'surfaceTertiary',
-        labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'accentTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFill: 'surfaceItemQuaternary',
         iconAfterFillActive: 'surfaceItemSecondary',
@@ -150,14 +168,10 @@ const choiceAppearanceStyle = {
     },
     outlined: {
         fill: 'none',
-        fillItem: 'none',
-        fillItemActive: 'none',
     },
     full: {},
     ghost: {
         fill: 'none',
-        fillItem: 'none',
-        fillItemActive: 'none',
         borderColor: 'none',
     },
 };
@@ -198,7 +212,7 @@ const choiceConfig = {
     },
 };
 function Choice(props) {
-    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 { id, appearance, className, dataTestId, dataTour, name, active = { value: undefined }, itemAfter, itemBefore, options = [], before, after, isDisabled = false, isSkeleton, isCheckbox = false, isLoading = false, setActiveSegment, } = props;
     const controlRef = React.useRef(null);
     const optionsRefs = React.useMemo(() => new Map(options.map((item) => [item.value, React.createRef()])), [options]);
     const onChange = React.useCallback((event, item) => {
@@ -207,7 +221,7 @@ function Choice(props) {
     }, [isCheckbox, setActiveSegment]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, choiceConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { size, fillClass, fillItemActiveClass, fillItemActiveDisabledClass, fillItemActiveHoverClass, fillItemClass, fillItemDisabledClass, fillItemHoverClass, labelTextActiveColor, labelTextColor, labelTextSize, labelTextWeight, labelTextWrap, iconAfterFillDisabled, iconBeforeFillDisabled, iconFillDisabled, borderColorClass, borderTypeClass, borderWidthClass, iconAfterFill, iconAfterFillActive, iconAfterSize, iconBeforeFill, iconBeforeFillActive, iconBeforeSize, iconFill, iconFillActive, iconSize, shapeClass, shapeStrengthClass, wrapClass, } = propsGenerator;
+    const { size, fillClass, fillItemActiveClass, fillItemActiveDisabledClass, fillItemActiveHoverClass, fillItemClass, fillItemDisabledClass, fillItemHoverClass, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconAfterFill, iconAfterFillActive, iconAfterFillDisabled, iconAfterSize, iconBeforeFill, iconBeforeFillActive, iconBeforeFillDisabled, iconBeforeSize, iconFill, iconFillActive, iconFillDisabled, iconSize, shapeClass, shapeStrengthClass, wrapClass, } = propsGenerator;
     const { styles } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'choice', size && `choice_size_${size}`, fillClass && `fill_${fillClass}`, wrapClass && `choice_wrap_${wrapClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `choice_skeleton`), ref: controlRef, "data-test-id": dataTestId && `${dataTestId}Choice`, "data-tour": dataTour, style: styles, children: [before && jsxRuntime.jsx("div", { className: "choice__before", children: before }), isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsxRuntime.jsx(React.Fragment, { children: options.map((item) => {
                     const isActive = typeof active === 'object'
@@ -230,9 +244,9 @@ function Choice(props) {
                                 : fillItemDisabledClass &&
                                     `fill_disabled_${fillItemDisabledClass}`, !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
                             isDisabled &&
-                            'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { id: `${name}-${item.value}`, className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, disabled: isDisabled, checked: isActive, value: item.value, onChange: (event) => onChange(event, item) }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: `${name}-${item.value}`, children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconBeforeFillDisabled, isDisabled: isDisabled, iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconSize: iconBeforeSize, SvgImage: isActive
+                            'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { id: `${name}-${item.value}`, className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, checked: isActive, disabled: isDisabled, value: item.value, onChange: (event) => onChange(event, item) }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: `${name}-${item.value}`, children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconFillDisabled: iconBeforeFillDisabled, iconSize: iconBeforeSize, SvgImage: isActive
                                             ? item.iconBeforeActive || item.iconBefore
-                                            : item.iconBefore, isActive: isActive })), item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconFillDisabled, iconFill: iconFill, iconFillActive: iconFillActive, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })), (item.iconAfter || item.iconAfterActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconAfterFillDisabled, iconFill: iconAfterFill, iconFillActive: iconAfterFillActive, iconSize: iconAfterSize, SvgImage: isActive
+                                            : item.iconBefore, isActive: isActive, isDisabled: isDisabled })), item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })), (item.iconAfter || item.iconAfterActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFill: iconAfterFill, iconFillActive: iconAfterFillActive, iconFillDisabled: iconAfterFillDisabled, iconSize: iconAfterSize, SvgImage: isActive
                                             ? item.iconAfterActive || item.iconAfter
                                             : item.iconAfter, isActive: isActive })), itemAfter] })] }, `${name}-${item.value}`));
                 }) })), after && jsxRuntime.jsx("div", { className: "choice__after", children: after })] }));

package/dist/cjs/components/CookiesWarning.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var Cookies = require('js-cookie');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Button = require('../../Button_cjs_BxoEdSG6.js');
+var Button = require('../../Button_cjs_BXEwg-En.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 require('lodash/camelCase');
 require('lodash/castArray');

package/dist/cjs/components/DatePeriod.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var common = require('@itcase/common');
-var DatePicker = require('../../DatePicker_cjs_BLOiIsfD.js');
+var DatePicker = require('../../DatePicker_cjs_Dxbyx8GV.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var ChipsGroup = require('../../ChipsGroup_cjs_Du8WHI-Y.js');
@@ -22,7 +22,7 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Button_cjs_BxoEdSG6.js');
+require('../../Button_cjs_BXEwg-En.js');
 require('../../Icon_cjs_DKzT-zmQ.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');

package/dist/cjs/components/DatePicker.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('../../DatePicker_cjs_BLOiIsfD.js');
+var DatePicker = require('../../DatePicker_cjs_Dxbyx8GV.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -22,7 +22,7 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Button_cjs_BxoEdSG6.js');
+require('../../Button_cjs_BXEwg-En.js');
 require('../../Icon_cjs_DKzT-zmQ.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');

package/dist/cjs/components/Pagination.js

@@ -248,7 +248,7 @@ const paginationConfig = {
     },
 };
 function Pagination(props) {
-    const { className, appearance, allItemsCount = 0, dataTestId, dataTour, pageCountArray = [10, 20, 50, 100], pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageNumber = 0, perPageCount = 0, isPageCount, isDisabled, isPageCountDropdownReversed = false, isPageLabelBuilder, isSkeleton, onChangePage, onChangePerPageCount, 
+    const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountArray = [10, 20, 50, 100], pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount, 
     /**
      * @deprecated The method should not be used
      */
@@ -307,16 +307,19 @@ function Pagination(props) {
     }, [pageNumber]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, paginationConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorClass, textColorHoverClass, textColorActiveClass, textColorActiveHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
+    const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
     const { styles: paginationStyles } = useStyles.useStyles(props);
-    return (allItemsCount > perPageCount && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass && `text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
-                    `text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
+    return (allItemsCount > perPageCount && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
+                    `fill fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass &&
+                    `text text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
+                    `text text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
                     `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", 
                 // pages settings
                 forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), 
                 // next button
                 nextLabel: jsxRuntime.jsx(Icon.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
-                    (() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsxRuntime.jsx(Icon.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass && `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
+                    (() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed ?? 8, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsxRuntime.jsx(Icon.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
+                            `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
                                         pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
                                         pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
 }

package/dist/cjs/components/Response.js

@@ -8,7 +8,7 @@ var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Button = require('../../Button_cjs_BxoEdSG6.js');
+var Button = require('../../Button_cjs_BXEwg-En.js');
 var Group = require('../../Group_cjs_DxyobxPf.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 require('@itcase/common');

package/dist/components/Button.js

@@ -1,4 +1,4 @@
-export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_B-SYHL6T.js';
+export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_DEn6z83v.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Choice.js

@@ -26,14 +26,32 @@ import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
 
 const choiceAppearanceDefault = {
+    defaultMutedPrimary: {
+        fill: 'surfaceSecondary',
+        fillItem: 'surfaceSecondary',
+        fillItemActive: 'accentTertiary',
+        fillItemActiveHover: 'accentPrimary',
+        fillItemHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'surfaceTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
+        borderColor: 'surfaceBorderSecondary',
+        iconAfterFill: 'surfaceItemQuaternary',
+        iconAfterFillActive: 'surfaceItemSecondary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconBeforeFillActive: 'surfaceItemSecondary',
+        iconFill: 'surfaceItemQuaternary',
+        iconFillActive: 'surfaceItemSecondary',
+    },
     defaultPrimary: {
         fill: 'surfaceSecondary',
         fillItem: 'surfaceSecondary',
         fillItemActive: 'accentPrimary',
         fillItemActiveHover: 'accentHoverPrimary',
         fillItemHover: 'surfaceTertiary',
-        labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'accentTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFill: 'surfaceItemQuaternary',
         iconAfterFillActive: 'surfaceItemSecondary',
@@ -148,14 +166,10 @@ const choiceAppearanceStyle = {
     },
     outlined: {
         fill: 'none',
-        fillItem: 'none',
-        fillItemActive: 'none',
     },
     full: {},
     ghost: {
         fill: 'none',
-        fillItem: 'none',
-        fillItemActive: 'none',
         borderColor: 'none',
     },
 };
@@ -196,7 +210,7 @@ const choiceConfig = {
     },
 };
 function Choice(props) {
-    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 { id, appearance, className, dataTestId, dataTour, name, active = { value: undefined }, itemAfter, itemBefore, options = [], before, after, isDisabled = false, isSkeleton, isCheckbox = false, isLoading = false, setActiveSegment, } = props;
     const controlRef = useRef(null);
     const optionsRefs = useMemo(() => new Map(options.map((item) => [item.value, createRef()])), [options]);
     const onChange = useCallback((event, item) => {
@@ -205,7 +219,7 @@ function Choice(props) {
     }, [isCheckbox, setActiveSegment]);
     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 { size, fillClass, fillItemActiveClass, fillItemActiveDisabledClass, fillItemActiveHoverClass, fillItemClass, fillItemDisabledClass, fillItemHoverClass, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconAfterFill, iconAfterFillActive, iconAfterFillDisabled, iconAfterSize, iconBeforeFill, iconBeforeFillActive, iconBeforeFillDisabled, iconBeforeSize, iconFill, iconFillActive, iconFillDisabled, 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'
@@ -228,9 +242,9 @@ function Choice(props) {
                                 : fillItemDisabledClass &&
                                     `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: `${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
+                            '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, checked: isActive, disabled: isDisabled, 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", iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconFillDisabled: iconBeforeFillDisabled, 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.iconBefore, isActive: isActive, isDisabled: isDisabled })), item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (jsx(Icon, { className: "choice__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })), (item.iconAfter || item.iconAfterActive) && (jsx(Icon, { className: "choice__item-icon", iconFill: iconAfterFill, iconFillActive: iconAfterFillActive, iconFillDisabled: iconAfterFillDisabled, iconSize: iconAfterSize, SvgImage: isActive
                                             ? item.iconAfterActive || item.iconAfter
                                             : item.iconAfter, isActive: isActive })), itemAfter] })] }, `${name}-${item.value}`));
                 }) })), after && jsx("div", { className: "choice__after", children: after })] }));

package/dist/components/CookiesWarning.js

@@ -4,7 +4,7 @@ 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_B-SYHL6T.js';
+import { B as Button } from '../Button_es_DEn6z83v.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/DatePeriod.js

@@ -2,7 +2,7 @@ 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_VslTy9Qw.js';
+import { D as DatePickerInput } from '../DatePicker_es_mX0NSjO5.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_CzVlqaHv.js';
@@ -20,7 +20,7 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Button_es_B-SYHL6T.js';
+import '../Button_es_DEn6z83v.js';
 import '../Icon_es_5JUPM7bP.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_VslTy9Qw.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_mX0NSjO5.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -20,7 +20,7 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Button_es_B-SYHL6T.js';
+import '../Button_es_DEn6z83v.js';
 import '../Icon_es_5JUPM7bP.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';

package/dist/components/Pagination.js

@@ -246,7 +246,7 @@ const paginationConfig = {
     },
 };
 function Pagination(props) {
-    const { className, appearance, allItemsCount = 0, dataTestId, dataTour, pageCountArray = [10, 20, 50, 100], pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageNumber = 0, perPageCount = 0, isPageCount, isDisabled, isPageCountDropdownReversed = false, isPageLabelBuilder, isSkeleton, onChangePage, onChangePerPageCount, 
+    const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountArray = [10, 20, 50, 100], pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount, 
     /**
      * @deprecated The method should not be used
      */
@@ -305,16 +305,19 @@ function Pagination(props) {
     }, [pageNumber]);
     const appearanceConfig = useAppearanceConfig(appearance, paginationConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorClass, textColorHoverClass, textColorActiveClass, textColorActiveHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
+    const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
     const { styles: paginationStyles } = useStyles(props);
-    return (allItemsCount > perPageCount && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass && `text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
-                    `text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
+    return (allItemsCount > perPageCount && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
+                    `fill fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass &&
+                    `text text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
+                    `text text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
                     `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", 
                 // pages settings
                 forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), 
                 // next button
                 nextLabel: jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
-                    (() => (jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsx(Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass && `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
+                    (() => (jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed ?? 8, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsx(Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
+                            `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
                                         pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
                                         pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
 }

package/dist/components/Response.js

@@ -6,7 +6,7 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_B-SYHL6T.js';
+import { B as Button } from '../Button_es_DEn6z83v.js';
 import { G as Group } from '../Group_es_DJ6GHMrs.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import '@itcase/common';

package/dist/css/styles/border-color/border-color.css

@@ -13,6 +13,17 @@
     @each $type in accent, primary, secondary, surface, error, warning, success,
       danger, info, disabled {
       @each $color in primary, secondary, tertiary, quaternary {
+        .border&_active_$(type),
+        &_active_$(type) {
+          &-border {
+            &-$(color) {
+              border-width: 1px;
+              border-color: var(--color-$(type)-border-$(color));
+              border-style: solid;
+            }
+          }
+        }
+        .border&_active_hover_$(type),
         &_active_hover_$(type) {
           &-border {
             &-$(color) {
@@ -54,7 +65,6 @@
             }
           }
         }
-        &_active_$(type),
         &_$(type) {
           &-border {
             &-$(color) {
@@ -79,6 +89,13 @@
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
       gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
       alto, athens-gray, sonic-silver {
+      .border&_active_$(palette),
+      &_active_$(palette) {
+        border-width: 1px;
+        border-color: var(--color-palette-$(palette));
+        border-style: solid;
+      }
+      .border&_active_hover_$(palette),
       &_active_hover_$(palette) {
         &:hover {
           border-width: 1px;
@@ -108,7 +125,6 @@
           }
         }
       }
-      &_active_$(palette),
       &_$(palette) {
         border-width: 1px;
         border-color: var(--color-palette-$(palette));

package/dist/css/styles/bundle.css

@@ -355,6 +355,17 @@ div.alignment {
     @each $type in accent, primary, secondary, surface, error, warning, success,
       danger, info, disabled {
       @each $color in primary, secondary, tertiary, quaternary {
+        .border&_active_$(type),
+        &_active_$(type) {
+          &-border {
+            &-$(color) {
+              border-width: 1px;
+              border-color: var(--color-$(type)-border-$(color));
+              border-style: solid;
+            }
+          }
+        }
+        .border&_active_hover_$(type),
         &_active_hover_$(type) {
           &-border {
             &-$(color) {
@@ -396,7 +407,6 @@ div.alignment {
             }
           }
         }
-        &_active_$(type),
         &_$(type) {
           &-border {
             &-$(color) {
@@ -421,6 +431,13 @@ div.alignment {
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
       gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
       alto, athens-gray, sonic-silver {
+      .border&_active_$(palette),
+      &_active_$(palette) {
+        border-width: 1px;
+        border-color: var(--color-palette-$(palette));
+        border-style: solid;
+      }
+      .border&_active_hover_$(palette),
       &_active_hover_$(palette) {
         &:hover {
           border-width: 1px;
@@ -450,7 +467,6 @@ div.alignment {
           }
         }
       }
-      &_active_$(palette),
       &_$(palette) {
         border-width: 1px;
         border-color: var(--color-palette-$(palette));
@@ -779,22 +795,26 @@ textarea.fill {
   @each $type in accent, primary, secondary, surface, error, warning, success,
     danger, info, disabled {
     @each $color in primary, secondary, tertiary, quaternary {
-      &_active_hover_$(type) {
+      &_$(type) {
+        &-item {
+          &-$(color) {
+            background: var(--color-$(type)-item-$(color));
+          }
+        }
+        &-$(color) {
+          background: var(--color-$(type)-fill-$(color));
+        }
+      }
+      &_hover_$(type) {
         &-item {
           &-$(color) {
             &:hover {
               background: var(--color-$(type)-item-$(color));
             }
-
             &-hover {
               &:hover {
                 background: var(--color-$(type)-item-$(color)-hover);
               }
-              &-active {
-                &:hover {
-                  background: var(--color-$(type)-item-$(color)-active-hover);
-                }
-              }
             }
           }
         }
@@ -806,16 +826,6 @@ textarea.fill {
             &:hover {
               background: var(--color-$(type)-fill-$(color)-hover);
             }
-            &-active {
-              &:hover {
-                background: var(--color-$(type)-fill-$(color)-active-hover);
-              }
-            }
-          }
-          &-active {
-            &:hover {
-              background: var(--color-$(type)-fill-$(color)-active);
-            }
           }
         }
         &-hover {
@@ -826,16 +836,34 @@ textarea.fill {
           }
         }
       }
-      &_hover_$(type) {
+      .fill&_active_$(type),
+      &_active_$(type) {
+        &-item {
+          &-$(color) {
+            background: var(--color-$(type)-item-$(color));
+          }
+        }
+        &-$(color) {
+          background: var(--color-$(type)-fill-$(color));
+        }
+      }
+      .fill&_active_hover_$(type),
+      &_active_hover_$(type) {
         &-item {
           &-$(color) {
             &:hover {
               background: var(--color-$(type)-item-$(color));
             }
+
             &-hover {
               &:hover {
                 background: var(--color-$(type)-item-$(color)-hover);
               }
+              &-active {
+                &:hover {
+                  background: var(--color-$(type)-item-$(color)-active-hover);
+                }
+              }
             }
           }
         }
@@ -847,6 +875,16 @@ textarea.fill {
             &:hover {
               background: var(--color-$(type)-fill-$(color)-hover);
             }
+            &-active {
+              &:hover {
+                background: var(--color-$(type)-fill-$(color)-active-hover);
+              }
+            }
+          }
+          &-active {
+            &:hover {
+              background: var(--color-$(type)-fill-$(color)-active);
+            }
           }
         }
         &-hover {
@@ -857,17 +895,6 @@ textarea.fill {
           }
         }
       }
-      &_active_$(type),
-      &_$(type) {
-        &-item {
-          &-$(color) {
-            background: var(--color-$(type)-item-$(color));
-          }
-        }
-        &-$(color) {
-          background: var(--color-$(type)-fill-$(color));
-        }
-      }
     }
   }
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
@@ -883,15 +910,11 @@ textarea.fill {
     dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
     stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
     sonic-silver {
-    &_active_hover_$(palette) {
-      &:hover {
-        background: var(--color-palette-$(palette));
-      }
+    &_$(palette) {
+      background: var(--color-palette-$(palette));
       &-item {
         &_$(palette) {
-          &:hover {
-            background: var(--color-palette-$(palette));
-          }
+          background: var(--color-palette-$(palette));
         }
       }
     }
@@ -907,8 +930,8 @@ textarea.fill {
         }
       }
     }
-    &_active_$(palette),
-    &_$(palette) {
+    .fill&_active_$(palette),
+    &_active_$(palette) {
       background: var(--color-palette-$(palette));
       &-item {
         &_$(palette) {
@@ -916,6 +939,19 @@ textarea.fill {
         }
       }
     }
+    .fill&_active_hover_$(palette),
+    &_active_hover_$(palette) {
+      &:hover {
+        background: var(--color-palette-$(palette));
+      }
+      &-item {
+        &_$(palette) {
+          &:hover {
+            background: var(--color-palette-$(palette));
+          }
+        }
+      }
+    }
   }
 }
 @each $selector in div, button, input, textarea {
@@ -1184,6 +1220,15 @@ textarea.fill {
     @each $type in accent, primary, secondary, surface, error, warning, success,
       danger, info, disabled {
       @each $color in primary, secondary, tertiary, quaternary {
+        .text&_active_$(type),
+        &_active_$(type) {
+          &-text {
+            &-$(color) {
+              color: var(--color-$(type)-text-$(color));
+            }
+          }
+        }
+        .text&_active_hover_$(type),
         &_active_hover_$(type) {
           &-text {
             &-$(color) {
@@ -1207,7 +1252,6 @@ textarea.fill {
             }
           }
         }
-        &_active_$(type),
         &_$(type) {
           &-text {
             &-$(color) {
@@ -1230,6 +1274,11 @@ textarea.fill {
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
       gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
       alto, athens-gray, sonic-silver {
+      .text&_active_$(palette),
+      &_active_$(palette) {
+        color: var(--color-palette-$(palette));
+      }
+      .text&_active_hover_$(palette),
       &_active_hover_$(palette) {
         &:hover {
           color: var(--color-palette-$(palette));
@@ -1245,7 +1294,6 @@ textarea.fill {
           }
         }
       }
-      &_active_$(palette),
       &_$(palette) {
         color: var(--color-palette-$(palette));
       }

package/dist/css/styles/fill/fill.css

@@ -12,22 +12,26 @@ textarea.fill {
   @each $type in accent, primary, secondary, surface, error, warning, success,
     danger, info, disabled {
     @each $color in primary, secondary, tertiary, quaternary {
-      &_active_hover_$(type) {
+      &_$(type) {
+        &-item {
+          &-$(color) {
+            background: var(--color-$(type)-item-$(color));
+          }
+        }
+        &-$(color) {
+          background: var(--color-$(type)-fill-$(color));
+        }
+      }
+      &_hover_$(type) {
         &-item {
           &-$(color) {
             &:hover {
               background: var(--color-$(type)-item-$(color));
             }
-
             &-hover {
               &:hover {
                 background: var(--color-$(type)-item-$(color)-hover);
               }
-              &-active {
-                &:hover {
-                  background: var(--color-$(type)-item-$(color)-active-hover);
-                }
-              }
             }
           }
         }
@@ -39,16 +43,6 @@ textarea.fill {
             &:hover {
               background: var(--color-$(type)-fill-$(color)-hover);
             }
-            &-active {
-              &:hover {
-                background: var(--color-$(type)-fill-$(color)-active-hover);
-              }
-            }
-          }
-          &-active {
-            &:hover {
-              background: var(--color-$(type)-fill-$(color)-active);
-            }
           }
         }
         &-hover {
@@ -59,16 +53,34 @@ textarea.fill {
           }
         }
       }
-      &_hover_$(type) {
+      .fill&_active_$(type),
+      &_active_$(type) {
+        &-item {
+          &-$(color) {
+            background: var(--color-$(type)-item-$(color));
+          }
+        }
+        &-$(color) {
+          background: var(--color-$(type)-fill-$(color));
+        }
+      }
+      .fill&_active_hover_$(type),
+      &_active_hover_$(type) {
         &-item {
           &-$(color) {
             &:hover {
               background: var(--color-$(type)-item-$(color));
             }
+
             &-hover {
               &:hover {
                 background: var(--color-$(type)-item-$(color)-hover);
               }
+              &-active {
+                &:hover {
+                  background: var(--color-$(type)-item-$(color)-active-hover);
+                }
+              }
             }
           }
         }
@@ -80,6 +92,16 @@ textarea.fill {
             &:hover {
               background: var(--color-$(type)-fill-$(color)-hover);
             }
+            &-active {
+              &:hover {
+                background: var(--color-$(type)-fill-$(color)-active-hover);
+              }
+            }
+          }
+          &-active {
+            &:hover {
+              background: var(--color-$(type)-fill-$(color)-active);
+            }
           }
         }
         &-hover {
@@ -90,17 +112,6 @@ textarea.fill {
           }
         }
       }
-      &_active_$(type),
-      &_$(type) {
-        &-item {
-          &-$(color) {
-            background: var(--color-$(type)-item-$(color));
-          }
-        }
-        &-$(color) {
-          background: var(--color-$(type)-fill-$(color));
-        }
-      }
     }
   }
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
@@ -116,15 +127,11 @@ textarea.fill {
     dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
     stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
     sonic-silver {
-    &_active_hover_$(palette) {
-      &:hover {
-        background: var(--color-palette-$(palette));
-      }
+    &_$(palette) {
+      background: var(--color-palette-$(palette));
       &-item {
         &_$(palette) {
-          &:hover {
-            background: var(--color-palette-$(palette));
-          }
+          background: var(--color-palette-$(palette));
         }
       }
     }
@@ -140,8 +147,8 @@ textarea.fill {
         }
       }
     }
-    &_active_$(palette),
-    &_$(palette) {
+    .fill&_active_$(palette),
+    &_active_$(palette) {
       background: var(--color-palette-$(palette));
       &-item {
         &_$(palette) {
@@ -149,5 +156,18 @@ textarea.fill {
         }
       }
     }
+    .fill&_active_hover_$(palette),
+    &_active_hover_$(palette) {
+      &:hover {
+        background: var(--color-palette-$(palette));
+      }
+      &-item {
+        &_$(palette) {
+          &:hover {
+            background: var(--color-palette-$(palette));
+          }
+        }
+      }
+    }
   }
 }

package/dist/css/styles/text-color/text-color.css

@@ -9,6 +9,15 @@
     @each $type in accent, primary, secondary, surface, error, warning, success,
       danger, info, disabled {
       @each $color in primary, secondary, tertiary, quaternary {
+        .text&_active_$(type),
+        &_active_$(type) {
+          &-text {
+            &-$(color) {
+              color: var(--color-$(type)-text-$(color));
+            }
+          }
+        }
+        .text&_active_hover_$(type),
         &_active_hover_$(type) {
           &-text {
             &-$(color) {
@@ -32,7 +41,6 @@
             }
           }
         }
-        &_active_$(type),
         &_$(type) {
           &-text {
             &-$(color) {
@@ -55,6 +63,11 @@
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
       gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
       alto, athens-gray, sonic-silver {
+      .text&_active_$(palette),
+      &_active_$(palette) {
+        color: var(--color-palette-$(palette));
+      }
+      .text&_active_hover_$(palette),
       &_active_hover_$(palette) {
         &:hover {
           color: var(--color-palette-$(palette));
@@ -70,7 +83,6 @@
           }
         }
       }
-      &_active_$(palette),
       &_$(palette) {
         color: var(--color-palette-$(palette));
       }

package/dist/types/components/Choice/appearance/choiceDefault.d.ts

@@ -1,12 +1,30 @@
 declare const choiceAppearanceDefault: {
+    defaultMutedPrimary: {
+        fill: string;
+        fillItem: string;
+        fillItemActive: string;
+        fillItemActiveHover: string;
+        fillItemHover: string;
+        labelTextColor: string;
+        labelTextColorActive: string;
+        labelTextColorActiveHover: string;
+        borderColor: string;
+        iconAfterFill: string;
+        iconAfterFillActive: string;
+        iconBeforeFill: string;
+        iconBeforeFillActive: string;
+        iconFill: string;
+        iconFillActive: string;
+    };
     defaultPrimary: {
         fill: string;
         fillItem: string;
         fillItemActive: string;
         fillItemActiveHover: string;
         fillItemHover: string;
-        labelTextActiveColor: string;
         labelTextColor: string;
+        labelTextColorActive: string;
+        labelTextColorActiveHover: string;
         borderColor: string;
         iconAfterFill: string;
         iconAfterFillActive: string;

package/dist/types/components/Choice/appearance/choiceStyle.d.ts

@@ -4,14 +4,10 @@ declare const choiceAppearanceStyle: {
     };
     outlined: {
         fill: string;
-        fillItem: string;
-        fillItemActive: string;
     };
     full: {};
     ghost: {
         fill: string;
-        fillItem: string;
-        fillItemActive: string;
         borderColor: string;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.135",
+  "version": "1.8.137",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",