@itcase/ui 1.8.136 → 1.8.138

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/{ChipsGroup_cjs_Du8WHI-Y.js → ChipsGroup_cjs_BNfzAmhc.js}

@@ -337,7 +337,7 @@ function ChipsGroup(props) {
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_type_horizontal_scroll', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "chips-group__wrapper", style: groupWrapperStyles, children: children
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "chips-group__wrapper", style: groupWrapperStyles, children: children
                 ? children
                 : chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id))) })) : children ? (children) : (chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id)))) }));
 }

package/dist/{ChipsGroup_es_CzVlqaHv.js → ChipsGroup_es_UTiUhYs7.js}

@@ -335,7 +335,7 @@ function ChipsGroup(props) {
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles(props);
-    return (jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_type_horizontal_scroll', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "chips-group__wrapper", style: groupWrapperStyles, children: children
+    return (jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "chips-group__wrapper", style: groupWrapperStyles, children: children
                 ? children
                 : chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id))) })) : children ? (children) : (chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id)))) }));
 }

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/Chips.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ChipsGroup = require('../../ChipsGroup_cjs_Du8WHI-Y.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_BNfzAmhc.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');

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,10 +4,10 @@ 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');
+var ChipsGroup = require('../../ChipsGroup_cjs_BNfzAmhc.js');
 require('date-fns/locale');
 require('react-datepicker');
 require('../hooks/useStyles/useStyles.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/Drawer.js

@@ -96,7 +96,7 @@ function Drawer(props) {
             console.warn('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
         }
     }, [_isOpen, onClose]);
-    return (jsxRuntime.jsxs(ReactDrawer, { dataTour: dataTour, className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, 
+    return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), dataTour: dataTour, direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
         customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
 }

package/dist/cjs/components/Notification.js

@@ -140,20 +140,24 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, dataTestId, dataTour, className, appearance, title, desc, before, after, close, isSkeleton, onClickClose, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, text, before, after, close, 
+    // type,
+    isSkeleton, onClickClose, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, notificationConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, titleTextColor, titleTextSize, descTextColor, descTextSize, elevationClass, sizeClass, widthClass, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
     // @ts-expect-error
     const { styles: notificationStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', elevationClass && `elevation_${elevationClass}`, sizeClass && `notification__item_set_${sizeClass}`, widthClass && `width_${widthClass}`, fillClass && `fill_${fillClass}`, isSkeleton && `notification__item_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: desc })), close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('notification__item-close', 'cursor_type_pointer'), fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) }))] }), after] }));
+    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', elevationClass && `elevation_${elevationClass}`, sizeClass && `notification__item_set_${sizeClass}`, widthClass && `width_${widthClass}`, fillClass && `fill_${fillClass}`, isSkeleton && `notification__item_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('notification__item-close', 'cursor_type_pointer'), fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) }))] }), after] }));
 }
 
 function NotificationWrapper(props) {
     const notifications = Notifications.useNotifications();
     const { hideNotifications } = Notifications.useNotificationsAPI();
     const { className, close } = props;
-    return (jsxRuntime.jsx("div", { className: clsx('notification', className), children: jsxRuntime.jsx("div", { className: "notification__wrapper", children: notifications.map((notification, i) => (jsxRuntime.jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, close: close, onClickClose: hideNotifications }, i))) }) }));
+    return (jsxRuntime.jsx("div", { className: clsx('notification', className), children: jsxRuntime.jsx("div", { className: "notification__wrapper", children: notifications.map((notification, i) => (jsxRuntime.jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, 
+                // type={notification.type}
+                after: notification.after, close: close, onClickClose: hideNotifications }, i))) }) }));
 }
 
 exports.Notification = Notification;

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/cjs/components/Switch.js

@@ -24,9 +24,9 @@ require('lodash/maxBy');
 const switchAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceTertiary',
-        fillActive: 'successTertiary',
+        fillActive: 'successPrimary',
         fillToggle: 'surfaceItemSecondary',
-        fillToggleActive: 'accentItemSecondary',
+        fillToggleActive: 'successItemPrimary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
     },

package/dist/cjs/components/Tab.js

@@ -228,7 +228,7 @@ function TabGroup(props) {
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_type_horizontal_scroll', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsxRuntime.jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxRuntime.jsxs(React.Fragment, { children: [tabList?.map((item) => (jsxRuntime.jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive }, item.key))), children] })) }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsxRuntime.jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxRuntime.jsxs(React.Fragment, { children: [tabList?.map((item) => (jsxRuntime.jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive }, item.key))), children] })) }));
 }
 
 exports.Tab = Tab;

package/dist/cjs/context/Notifications.js

