@itcase/ui 1.9.23 → 1.9.25

package/dist/cjs/components/Cell.js

@@ -103,50 +103,46 @@ const cellAppearanceStyle = {
 const cellAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
+        fillHover: 'surfaceHoverPrimary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         valueIconItemFill: 'surfaceItemPrimary',
         valueLabelAppearance: 'accentPrimary',
         valueTextColor: 'surfaceTextPrimary',
     },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         valueIconItemFill: 'surfaceItemPrimary',
         valueLabelAppearance: 'accentPrimary',
         valueTextColor: 'surfaceTextPrimary',
     },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         valueIconItemFill: 'surfaceItemPrimary',
         valueLabelAppearance: 'accentPrimary',
         valueTextColor: 'surfaceTextPrimary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceQuaternaryHover',
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         valueIconItemFill: 'surfaceItemPrimary',
@@ -168,7 +164,7 @@ const cellConfig = {
     },
 };
 function Cell(props) {
-    const { className, appearance, title, titleIcon, titleLabel, titleTag, showTitleLabel, showValueLabel, value, valueIcon, valueTag, before, after, isActive, isEqual, isSameWidth, onClick, onMouseEnter, } = props;
+    const { appearance, className, title, titleIcon, titleLabel, titleTag, showTitleLabel, showValueLabel, value, valueIcon, valueTag, before, after, isActive, isEqual, isSameWidth, onClick, onMouseEnter, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, cellConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, titleIconFill, titleIconFillHover, titleIconFillSize, titleIconItemFill, titleIconShape, titleIconSrc, titleLabelAppearance, titleLabelAppearanceSize, titleLabelShape, titleLabelSize, titleLabelTextSize, titleTextColor, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWrap, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, reverseClass, shapeClass, sizeClass, valueIconFill, valueIconFillHover, valueIconFillSize, valueIconItemFill, valueIconShape, valueIconSrc, valueLabel, valueLabelAppearance, valueLabelAppearanceSize, valueLabelShape, valueLabelSize, valueLabelTextSize, valueTextAlign, valueTextColor, valueTextSize, valueTextTruncate, valueTextWeight, valueTextWrap, widthClass, zeroGap, zeroPadding, } = propsGenerator;
@@ -185,7 +181,7 @@ function Cell(props) {
             ? borderColorHoverClass &&
                 `border-color_hover_${borderColorHoverClass}`
             : borderColorActiveHoverClass &&
-                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsxRuntime.jsx(Label.Label, { className: "cell__title-label", appearance: `${titleLabelAppearance} ${titleLabelAppearanceSize}`, size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsxRuntime.jsx(Label.Label, { className: "cell__value-label", appearance: `${valueLabelAppearance} ${valueLabelAppearanceSize}`, size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
+                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsxRuntime.jsx(Label.Label, { appearance: `${titleLabelAppearance} ${titleLabelAppearanceSize}`, className: "cell__title-label", size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsxRuntime.jsx(Label.Label, { appearance: `${valueLabelAppearance} ${valueLabelAppearanceSize}`, className: "cell__value-label", size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
 }
 
 exports.Cell = Cell;

package/dist/cjs/components/Chips.js

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

package/dist/cjs/components/Code.js

@@ -48,7 +48,7 @@ const codeAppearanceError = {
         inputBorderColorHover: 'errorBorderSecondary',
         inputCaretColor: 'surfaceItemPrimary',
         inputFill: 'errorTertiary',
-        inputFillHover: 'errorTertiary',
+        inputFillHover: 'errorHoverTertiary',
         inputPlaceholderTextColor: 'surfaceTextQuaternary',
         inputTextColor: 'surfaceTextPrimary',
     },
@@ -73,21 +73,21 @@ const codeAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-    roundedM: {
+    roundedXL: {
         shape: 'rounded',
-        shapeStrength: '1m',
+        shapeStrength: '2m',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
     },
-    roundedXL: {
+    roundedM: {
         shape: 'rounded',
-        shapeStrength: '2m',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -105,19 +105,19 @@ const codeAppearanceSize = {
 };
 
 const codeAppearanceStyle = {
-    full: {
-        inputBorderColor: 'none',
-    },
-    ghost: {
+    solid: {
         inputBorderColor: 'none',
-        inputFill: 'none',
     },
     outlined: {
         inputFill: 'none',
     },
-    solid: {
+    full: {
         inputBorderColor: 'none',
     },
+    ghost: {
+        inputBorderColor: 'none',
+        inputFill: 'none',
+    },
 };
 
 const codeAppearanceSuccess = {
@@ -126,7 +126,7 @@ const codeAppearanceSuccess = {
         inputBorderColorHover: 'successBorderSecondary',
         inputCaretColor: 'surfaceItemPrimary',
         inputFill: 'successTertiary',
-        inputFillHover: 'successTertiary',
+        inputFillHover: 'successHoverTertiary',
         inputPlaceholderTextColor: 'surfaceTextQuaternary',
         inputTextColor: 'surfaceTextPrimary',
     },
@@ -150,7 +150,7 @@ const codeConfig = {
     },
 };
 function Code(props) {
-    const { className, appearance, initialValue = '', isDisabled, inputAutoFocus, inputCount = 6, inputPlaceholder, inputType = 'number', separatorComponent, before, after, isSkeleton, onBlur, onChange, onFocus, } = props;
+    const { appearance, className, initialValue = '', inputAutoFocus, inputCount = 6, inputPlaceholder, inputType = 'number', separatorComponent, before, after, isDisabled, isSkeleton, onBlur, onChange, onFocus, } = props;
     const [otp, setOtp] = React.useState(initialValue);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, codeConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);

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_BRShPZw4.js');
+var Button = require('../../Button_cjs_DPs7uj_n.js');
 var Text = require('../../Text_cjs_DG2eMKBi.js');
 require('lodash/camelCase');
 require('lodash/castArray');

package/dist/cjs/components/DatePeriod.js

@@ -7,17 +7,17 @@ var luxon = require('luxon');
 var common = require('@itcase/common');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var ChipsGroup = require('../../ChipsGroup_cjs_D0bGehZY.js');
-var DatePicker = require('../../DatePicker_cjs_Cm50AX0J.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_Sn3uiCSJ.js');
+var DatePicker = require('../../DatePicker_cjs_Bfiav-tb.js');
 require('react-select');
 require('../../Icon_cjs_BgGtdviU.js');
-var SelectContainer = require('../../SelectContainer_cjs_tjM35jHG.js');
+var SelectContainer = require('../../SelectContainer_cjs_CdLyIuwj.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../context/Notifications.js');
 require('../context/UIContext.js');
-require('../../Group_cjs_CFzdSMKV.js');
+require('../../Group_cjs_DNI9PTBq.js');
 require('lodash/castArray');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
@@ -29,7 +29,7 @@ require('../hooks/useStyles/useStyles.js');
 require('../../Text_cjs_DG2eMKBi.js');
 require('date-fns/locale');
 require('react-datepicker');
-require('../../Button_cjs_BRShPZw4.js');
+require('../../Button_cjs_DPs7uj_n.js');
 require('../../Link_cjs_qKXVfU8e.js');
 require('../../Loader_cjs_DWBtnjaL.js');
 require('../../Input_cjs_KgFCCi2U.js');

package/dist/cjs/components/DatePicker.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('../../DatePicker_cjs_Cm50AX0J.js');
+var DatePicker = require('../../DatePicker_cjs_Bfiav-tb.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_BRShPZw4.js');
+require('../../Button_cjs_DPs7uj_n.js');
 require('../../Icon_cjs_BgGtdviU.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');

package/dist/cjs/components/Group.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Group = require('../../Group_cjs_CFzdSMKV.js');
+var Group = require('../../Group_cjs_DNI9PTBq.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/Notification.js

@@ -6,7 +6,7 @@ var Loader = require('../../Loader_cjs_DWBtnjaL.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_BRShPZw4.js');
+var Button = require('../../Button_cjs_DPs7uj_n.js');
 var Icon = require('../../Icon_cjs_BgGtdviU.js');
 var Text = require('../../Text_cjs_DG2eMKBi.js');
 var _default = require('@itcase/icons/default');

package/dist/cjs/components/Response.js

@@ -8,8 +8,8 @@ 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_BRShPZw4.js');
-var Group = require('../../Group_cjs_CFzdSMKV.js');
+var Button = require('../../Button_cjs_DPs7uj_n.js');
+var Group = require('../../Group_cjs_DNI9PTBq.js');
 var Text = require('../../Text_cjs_DG2eMKBi.js');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');

package/dist/cjs/components/Select.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var SelectContainer = require('../../SelectContainer_cjs_tjM35jHG.js');
+var SelectContainer = require('../../SelectContainer_cjs_CdLyIuwj.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -20,7 +20,7 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Group_cjs_CFzdSMKV.js');
+require('../../Group_cjs_DNI9PTBq.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../../Text_cjs_DG2eMKBi.js');

package/dist/cjs/components/Swiper.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var react = require('swiper/react');
-var Group = require('../../Group_cjs_CFzdSMKV.js');
+var Group = require('../../Group_cjs_DNI9PTBq.js');
 var Text = require('../../Text_cjs_DG2eMKBi.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');

package/dist/cjs/components/Textarea.js

@@ -24,32 +24,28 @@ const textareaAppearanceDefault = {
         fillHover: 'surfaceTertiary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
-    defaultSecondary: {
+    defaultQuaternary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfaceTertiary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
-    defaultTertiary: {
+    defaultSecondary: {
         fill: 'surfacePrimary',
+        fillHover: 'surfaceTertiary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
-    defaultQuaternary: {
+    defaultTertiary: {
         fill: 'surfacePrimary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
@@ -61,7 +57,6 @@ const textareaAppearanceDisabled = {
         borderColor: 'errorBorderQuaternary',
         borderColorHover: 'errorBorderQuaternary',
         textColor: 'surfaceTextQuaternary',
-        iconBeforeFill: 'errorItemQuaternary',
         iconClearFill: 'errorItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
@@ -69,7 +64,6 @@ const textareaAppearanceDisabled = {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextSecondary',
     },
@@ -79,17 +73,15 @@ const textareaAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         borderColor: 'errorBorderQuaternary',
-        borderColorHover: 'errorBorderQuaternary',
+        borderColorHover: 'errorBorderHoverQuaternary',
         textColor: 'surfaceTextPrimary',
-        iconBeforeFill: 'errorItemQuaternary',
         iconClearFill: 'errorItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
     errorSecondary: {
         fill: 'errorSecondary',
         borderColor: 'errorBorderTertiary',
-        borderColorHover: 'errorBorderQuaternary',
-        iconBeforeFill: 'errorItemQuaternary',
+        borderColorHover: 'errorBorderHoverQuaternary',
         iconClearFill: 'errorItemPrimary',
         placeholderTextColor: 'errorTextSecondary',
     },
@@ -101,7 +93,6 @@ const textareaAppearanceRequire = {
         borderColor: 'warningBorderQuaternary',
         borderColorHover: 'warningBorderQuaternary',
         textColor: 'surfaceTextPrimary',
-        iconBeforeFill: 'warningItemQuaternary',
         iconClearFill: 'warningItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
@@ -109,7 +100,6 @@ const textareaAppearanceRequire = {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextSecondary',
     },
@@ -190,11 +180,10 @@ const textareaAppearanceStyle = {
 const textareaAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
-        fillHover: 'successTertiary',
+        fillHover: 'successHoverTertiary',
         borderColor: 'successBorderQuaternary',
         borderColorHover: 'successBorderQuaternary',
         textColor: 'surfaceTextPrimary',
-        iconBeforeFill: 'successItemQuaternary',
         iconClearFill: 'successItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
@@ -202,7 +191,6 @@ const textareaAppearanceSuccess = {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextSecondary',
     },
@@ -226,12 +214,12 @@ const textareaConfig = {
     },
 };
 function Textarea(props) {
-    const { id, className, appearance, isDisabled, placeholder, value, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const { id, appearance, className, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, textareaConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     return (jsxRuntime.jsx("div", { className: clsx('textarea', className, sizeClass && `textarea_size_${sizeClass}`), children: jsxRuntime.jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderHoverClass && `border-color_hover_${borderHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, placeholderTextColorClass &&
-                `placeholder-text-color_${placeholderTextColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), disabled: isDisabled && 'disabled', placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }) }));
+                `placeholder-text-color_${placeholderTextColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }) }));
 }
 
 exports.Textarea = Textarea;

package/dist/cjs/components/Video.js

@@ -20,7 +20,7 @@ require('../hooks/useStyles/styleAttributes.js');
 function Video(props) {
     const { id, className, position, mp4, ogv, poster, webm, children } = props;
     const { styles: videoStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { id: id, className: clsx('video', className, poster && `video_poster`, position && `video_position_${position}`), style: videoStyles, children: [jsxRuntime.jsxs("video", { className: "video__wrapper", autoPlay: true, loop: true, muted: true, playsInline: false, poster: poster, children: [webm && jsxRuntime.jsx("source", { type: "video/webm", src: webm, codecs: "vp8, vorbis" }), ogv && jsxRuntime.jsx("source", { type: "video/ogg", src: ogv, codecs: "theora, vorbis" }), mp4 && (jsxRuntime.jsx("source", { type: "video/mp4", src: mp4, codecs: "avc1.42E01E, mp4a.40.2" }))] }), children] }));
+    return (jsxRuntime.jsxs("div", { id: id, className: clsx('video', className, poster && `video_poster`, position && `video_position_${position}`), style: videoStyles, children: [jsxRuntime.jsxs("video", { className: "video__wrapper", autoPlay: true, loop: true, muted: true, playsInline: false, poster: poster, children: [webm && jsxRuntime.jsx("source", { type: 'video/webm; codecs="vp8, vorbis"', src: webm }), ogv && jsxRuntime.jsx("source", { type: 'video/ogg; codecs="theora, vorbi"', src: ogv }), mp4 && (jsxRuntime.jsx("source", { type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"', src: mp4 }))] }), children] }));
 }
 
 exports.Video = Video;

package/dist/cjs/components/Warning.js

@@ -186,14 +186,14 @@ const warningConfig = {
     },
 };
 function Warning(props) {
-    const { appearance, className, label, description, isSkeleton } = props;
+    const { appearance, className, label, description, isSkeleton, children } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, warningConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, labelTextColor, labelTextSize, labelTextWeight, descriptionTextColor, descriptionTextSize, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
     // @ts-ignore
     const { styles: warningStyles } = useStyles.useStyles(props);
     const [isVisible, setIsVisible] = React.useState(true);
-    return (jsxRuntime.jsx(React.Fragment, { children: isVisible && (jsxRuntime.jsxs("div", { className: clsx(className, 'warning', fillClass && `fill_${fillClass}`, sizeClass && `warning_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `warning_skeleton`), style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: 'warning__content', children: [label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsxRuntime.jsx(Text.Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description }))] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
+    return (jsxRuntime.jsx(React.Fragment, { children: isVisible && (jsxRuntime.jsxs("div", { className: clsx(className, 'warning', fillClass && `fill_${fillClass}`, sizeClass && `warning_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `warning_skeleton`), style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: 'warning__content', children: [label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsxRuntime.jsx(Text.Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description })), children] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
 }
 
 exports.Warning = Warning;

package/dist/components/Avatar.js

@@ -1,4 +1,4 @@
-export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_Cmq4xAG6.js';
+export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_DRObE1DB.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/AvatarStack.js

@@ -3,8 +3,8 @@ 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_Cmq4xAG6.js';
-import { G as Group } from '../Group_es_BwTj-yH-.js';
+import { A as Avatar } from '../Avatar_es_DRObE1DB.js';
+import { G as Group } from '../Group_es_nBtACpoG.js';
 import { T as Text } from '../Text_es_CU9KR5AE.js';
 import 'react';
 import 'lodash/camelCase';

package/dist/components/Button.js

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

package/dist/components/Cell.js

@@ -101,50 +101,46 @@ const cellAppearanceStyle = {
 const cellAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
+        fillHover: 'surfaceHoverPrimary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         valueIconItemFill: 'surfaceItemPrimary',
         valueLabelAppearance: 'accentPrimary',
         valueTextColor: 'surfaceTextPrimary',
     },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         valueIconItemFill: 'surfaceItemPrimary',
         valueLabelAppearance: 'accentPrimary',
         valueTextColor: 'surfaceTextPrimary',
     },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         valueIconItemFill: 'surfaceItemPrimary',
         valueLabelAppearance: 'accentPrimary',
         valueTextColor: 'surfaceTextPrimary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceQuaternaryHover',
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         valueIconItemFill: 'surfaceItemPrimary',
@@ -166,7 +162,7 @@ const cellConfig = {
     },
 };
 function Cell(props) {
-    const { className, appearance, title, titleIcon, titleLabel, titleTag, showTitleLabel, showValueLabel, value, valueIcon, valueTag, before, after, isActive, isEqual, isSameWidth, onClick, onMouseEnter, } = props;
+    const { appearance, className, title, titleIcon, titleLabel, titleTag, showTitleLabel, showValueLabel, value, valueIcon, valueTag, before, after, isActive, isEqual, isSameWidth, onClick, onMouseEnter, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, cellConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, titleIconFill, titleIconFillHover, titleIconFillSize, titleIconItemFill, titleIconShape, titleIconSrc, titleLabelAppearance, titleLabelAppearanceSize, titleLabelShape, titleLabelSize, titleLabelTextSize, titleTextColor, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWrap, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, reverseClass, shapeClass, sizeClass, valueIconFill, valueIconFillHover, valueIconFillSize, valueIconItemFill, valueIconShape, valueIconSrc, valueLabel, valueLabelAppearance, valueLabelAppearanceSize, valueLabelShape, valueLabelSize, valueLabelTextSize, valueTextAlign, valueTextColor, valueTextSize, valueTextTruncate, valueTextWeight, valueTextWrap, widthClass, zeroGap, zeroPadding, } = propsGenerator;
@@ -183,7 +179,7 @@ function Cell(props) {
             ? borderColorHoverClass &&
                 `border-color_hover_${borderColorHoverClass}`
             : borderColorActiveHoverClass &&
-                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsx(Label, { className: "cell__title-label", appearance: `${titleLabelAppearance} ${titleLabelAppearanceSize}`, size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsx(Label, { className: "cell__value-label", appearance: `${valueLabelAppearance} ${valueLabelAppearanceSize}`, size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
+                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsx(Label, { appearance: `${titleLabelAppearance} ${titleLabelAppearanceSize}`, className: "cell__title-label", size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsx(Label, { appearance: `${valueLabelAppearance} ${valueLabelAppearanceSize}`, className: "cell__value-label", size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
 }
 
 export { Cell, cellAppearance, cellConfig };

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