@itcase/ui 1.8.60 → 1.8.61

package/dist/{Avatar_cjs_-cKfA1OW.js → Avatar_cjs_B-x-GK60.js}

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var Icon = require('./Icon_cjs_O7ILYzgW.js');
-var Image = require('./Image_cjs_2zEjohYE.js');
+var Image = require('./Image_cjs_B6YlGx8G.js');
 var Text = require('./Text_cjs_C-Ux7Tz5.js');
 var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
 

package/dist/{Avatar_es_CSKFNChm.js → Avatar_es_Dq-ngVWR.js}

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { I as Icon, B as Badge } from './Icon_es_BGR9vYtq.js';
-import { I as Image } from './Image_es_ChF-63wh.js';
+import { I as Image } from './Image_es_BvYo_cHH.js';
 import { T as Text } from './Text_es_BdFAdf7M.js';
 import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
 

package/dist/{Button_cjs_DnkftkHE.js → Button_cjs_mbF1YhaZ.js}

@@ -376,7 +376,7 @@ var buttonAppearanceSurface = {
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
+        fillHover: 'surfaceSecondary',
         labelTextColor: 'surfaceTextPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
@@ -385,7 +385,7 @@ var buttonAppearanceSurface = {
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
+        fillHover: 'surfaceSecondary',
         labelTextColor: 'surfaceTextPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',

package/dist/{Button_es_kqE4jwUz.js → Button_es_B2N3GsgJ.js}

@@ -374,7 +374,7 @@ var buttonAppearanceSurface = {
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
+        fillHover: 'surfaceSecondary',
         labelTextColor: 'surfaceTextPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
@@ -383,7 +383,7 @@ var buttonAppearanceSurface = {
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
+        fillHover: 'surfaceSecondary',
         labelTextColor: 'surfaceTextPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',

package/dist/{ChipsGroup_cjs_CymyJ6SH.js → ChipsGroup_cjs_BroKrFnn.js}

@@ -127,6 +127,31 @@ var chipsAppearanceSecondary = {
     },
 };
 
+var chipsAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+};
+
 var chipsAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
@@ -229,9 +254,17 @@ var chipsAppearanceSurface = {
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentSecondary',
         fillHover: 'surfaceHover',
+        labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
+        labelTextHoverColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderSecondary',
+        iconAfterFillActiveIcon: 'accentItemPrimary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillActiveIcon: 'accentItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
@@ -258,7 +291,7 @@ var chipsAppearanceWarning = {
     },
 };
 
-var chipsAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, chipsAppearanceSize), chipsAppearanceStyle), chipsAppearanceAccent), chipsAppearanceDanger), chipsAppearanceError), chipsAppearanceInfo), chipsAppearanceDisabled), chipsAppearancePrimary), chipsAppearanceSecondary), chipsAppearanceSuccess), chipsAppearanceSurface), chipsAppearanceWarning);
+var chipsAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, chipsAppearanceSize), chipsAppearanceStyle), chipsAppearanceAccent), chipsAppearanceDanger), chipsAppearanceError), chipsAppearanceInfo), chipsAppearanceDisabled), chipsAppearancePrimary), chipsAppearanceSecondary), chipsAppearanceSuccess), chipsAppearanceSurface), chipsAppearanceWarning), chipsAppearanceShape);
 
 var chipsConfig = {
     appearance: chipsAppearance,
@@ -267,16 +300,16 @@ var chipsConfig = {
     },
 };
 function Chips(props) {
-    var className = props.className, appearance = props.appearance, _a = props.label, label = _a === void 0 ? '' : _a, isDisabled = props.isDisabled, dataTestId = props.dataTestId, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, isActive = props.isActive, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
+    var className = props.className, appearance = props.appearance, _a = props.label, label = _a === void 0 ? '' : _a, isDisabled = props.isDisabled, dataTestId = props.dataTestId, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, isActive = props.isActive, isSkeleton = props.isSkeleton, onClick = props.onClick, onClickIconAfter = props.onClickIconAfter, onClickIconBefore = props.onClickIconBefore, children = props.children;
     var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, chipsConfig, isDisabled);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, cursorClass = propsGenerator.cursorClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActiveIcon = propsGenerator.iconAfterFillActiveIcon, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActiveIcon = propsGenerator.iconBeforeFillActiveIcon, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