@@ -8,9 +8,9 @@ var common = require('@itcase/common');
 
 const STATUSES = {
     error: 'error',
-    warning: 'warning',
     info: 'info',
     success: 'success',
+    warning: 'warning',
 };
 const NotificationsContext = React.createContext([]);
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -126,6 +126,7 @@ function createNotification(notification, onClose) {
     // let appearance = STATUSES.appearance
     let closeByTime = 4500;
     let appearance = '';
+    let after = null;
     if (typeof notification === 'string') {
         text = notification;
     }
@@ -135,6 +136,7 @@ function createNotification(notification, onClose) {
         text = notification.text ?? text;
         status = notification.status ?? status;
         closeByTime = notification.closeByTime ?? closeByTime;
+        after = notification.after ?? after;
     }
     switch (status) {
         case 'success':
@@ -156,6 +158,7 @@ function createNotification(notification, onClose) {
         title: title,
         status: status,
         text: text,
+        after: after,
         closeByTime: closeByTime,
         onClose: onClose,
     };

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/Chips.js

@@ -1,4 +1,4 @@
-export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_CzVlqaHv.js';
+export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_UTiUhYs7.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';

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,10 +2,10 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_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';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_UTiUhYs7.js';
 import 'date-fns/locale';
 import 'react-datepicker';
 import '../hooks/useStyles/useStyles.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/Drawer.js

@@ -94,7 +94,7 @@ function Drawer(props) {
             console.warn('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
         }
     }, [_isOpen, onClose]);
-    return (jsxs(ReactDrawer, { dataTour: dataTour, className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, 
+    return (jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), dataTour: dataTour, direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
         customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
 }

package/dist/components/Notification.js

@@ -138,20 +138,24 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, dataTestId, dataTour, className, appearance, title, desc, before, after, close, isSkeleton, onClickClose, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, text, before, after, close, 
+    // type,
+    isSkeleton, onClickClose, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, notificationConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, titleTextColor, titleTextSize, descTextColor, descTextSize, elevationClass, sizeClass, widthClass, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
     // @ts-expect-error
     const { styles: notificationStyles } = useStyles(props);
-    return (jsxs("div", { className: clsx('notification__item', elevationClass && `elevation_${elevationClass}`, sizeClass && `notification__item_set_${sizeClass}`, widthClass && `width_${widthClass}`, fillClass && `fill_${fillClass}`, isSkeleton && `notification__item_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: desc })), close && (closeIcon || closeIconSrc) && (jsx(Icon, { className: clsx('notification__item-close', 'cursor_type_pointer'), fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) }))] }), after] }));
+    return (jsxs("div", { className: clsx('notification__item', elevationClass && `elevation_${elevationClass}`, sizeClass && `notification__item_set_${sizeClass}`, widthClass && `width_${widthClass}`, fillClass && `fill_${fillClass}`, isSkeleton && `notification__item_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), close && (closeIcon || closeIconSrc) && (jsx(Icon, { className: clsx('notification__item-close', 'cursor_type_pointer'), fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) }))] }), after] }));
 }
 
 function NotificationWrapper(props) {
     const notifications = useNotifications();
     const { hideNotifications } = useNotificationsAPI();
     const { className, close } = props;
-    return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map((notification, i) => (jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, close: close, onClickClose: hideNotifications }, i))) }) }));
+    return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map((notification, i) => (jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, 
+                // type={notification.type}
+                after: notification.after, close: close, onClickClose: hideNotifications }, i))) }) }));
 }
 
 export { Notification, NotificationWrapper, notificationAppearance, notificationConfig };

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/components/Switch.js

@@ -22,9 +22,9 @@ import 'lodash/maxBy';
 const switchAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceTertiary',
-        fillActive: 'successTertiary',
+        fillActive: 'successPrimary',
         fillToggle: 'surfaceItemSecondary',
-        fillToggleActive: 'accentItemSecondary',
+        fillToggleActive: 'successItemPrimary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
     },

package/dist/components/Tab.js

@@ -226,7 +226,7 @@ function TabGroup(props) {
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles(props);
-    return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_type_horizontal_scroll', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxs(React.Fragment, { children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive }, item.key))), children] })) }));
+    return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxs(React.Fragment, { children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive }, item.key))), children] })) }));
 }
 
 export { Tab, TabGroup, tabAppearance, tabConfig };

package/dist/context/Notifications.js