+    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, cursorClass = propsGenerator.cursorClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActiveIcon = propsGenerator.iconAfterFillActiveIcon, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActiveIcon = propsGenerator.iconBeforeFillActiveIcon, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
     var chipsStyles = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsx("div", { className: clsx(className, 'chips', !isActive
             ? fillClass && "fill_".concat(fillClass)
             : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isActive && 'chips_state_active', isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer', isSkeleton && "chips_skeleton"), "data-testid": dataTestId && "".concat(dataTestId, "Chips"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, isActive: isActive })), typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, isActive: isActive })), badgeValue && (jsxRuntime.jsx(Icon.Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
+            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isActive && 'chips_state_active', isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer', isSkeleton && "chips_skeleton"), "data-testid": dataTestId && "".concat(dataTestId, "Chips"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, isActive: isActive, onClick: onClickIconAfter })), badgeValue && (jsxRuntime.jsx(Icon.Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
 }
 
 function ChipsGroup(props) {

package/dist/{ChipsGroup_es_BVXA2F8b.js → ChipsGroup_es_CCN4Bfnp.js}

@@ -125,6 +125,31 @@ var chipsAppearanceSecondary = {
     },
 };
 
+var chipsAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+};
+
 var chipsAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
@@ -227,9 +252,17 @@ var chipsAppearanceSurface = {
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentSecondary',
         fillHover: 'surfaceHover',
+        labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
+        labelTextHoverColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderSecondary',
+        iconAfterFillActiveIcon: 'accentItemPrimary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillActiveIcon: 'accentItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
@@ -256,7 +289,7 @@ var chipsAppearanceWarning = {
     },
 };
 
-var chipsAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, chipsAppearanceSize), chipsAppearanceStyle), chipsAppearanceAccent), chipsAppearanceDanger), chipsAppearanceError), chipsAppearanceInfo), chipsAppearanceDisabled), chipsAppearancePrimary), chipsAppearanceSecondary), chipsAppearanceSuccess), chipsAppearanceSurface), chipsAppearanceWarning);
+var chipsAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, chipsAppearanceSize), chipsAppearanceStyle), chipsAppearanceAccent), chipsAppearanceDanger), chipsAppearanceError), chipsAppearanceInfo), chipsAppearanceDisabled), chipsAppearancePrimary), chipsAppearanceSecondary), chipsAppearanceSuccess), chipsAppearanceSurface), chipsAppearanceWarning), chipsAppearanceShape);
 
 var chipsConfig = {
     appearance: chipsAppearance,
@@ -265,16 +298,16 @@ var chipsConfig = {
     },
 };
 function Chips(props) {
-    var className = props.className, appearance = props.appearance, _a = props.label, label = _a === void 0 ? '' : _a, isDisabled = props.isDisabled, dataTestId = props.dataTestId, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, isActive = props.isActive, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
+    var className = props.className, appearance = props.appearance, _a = props.label, label = _a === void 0 ? '' : _a, isDisabled = props.isDisabled, dataTestId = props.dataTestId, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, isActive = props.isActive, isSkeleton = props.isSkeleton, onClick = props.onClick, onClickIconAfter = props.onClickIconAfter, onClickIconBefore = props.onClickIconBefore, children = props.children;
     var appearanceConfig = useAppearanceConfig(appearance, chipsConfig, isDisabled);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, cursorClass = propsGenerator.cursorClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActiveIcon = propsGenerator.iconAfterFillActiveIcon, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActiveIcon = propsGenerator.iconBeforeFillActiveIcon, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
+    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, cursorClass = propsGenerator.cursorClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActiveIcon = propsGenerator.iconAfterFillActiveIcon, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActiveIcon = propsGenerator.iconBeforeFillActiveIcon, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
     var chipsStyles = useStyles(props).styles;
     return (jsx("div", { className: clsx(className, 'chips', !isActive
             ? fillClass && "fill_".concat(fillClass)
             : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isActive && 'chips_state_active', isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer', isSkeleton && "chips_skeleton"), "data-testid": dataTestId && "".concat(dataTestId, "Chips"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, isActive: isActive })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, isActive: isActive })), badgeValue && (jsx(Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
+            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isActive && 'chips_state_active', isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer', isSkeleton && "chips_skeleton"), "data-testid": dataTestId && "".concat(dataTestId, "Chips"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, isActive: isActive, onClick: onClickIconAfter })), badgeValue && (jsx(Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
 }
 
 function ChipsGroup(props) {

package/dist/{DatePicker_cjs_DuPePxS9.js → DatePicker_cjs_CMgWyAQ0.js}

@@ -9,7 +9,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_DnkftkHE.js');
+var Button = require('./Button_cjs_mbF1YhaZ.js');
 var Icon = require('./Icon_cjs_O7ILYzgW.js');
 var Input = require('./Input_cjs_BGLd0EQu.js');
 var Label = require('./Label_cjs_eQIgvtt7.js');

package/dist/{DatePicker_es_B84xipuO.js → DatePicker_es_CLJs86S9.js}

@@ -7,7 +7,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_kqE4jwUz.js';
+import { B as Button } from './Button_es_B2N3GsgJ.js';
 import { I as Icon } from './Icon_es_BGR9vYtq.js';
 import { I as Input } from './Input_es_D2mNCqiH.js';
 import { L as Label } from './Label_es_BQDu9dwH.js';

package/dist/{Image_cjs_2zEjohYE.js → Image_cjs_B6YlGx8G.js}

@@ -10,7 +10,7 @@ var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var Image = urlWithAssetPrefix.urlWithAssetPrefix(function Image(props) {
     var className = props.className, type = props.type, src = props.src, title = props.title, alt = props.alt, caption = props.caption, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, placeholderUrl = props.placeholderUrl, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, onError = props.onError, children = props.children;
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, borderWidthClass = propsGenerator.borderWidthClass, borderTypeClass = propsGenerator.borderTypeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
     var _a = useStyles.useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
     var onErrorImage = React.useCallback(function (event) {
         if (onError) {
@@ -21,7 +21,7 @@ var Image = urlWithAssetPrefix.urlWithAssetPrefix(function Image(props) {
         }
     }, [onError, placeholderUrl]);
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass &&
-            "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), isSkeleton && 'image_skeleton'), style: styles, onClick: onClick, children: [before, jsxRuntime.jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsxRuntime.jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass &&
+            "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), isSkeleton && 'image_skeleton'), style: styles, onClick: onClick, children: [before, jsxRuntime.jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsxRuntime.jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), borderColorImageClass &&
                             "border-color-image_".concat(borderColorImageClass)), src: src, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
 });
 

package/dist/{Image_es_ChF-63wh.js → Image_es_BvYo_cHH.js}

@@ -8,7 +8,7 @@ import { useStyles } from './hooks/useStyles/useStyles.js';
 var Image = urlWithAssetPrefix(function Image(props) {
     var className = props.className, type = props.type, src = props.src, title = props.title, alt = props.alt, caption = props.caption, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, placeholderUrl = props.placeholderUrl, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, onError = props.onError, children = props.children;
     var propsGenerator = useDevicePropsGenerator(props);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, borderWidthClass = propsGenerator.borderWidthClass, borderTypeClass = propsGenerator.borderTypeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
     var _a = useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
     var onErrorImage = useCallback(function (event) {
         if (onError) {
@@ -19,7 +19,7 @@ var Image = urlWithAssetPrefix(function Image(props) {
         }
     }, [onError, placeholderUrl]);
     return (jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass &&
-            "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), isSkeleton && 'image_skeleton'), style: styles, onClick: onClick, children: [before, jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass &&
+            "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), isSkeleton && 'image_skeleton'), style: styles, onClick: onClick, children: [before, jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), borderColorImageClass &&
                             "border-color-image_".concat(borderColorImageClass)), src: src, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
 });
 

package/dist/cjs/components/Avatar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Avatar = require('../../Avatar_cjs_-cKfA1OW.js');
+var Avatar = require('../../Avatar_cjs_B-x-GK60.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -26,7 +26,7 @@ require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('../../Link_cjs_BqT6eVl6.js');
 require('../../Text_cjs_C-Ux7Tz5.js');
-require('../../Image_cjs_2zEjohYE.js');
+require('../../Image_cjs_B6YlGx8G.js');
 
 
 

package/dist/cjs/components/AvatarStack.js

@@ -5,7 +5,7 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Avatar = require('../../Avatar_cjs_-cKfA1OW.js');
+var Avatar = require('../../Avatar_cjs_B-x-GK60.js');
 var Group = require('../../Group_cjs_DHNBxjH3.js');
 var Text = require('../../Text_cjs_C-Ux7Tz5.js');
 var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
@@ -27,7 +27,7 @@ require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_BqT6eVl6.js');
-require('../../Image_cjs_2zEjohYE.js');
+require('../../Image_cjs_B6YlGx8G.js');
 
 var avatarStackAppearanceSize = {
     size16: {

package/dist/cjs/components/Button.js

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

package/dist/cjs/components/Cell.js

@@ -104,7 +104,10 @@ var cellAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
+        titleTextSize: 'surfaceTextPrimary',
         titleIconItemFill: 'surfaceItemPrimary',
+        valueTextColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
         titleLabelAppearance: 'accentPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
@@ -114,7 +117,10 @@ var cellAppearanceSurface = {
     surfaceSecondary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceSecondaryHover',
+        titleTextSize: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
         titleIconItemFill: 'surfaceItemPrimary',
+        valueTextColor: 'surfaceTextPrimary',
         titleLabelAppearance: 'accentPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
@@ -124,7 +130,10 @@ var cellAppearanceSurface = {
     surfaceTertiary: {
         fill: 'surfaceTertiary',
         fillHover: 'surfaceTertiaryHover',
+        titleTextSize: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
         titleIconItemFill: 'surfaceItemPrimary',
+        valueTextColor: 'surfaceTextPrimary',
         titleLabelAppearance: 'accentPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
@@ -132,7 +141,10 @@ var cellAppearanceSurface = {
         valueLabelAppearance: 'accentPrimary',
     },
     surfaceQuaternary: {
+        titleTextSize: 'surfaceTextPrimary',
         fill: 'surfaceQuaternary',
+        valueTextColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
         fillHover: 'surfaceQuaternaryHover',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',

package/dist/cjs/components/Chips.js

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

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_DnkftkHE.js');
+var Button = require('../../Button_cjs_mbF1YhaZ.js');
 var Text = require('../../Text_cjs_C-Ux7Tz5.js');
 var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('lodash/camelCase');

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_DuPePxS9.js');
+var DatePicker = require('../../DatePicker_cjs_CMgWyAQ0.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var ChipsGroup = require('../../ChipsGroup_cjs_CymyJ6SH.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_BroKrFnn.js');
 var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('date-fns/locale');
 require('react-datepicker');
@@ -22,7 +22,7 @@ require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Button_cjs_DnkftkHE.js');
+require('../../Button_cjs_mbF1YhaZ.js');
 require('../../Icon_cjs_O7ILYzgW.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_DuPePxS9.js');
+var DatePicker = require('../../DatePicker_cjs_CMgWyAQ0.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
@@ -22,7 +22,7 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Button_cjs_DnkftkHE.js');
+require('../../Button_cjs_mbF1YhaZ.js');
 require('../../Icon_cjs_O7ILYzgW.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');

package/dist/cjs/components/Image.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Image = require('../../Image_cjs_2zEjohYE.js');
+var Image = require('../../Image_cjs_B6YlGx8G.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

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_DnkftkHE.js');
+var Button = require('../../Button_cjs_mbF1YhaZ.js');
 var Group = require('../../Group_cjs_DHNBxjH3.js');
 var Text = require('../../Text_cjs_C-Ux7Tz5.js');
 require('@itcase/common');

package/dist/components/Avatar.js

@@ -1,4 +1,4 @@
-export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_CSKFNChm.js';
+export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_Dq-ngVWR.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -24,4 +24,4 @@ import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Link_es_BnUIX0QT.js';
 import '../Text_es_BdFAdf7M.js';
-import '../Image_es_ChF-63wh.js';
+import '../Image_es_BvYo_cHH.js';

package/dist/components/AvatarStack.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { A as Avatar } from '../Avatar_es_CSKFNChm.js';
+import { A as Avatar } from '../Avatar_es_Dq-ngVWR.js';
 import { G as Group } from '../Group_es_B2yGEJfj.js';
 import { T as Text } from '../Text_es_BdFAdf7M.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
@@ -25,7 +25,7 @@ import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../Link_es_BnUIX0QT.js';
-import '../Image_es_ChF-63wh.js';
+import '../Image_es_BvYo_cHH.js';
 
 var avatarStackAppearanceSize = {
     size16: {

package/dist/components/Button.js

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

package/dist/components/Cell.js

@@ -102,7 +102,10 @@ var cellAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
+        titleTextSize: 'surfaceTextPrimary',
         titleIconItemFill: 'surfaceItemPrimary',
+        valueTextColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
         titleLabelAppearance: 'accentPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
@@ -112,7 +115,10 @@ var cellAppearanceSurface = {
     surfaceSecondary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceSecondaryHover',
+        titleTextSize: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
         titleIconItemFill: 'surfaceItemPrimary',
+        valueTextColor: 'surfaceTextPrimary',
         titleLabelAppearance: 'accentPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
@@ -122,7 +128,10 @@ var cellAppearanceSurface = {
     surfaceTertiary: {
         fill: 'surfaceTertiary',
         fillHover: 'surfaceTertiaryHover',
+        titleTextSize: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
         titleIconItemFill: 'surfaceItemPrimary',
+        valueTextColor: 'surfaceTextPrimary',
         titleLabelAppearance: 'accentPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
@@ -130,7 +139,10 @@ var cellAppearanceSurface = {
         valueLabelAppearance: 'accentPrimary',
     },
     surfaceQuaternary: {
+        titleTextSize: 'surfaceTextPrimary',
         fill: 'surfaceQuaternary',
+        valueTextColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
         fillHover: 'surfaceQuaternaryHover',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',

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_BVXA2F8b.js';
+export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_CCN4Bfnp.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';

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_kqE4jwUz.js';
+import { B as Button } from '../Button_es_B2N3GsgJ.js';
 import { T as Text } from '../Text_es_BdFAdf7M.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'lodash/camelCase';

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_B84xipuO.js';
+import { D as DatePickerInput } from '../DatePicker_es_CLJs86S9.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_BVXA2F8b.js';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_CCN4Bfnp.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'date-fns/locale';
 import 'react-datepicker';
@@ -20,7 +20,7 @@ import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Button_es_kqE4jwUz.js';
+import '../Button_es_B2N3GsgJ.js';
 import '../Icon_es_BGR9vYtq.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_B84xipuO.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_CLJs86S9.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -20,7 +20,7 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Button_es_kqE4jwUz.js';
+import '../Button_es_B2N3GsgJ.js';
 import '../Icon_es_BGR9vYtq.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';

package/dist/components/Image.js

@@ -1,4 +1,4 @@
-export { I as Image } from '../Image_es_ChF-63wh.js';
+export { I as Image } from '../Image_es_BvYo_cHH.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

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_kqE4jwUz.js';
+import { B as Button } from '../Button_es_B2N3GsgJ.js';
 import { G as Group } from '../Group_es_B2yGEJfj.js';
 import { T as Text } from '../Text_es_BdFAdf7M.js';
 import '@itcase/common';

package/dist/css/components/Chips/Chips.css

@@ -5,7 +5,6 @@
     align-items: center;
   }
 }
-
 .chips {
   @each $size in xxl, xl, l, m, s, xs, xxs {
     &_size_$(size) {
@@ -18,23 +17,6 @@
     }
   }
 }
-
-.chips {
-  &_shape {
-    &_rounded {
-      border-radius: var(--chips-shape-rounded-default);
-      @each $size in xxl, xl, l, m, s, xs, xxs {
-        &^^&_size_$(size) {
-          border-radius: var(--chips-$(size)-shape-rounded);
-        }
-      }
-    }
-    &_circular {
-      border-radius: 20px;
-    }
-  }
-}
-
 .chips {
   &&_skeleton {
     background-size: 200% !important;
@@ -51,7 +33,6 @@
     }
   }
 }
-
 @keyframes chipsSkeleton {
   0% {
     background-position: 200%;
@@ -60,7 +41,6 @@
     background-position: -200%;
   }
 }
-
 :root {
   /* Default */
   --chips-shape-rounded-default: 8px;

package/dist/css/components/ScrollOnDrag/ScrollOnDrag.css

@@ -12,17 +12,16 @@
         scroll-behavior: auto;
       }
       &--hide-scrollbars {
-        /* overflow: hidden;
         overflow: -moz-scrollbars-none;
         -ms-overflow-style: none;
-        scrollbar-width: none; */
-        /* &::-webkit-scrollbar {
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
           width: 0 !important;
           height: 0 !important;
           background: transparent !important;
           display: none !important;
           appearance: none !important;
-        } */
+        }
       }
       &--native-scroll {
         overflow: auto;

package/dist/css/components/Select/Select.css

@@ -1,6 +1,6 @@
 .select {
   width: 100%;
-  min-width: 240px;
+  min-width: 100%;
   position: relative;
 }
 

package/dist/types/components/Cell/appearance/cellSurface.d.ts

@@ -2,7 +2,10 @@ declare const cellAppearanceSurface: {
     surfacePrimary: {
         fill: string;
         fillHover: string;
+        titleTextSize: string;
         titleIconItemFill: string;
+        valueTextColor: string;
+        titleTextColor: string;
         titleLabelAppearance: string;
         labelTextColor: string;
         borderColor: string;
@@ -12,7 +15,10 @@ declare const cellAppearanceSurface: {
     surfaceSecondary: {
         fill: string;
         fillHover: string;
+        titleTextSize: string;
+        titleTextColor: string;
         titleIconItemFill: string;
+        valueTextColor: string;
         titleLabelAppearance: string;
         labelTextColor: string;
         borderColor: string;
@@ -22,7 +28,10 @@ declare const cellAppearanceSurface: {
     surfaceTertiary: {
         fill: string;
         fillHover: string;
+        titleTextSize: string;
+        titleTextColor: string;
         titleIconItemFill: string;
+        valueTextColor: string;
         titleLabelAppearance: string;
         labelTextColor: string;
         borderColor: string;
@@ -30,7 +39,10 @@ declare const cellAppearanceSurface: {
         valueLabelAppearance: string;
     };
     surfaceQuaternary: {
+        titleTextSize: string;
         fill: string;
+        valueTextColor: string;
+        titleTextColor: string;
         fillHover: string;
         titleIconItemFill: string;
         titleLabelAppearance: string;

package/dist/types/components/Chips/appearance/chipsShape.d.ts

@@ -0,0 +1,25 @@
+declare const chipsAppearanceShape: {
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+};
+export { chipsAppearanceShape };

package/dist/types/components/Chips/appearance/chipsSurface.d.ts

@@ -24,9 +24,17 @@ declare const chipsAppearanceSurface: {
     };
     surfaceSecondary: {
         fill: string;
+        fillActive: string;
+        fillActiveHover: string;
         fillHover: string;
+        labelTextActiveColor: string;
         labelTextColor: string;
+        labelTextHoverColor: string;
         borderColor: string;
+        iconAfterFillActiveIcon: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillActiveIcon: string;
+        iconBeforeFillIcon: string;
     };
     surfaceTertiary: {
         fill: string;

package/package.json

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