@@ -6,9 +6,9 @@ import { axiosInstanceITCase } from '@itcase/common';
 
 const STATUSES = {
     error: 'error',
-    warning: 'warning',
     info: 'info',
     success: 'success',
+    warning: 'warning',
 };
 const NotificationsContext = createContext([]);
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -124,6 +124,7 @@ function createNotification(notification, onClose) {
     // let appearance = STATUSES.appearance
     let closeByTime = 4500;
     let appearance = '';
+    let after = null;
     if (typeof notification === 'string') {
         text = notification;
     }
@@ -133,6 +134,7 @@ function createNotification(notification, onClose) {
         text = notification.text ?? text;
         status = notification.status ?? status;
         closeByTime = notification.closeByTime ?? closeByTime;
+        after = notification.after ?? after;
     }
     switch (status) {
         case 'success':
@@ -154,6 +156,7 @@ function createNotification(notification, onClose) {
         title: title,
         status: status,
         text: text,
+        after: after,
         closeByTime: closeByTime,
         onClose: onClose,
     };

package/dist/css/components/Checkbox/Checkbox.css

@@ -207,16 +207,17 @@
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, 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 {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_active_$(palette) {
       & .checkbox__state {
         background: var(--color-palette-$(palette));

package/dist/css/components/Icon/Icon.css

@@ -116,16 +116,17 @@
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, 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 {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_active_hover_$(palette) {
       &:hover {
         & svg {

package/dist/css/components/Radio/Radio.css

@@ -184,16 +184,17 @@
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, 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 {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_active_$(palette) {
       & .radio__state {
         background: var(--color-palette-$(palette));

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

@@ -79,16 +79,17 @@
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
       pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      rose-gold, pink-sand, vintage-rose, grapefruit, light-pink, light-red,
+      cream, almond, mellow-yellow, canary-yellow, pollen, flash-light,
+      lemon-cream, flash, dark-green, green, spearmint, mint, beryl,
+      light-green, light-sky, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       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 {
+      outer-space, graphite-grey, alto, athens-gray, sonic-silver {
       .border&_active_$(palette),
       &_active_$(palette) {
         border-width: 1px;

package/dist/css/styles/bundle.css

@@ -421,16 +421,17 @@ div.alignment {
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
       pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      rose-gold, pink-sand, vintage-rose, grapefruit, light-pink, light-red,
+      cream, almond, mellow-yellow, canary-yellow, pollen, flash-light,
+      lemon-cream, flash, dark-green, green, spearmint, mint, beryl,
+      light-green, light-sky, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       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 {
+      outer-space, graphite-grey, alto, athens-gray, sonic-silver {
       .border&_active_$(palette),
       &_active_$(palette) {
         border-width: 1px;
@@ -900,16 +901,17 @@ textarea.fill {
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, 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 {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_$(palette) {
       background: var(--color-palette-$(palette));
       &-item {
@@ -1264,16 +1266,17 @@ textarea.fill {
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
       pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      rose-gold, pink-sand, vintage-rose, grapefruit, light-pink, light-red,
+      cream, almond, mellow-yellow, canary-yellow, pollen, flash-light,
+      lemon-cream, flash, dark-green, green, spearmint, mint, beryl,
+      light-green, light-sky, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       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 {
+      outer-space, graphite-grey, alto, athens-gray, sonic-silver {
       .text&_active_$(palette),
       &_active_$(palette) {
         color: var(--color-palette-$(palette));
@@ -1392,7 +1395,7 @@ textarea.fill {
 }
 .width {
   &_hug {
-    display: inline-flex;
+    display: inline-flex !important;
   }
   &_fill {
     width: 100%;

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

@@ -117,16 +117,17 @@ textarea.fill {
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, 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 {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_$(palette) {
       background: var(--color-palette-$(palette));
       &-item {

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

@@ -53,16 +53,17 @@
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
       pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      rose-gold, pink-sand, vintage-rose, grapefruit, light-pink, light-red,
+      cream, almond, mellow-yellow, canary-yellow, pollen, flash-light,
+      lemon-cream, flash, dark-green, green, spearmint, mint, beryl,
+      light-green, light-sky, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       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 {
+      outer-space, graphite-grey, alto, athens-gray, sonic-silver {
       .text&_active_$(palette),
       &_active_$(palette) {
         color: var(--color-palette-$(palette));

package/dist/css/styles/width/width.css

@@ -1,6 +1,6 @@
 .width {
   &_hug {
-    display: inline-flex;
+    display: inline-flex !important;
   }
   &_fill {
     width: 100%;

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/dist/types/context/Notifications.d.ts

@@ -7,9 +7,9 @@ declare function useNotificationsAPI(): {
     showNotification: (notification: string | CreatedNotification, onClose?: SimpleCallback) => void;
     notificationStatuses: {
         error: string;
-        warning: string;
         info: string;
         success: string;
+        warning: string;
     };
 };
 export { NotificationsProvider, useNotifications, useNotificationsAPI };

package/dist/types/context/Notifications.interface.d.ts

@@ -1,7 +1,9 @@
+import React from 'react';
 import type { Id } from '@itcase/common';
 interface Notification {
     id: Id;
     _closeTimeout?: ReturnType<typeof setTimeout>;
+    after: React.ReactNode;
     closeByTime: number | false;
     status: 'error' | 'info' | 'success' | 'warning';
     text: string;
@@ -11,6 +13,7 @@ interface Notification {
 }
 interface CreatedNotification {
     id?: Notification['id'];
+    after?: Notification['after'];
     closeByTime?: Notification['closeByTime'];
     status?: Notification['status'];
     text?: Notification['text'];
@@ -27,4 +30,4 @@ interface NotificationsProviderProps {
      */
     isLogRequestsErrors: boolean;
 }
-export type { Notification, CreatedNotification, NotificationsProviderProps };
+export type { CreatedNotification, Notification, NotificationsProviderProps };

package/package.json

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