@itcase/ui 1.9.37 → 1.9.38

package/dist/cjs/components/AvatarStack.js

@@ -2,12 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
 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_BH4N1LbX.js');
-var Group = require('../../Group_cjs_BGVwVJwS.js');
-var Text = require('../../Text_cjs_BJ9NgJkx.js');
+var Avatar = require('../../Avatar_cjs_Ctz9kEoE.js');
+var Group = require('../../Group_cjs_xCUYKUcc.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -22,12 +23,12 @@ require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
-require('../../Icon_cjs_DRdjXL7T.js');
+require('../../Icon_cjs_D20B2YBo.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_CmBw4h-N.js');
-require('../../Image_cjs_Dvojc8Dw.js');
+require('../../Link_cjs_DXBqPjwm.js');
+require('../../Image_cjs_JfkEyfgx.js');
 
 const avatarStackAppearanceSize = {
     size16: {
@@ -61,9 +62,8 @@ function AvatarStack(props) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, avatarStackConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { size } = propsGenerator;
-    //@ts-expect-error
     const { styles: avatarStackStyles } = useStyles.useStyles(props);
-    return (avatarsList.length && (jsxRuntime.jsxs("div", { className: clsx(className, 'avatar-stack', direction && `group_direction_${direction}`, size && `avatar-stack_size_${size}`, isSkeleton && `avatar-stack-skeleton`), style: avatarStackStyles, children: [avatarsList.slice(0, length).map((item) => (jsxRuntime.jsx(Avatar.Avatar, { appearance: `${avatarAppearance} size${size}`, className: "avatar-stack__item", src: item.src, textSize: "l", firstName: item.firstName, secondName: item.lastName, shape: "circular" }, item.id))), avatarsList.length > length && (jsxRuntime.jsx(Group.Group, { className: "avatar-stack__item avatar-stack__item-text", width: size, height: size, fill: "surfaceSecondary", children: jsxRuntime.jsxs(Text.Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
+    return (avatarsList.length && (jsxRuntime.jsxs("div", { className: clsx(className, 'avatar-stack', direction && `group_direction_${direction}`, size && `avatar-stack_size_${size}`, isSkeleton && `avatar-stack-skeleton`), style: avatarStackStyles, children: [avatarsList.slice(0, length).map((item) => (jsxRuntime.jsx(Avatar.Avatar, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(avatarAppearance, `size${size}`), className: "avatar-stack__item", src: item.src, textSize: "l", firstName: item.firstName, secondName: item.lastName, shape: "circular" }, item.id))), avatarsList.length > length && (jsxRuntime.jsx(Group.Group, { className: "avatar-stack__item avatar-stack__item-text", width: `${size}px`, height: `${size}px`, fill: "surfaceSecondary", children: jsxRuntime.jsxs(Text.Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
 }
 
 exports.AvatarStack = AvatarStack;

package/dist/cjs/components/Badge.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Icon = require('../../Icon_cjs_DRdjXL7T.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -23,8 +23,8 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Link_cjs_CmBw4h-N.js');
-require('../../Text_cjs_BJ9NgJkx.js');
+require('../../Link_cjs_DXBqPjwm.js');
+require('../../Text_cjs_erTy2pUN.js');
 
 
 

package/dist/cjs/components/Breadcrumbs.js

@@ -6,9 +6,9 @@ var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var Icon = require('../../Icon_cjs_DRdjXL7T.js');
-var Link = require('../../Link_cjs_CmBw4h-N.js');
-var Text = require('../../Text_cjs_BJ9NgJkx.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
+var Link = require('../../Link_cjs_DXBqPjwm.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -129,7 +129,6 @@ function BreadcrumbsItem(props) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, breadcrumbsConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, labelTextColor, labelTextColorHover, labelTextSize, borderColorClass, text, cursor, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, sizeClass, underlineClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: itemStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx(className, 'breadcrumbs__item', borderColorClass && `border-color_${borderColorClass}`, isActive && 'breadcrumbs__item_current', sizeClass && `breadcrumbs__item_size_${sizeClass}`, shapeClass && `breadcrumbs__item_shape_${shapeClass}`, fillClass && `fill_${fillClass}`, underlineClass && `text-decoration_${underlineClass}`, isSkeleton && `breadcrumbs__item_skeleton`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, href: href, LinkComponent: "div", style: itemStyles, onClick: onClick, children: [jsxRuntime.jsx(Text.Text, { className: "breadcrumbs__item-text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, children: text || children }), !isActive && (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('breadcrumbs__item-icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }));
 }
@@ -147,7 +146,6 @@ function Breadcrumbs(props) {
         }
         return [];
     }, [breadcrumbsList, children, appearance, isSkeleton]);
-    //@ts-expect-error
     const { styles: breadcrumbsStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'breadcrumbs', widthClass && `width_${widthClass}`, directionClass && `direction_${directionClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: breadcrumbsStyles, children: breadcrumbsItemsList }));
 }

package/dist/cjs/components/Button.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var Button = require('../../Button_cjs_Dvh0E0zz.js');
+var Button = require('../../Button_cjs_Ivarkwy6.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
+require('../utils/mergeAppearanceKeys.js');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');
@@ -20,13 +21,13 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Icon_cjs_DRdjXL7T.js');
+require('../../Icon_cjs_D20B2YBo.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_CmBw4h-N.js');
-require('../../Text_cjs_BJ9NgJkx.js');
-require('../../Loader_cjs_BHMB4c8f.js');
+require('../../Link_cjs_DXBqPjwm.js');
+require('../../Text_cjs_erTy2pUN.js');
+require('../../Loader_cjs_DMIUN6_q.js');
 
 
 

package/dist/cjs/components/Cell.js

@@ -2,12 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_DRdjXL7T.js');
-var Label = require('../../Label_cjs_Kf3sYviA.js');
-var Text = require('../../Text_cjs_BJ9NgJkx.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
+var Label = require('../../Label_cjs_DlbcXQX4.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -25,7 +26,7 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_CmBw4h-N.js');
+require('../../Link_cjs_DXBqPjwm.js');
 
 const cellAppearanceSize = {
     sizeXL: {
@@ -168,7 +169,6 @@ function Cell(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;
-    // @ts-expect-error
     const { data: dataStyles, styles: cellStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'cell', sizeClass && `cell_size_${sizeClass}`, !isActive
             ? fillClass && `fill_${fillClass}`
@@ -181,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'), "data-testid": dataTestId, "data-tour": dataTour, 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 })] }));
+                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), "data-testid": dataTestId, "data-tour": dataTour, 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: mergeAppearanceKeys.mergeAppearanceKeys(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: mergeAppearanceKeys.mergeAppearanceKeys(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/Checkbox.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text_cjs_BJ9NgJkx.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -24,15 +24,15 @@ require('lodash/maxBy');
 const checkboxAppearanceDefault = {
     defaultPrimary: {
         fillCheckbox: 'surfaceSecondary',
-        fillCheckboxActive: 'surfaceActiveSecondary',
-        fillCheckboxActiveHover: 'surfaceActiveHoverTertiary',
+        fillCheckboxActive: 'surfaceSecondary',
+        fillCheckboxActiveHover: 'surfaceTertiary',
         fillCheckboxHover: 'surfaceHoverTertiary',
         fillCheckmark: 'surfacePrimary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColorCheckbox: 'surfaceBorderPrimary',
-        borderColorCheckboxActive: 'surfaceBorderActivePrimary',
-        borderColorCheckboxActiveHover: 'surfaceBorderActivePrimary',
+        borderColorCheckboxActive: 'surfaceBorderPrimary',
+        borderColorCheckboxActiveHover: 'surfaceBorderPrimary',
         borderColorCheckboxHover: 'surfaceBorderHoverPrimary',
     },
 };

package/dist/cjs/components/Checkmark.js

@@ -118,7 +118,6 @@ function Checkmark(props) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, checkmarkConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, checkmarkFillClass, sizeClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: checkmarkStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'checkmark', sizeClass && `checkmark_size_${sizeClass}`, !isChecked || !isActive
             ? fillClass && `fill_${fillClass}`

package/dist/cjs/components/Chips.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ChipsGroup = require('../../ChipsGroup_cjs_CT4DME-7.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_CIIf1Cyn.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
@@ -20,12 +20,12 @@ require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-require('../../Icon_cjs_DRdjXL7T.js');
+require('../../Icon_cjs_D20B2YBo.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_CmBw4h-N.js');
-require('../../Text_cjs_BJ9NgJkx.js');
+require('../../Link_cjs_DXBqPjwm.js');
+require('../../Text_cjs_erTy2pUN.js');
 
 
 

package/dist/cjs/components/Choice.js

@@ -6,9 +6,9 @@ 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 Icon = require('../../Icon_cjs_DRdjXL7T.js');
-var Loader = require('../../Loader_cjs_BHMB4c8f.js');
-var Text = require('../../Text_cjs_BJ9NgJkx.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
+var Loader = require('../../Loader_cjs_DMIUN6_q.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -25,7 +25,7 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_CmBw4h-N.js');
+require('../../Link_cjs_DXBqPjwm.js');
 
 const choiceAppearanceDefault = {
     defaultMutedPrimary: {
@@ -71,15 +71,14 @@ const choiceAppearanceDisabled = {
         fillItemActive: 'surfaceDisabled',
         fillItemActiveHover: 'surfaceDisabled',
         fillItemHover: 'surfaceTertiary',
-        labelTextActiveColor: 'surfaceTextQuaternary',
         labelTextColor: 'surfaceTextQuaternary',
         borderColor: 'surfaceBorderPrimary',
         iconAfterFill: 'surfaceItemPrimary',
-        iconAfterFillActive: 'surfaceItemActiveDisabled',
+        iconAfterFillActive: 'disabledItemSecondary',
         iconBeforeFill: 'surfaceItemPrimary',
-        iconBeforeFillActive: 'surfaceItemActiveDisabled',
+        iconBeforeFillActive: 'disabledItemSecondary',
         iconFill: 'surfaceItemPrimary',
-        iconFillActive: 'surfaceActiveItemDisabled',
+        iconFillActive: 'disabledItemSecondary',
     },
 };
 
@@ -107,14 +106,14 @@ const choiceAppearanceRequire = {
         fillItemActive: 'warningSecondary',
         fillItemHover: 'warningHoverPrimary',
         labelTextColor: 'warningTextSecondary',
-        labelTextColorActive: 'warningTextActivePrimary',
+        labelTextColorActive: 'warningTextPrimary',
         borderColor: 'warningBorderSecondary',
         iconAfterFill: 'warningItemSecondary',
-        iconAfterFillActive: 'warningItemActiveTertiary',
+        iconAfterFillActive: 'warningItemTertiary',
         iconBeforeFill: 'warningItemSecondary',
-        iconBeforeFillActive: 'warningItemActiveTertiary',
+        iconBeforeFillActive: 'warningItemTertiary',
         iconFill: 'warningItemSecondary',
-        iconFillActive: 'warningItemActiveTertiary',
+        iconFillActive: 'warningItemTertiary',
     },
 };
 
@@ -185,11 +184,11 @@ const choiceAppearanceSuccess = {
         labelTextColorActive: 'successTextActivePrimary',
         borderColor: 'successBorderSecondary',
         iconAfterFill: 'successItemSecondary',
-        iconAfterFillActive: 'successItemActiveTertiary',
+        iconAfterFillActive: 'successItemTertiary',
         iconBeforeFill: 'successItemSecondary',
-        iconBeforeFillActive: 'successItemActiveTertiary',
+        iconBeforeFillActive: 'successItemTertiary',
         iconFill: 'successItemSecondary',
-        iconFillActive: 'successItemActiveTertiary',
+        iconFillActive: 'successItemTertiary',
     },
 };
 
@@ -221,7 +220,6 @@ function Choice(props) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, choiceConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { size, fillClass, fillItemActiveClass, fillItemActiveDisabledClass, fillItemActiveHoverClass, fillItemClass, fillItemDisabledClass, fillItemHoverClass, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconAfterFill, iconAfterFillActive, iconAfterFillDisabled, iconAfterSize, iconBeforeFill, iconBeforeFillActive, iconBeforeFillDisabled, iconBeforeSize, iconFill, iconFillActive, iconFillDisabled, iconSize, shapeClass, shapeStrengthClass, wrapClass, } = propsGenerator;
-    //@ts-expect-error
     const { styles } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'choice', size && `choice_size_${size}`, fillClass && `fill_${fillClass}`, wrapClass && `choice_wrap_${wrapClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `choice_skeleton`), ref: controlRef, "data-testid": dataTestId && `${dataTestId}Choice`, "data-tour": dataTour, style: styles, children: [before && jsxRuntime.jsx("div", { className: "choice__before", children: before }), isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemPrimary" })) : (jsxRuntime.jsx(React.Fragment, { children: options.map((item) => {
                     const isActive = typeof active === 'object'

package/dist/cjs/components/CookiesWarning.js

@@ -6,8 +6,8 @@ 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_Dvh0E0zz.js');
-var Text = require('../../Text_cjs_BJ9NgJkx.js');
+var Button = require('../../Button_cjs_Ivarkwy6.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -20,14 +20,15 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
+require('../utils/mergeAppearanceKeys.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Icon_cjs_DRdjXL7T.js');
+require('../../Icon_cjs_D20B2YBo.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_CmBw4h-N.js');
-require('../../Loader_cjs_BHMB4c8f.js');
+require('../../Link_cjs_DXBqPjwm.js');
+require('../../Loader_cjs_DMIUN6_q.js');
 
 const cookiesWarningAppearanceDefault = {
     defaultPrimary: {

package/dist/cjs/components/Dadata.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var reactDadata = require('react-dadata');
-var Input = require('../../Input_cjs_B13aeHfj.js');
+var Input = require('../../Input_cjs_BQIi1N63.js');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');

package/dist/cjs/components/DatePeriod.js

@@ -5,19 +5,20 @@ var React = require('react');
 var clsx = require('clsx');
 var luxon = require('luxon');
 var common = require('@itcase/common');
+var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var ChipsGroup = require('../../ChipsGroup_cjs_CT4DME-7.js');
-var DatePicker = require('../../DatePicker_cjs_DFbSO6Me.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_CIIf1Cyn.js');
+var DatePicker = require('../../DatePicker_cjs_BzAzvsdV.js');
 require('react-select');
-require('../../Icon_cjs_DRdjXL7T.js');
-var SelectContainer = require('../../SelectContainer_cjs_DlpMN8W0.js');
+require('../../Icon_cjs_D20B2YBo.js');
+var SelectContainer = require('../../SelectContainer_cjs_Bd9llsQa.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../context/Notifications.js');
 require('../context/UIContext.js');
-require('../../Group_cjs_BGVwVJwS.js');
+require('../../Group_cjs_xCUYKUcc.js');
 require('lodash/castArray');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
@@ -26,20 +27,20 @@ require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
-require('../../Text_cjs_BJ9NgJkx.js');
+require('../../Text_cjs_erTy2pUN.js');
 require('date-fns/locale');
 require('react-datepicker');
-require('../../Button_cjs_Dvh0E0zz.js');
-require('../../Link_cjs_CmBw4h-N.js');
-require('../../Loader_cjs_BHMB4c8f.js');
-require('../../Input_cjs_B13aeHfj.js');
-require('../../Label_cjs_Kf3sYviA.js');
+require('../../Button_cjs_Ivarkwy6.js');
+require('../../Link_cjs_DXBqPjwm.js');
+require('../../Loader_cjs_DMIUN6_q.js');
+require('../../Input_cjs_BQIi1N63.js');
+require('../../Label_cjs_DlbcXQX4.js');
 require('@itcase/icons/default');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
 require('react-select/creatable');
-require('../../Divider_cjs_DmIeh3Jq.js');
+require('../../Divider_cjs_C5Ou2Kqa.js');
 
 const datePeriodAppearanceShape = {
     circular: {
@@ -153,23 +154,22 @@ function DatePeriod(props) {
         return (dateStartIso === normalizedDatePeriodValueStart &&
             dateEndIso === normalizedDatePeriodValueEnd);
     }, [datePeriodValueEnd, datePeriodValueStart]);
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'date-period', sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, children: [jsxRuntime.jsxs("div", { className: clsx('date-period__wrapper', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: [jsxRuntime.jsx(ChipsGroup.ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: datePeriodIntervalsList.map((datePeriodItem) => (jsxRuntime.jsx(ChipsGroup.Chips, { appearance: `${chipsAppearance} ${chipsAppearanceSize}`, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))) }), jsxRuntime.jsx(DatePicker.DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
-                            appearance: `${datePickerAppearance} ${datePickerAppearanceSize}`,
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'date-period', sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, children: [jsxRuntime.jsxs("div", { className: clsx('date-period__wrapper', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: [jsxRuntime.jsx(ChipsGroup.ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: datePeriodIntervalsList.map((datePeriodItem) => (jsxRuntime.jsx(ChipsGroup.Chips, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(chipsAppearance, chipsAppearanceSize), label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))) }), jsxRuntime.jsx(DatePicker.DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
+                            appearance: mergeAppearanceKeys.mergeAppearanceKeys(datePickerAppearance, datePickerAppearanceSize),
                             dateFormat: 'dd/MM/yyyy',
                             monthsShown: monthsShown,
                             popperPlacement: popperPlacement,
                             selectsRange: selectsRange,
                             showWeekNumbers: showWeekNumbers,
                             isClearable: false,
-                            isStartDefaultNull: true,
                             onKeyDown: onKeyDown,
                         }, endValue: datePeriodValueEnd, inputProps: {
-                            appearance: `${datePickerInputAppearance} ${datePickerInputAppearanceSize} ghost`,
+                            appearance: mergeAppearanceKeys.mergeAppearanceKeys(datePickerInputAppearance, datePickerInputAppearanceSize, 'ghost'),
                             className: `date-period__datepicker-input date-period__datepicker-input_size_${sizeClass} `,
                             fillHover: datePickerInputFillHover,
                             textSize: datePickerInputTextSize,
                             placeholder: 'Выбрать период',
-                        }, value: datePeriodValueStart, onChange: onChangeDatePeriod })] }), datePeriodSelectFirstOptions && (jsxRuntime.jsx(SelectContainer.SelectContainer, { appearance: `${selectAppearance} ${selectAppearanceSize}`, className: "date-period__select", width: "180px", minWidth: "180px", options: datePeriodSelectFirstOptions, placeholder: datePeriodSelectFirstPlaceholder, shape: selectShape, value: datePeriodSelectFirstValue, isSearchable: true, onChange: onChangeDatePeriodFirstSelect })), datePeriodSelectSecondOptions && (jsxRuntime.jsx(SelectContainer.SelectContainer, { appearance: `${selectAppearance} ${selectAppearanceSize}`, className: "date-period__select", width: "180px", minWidth: "180px", options: datePeriodSelectSecondOptions, placeholder: datePeriodSelectSecondPlaceholder, shape: selectShape, value: datePeriodSelectSecondValue, isSearchable: true, onChange: onChangeDatePeriodSecondSelect }))] }));
+                        }, value: datePeriodValueStart, onChange: onChangeDatePeriod })] }), datePeriodSelectFirstOptions && (jsxRuntime.jsx(SelectContainer.SelectContainer, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(selectAppearance, selectAppearanceSize), className: "date-period__select", width: "180px", minWidth: "180px", options: datePeriodSelectFirstOptions, placeholder: datePeriodSelectFirstPlaceholder, shape: selectShape, value: datePeriodSelectFirstValue, isSearchable: true, onChange: onChangeDatePeriodFirstSelect })), datePeriodSelectSecondOptions && (jsxRuntime.jsx(SelectContainer.SelectContainer, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(selectAppearance, selectAppearanceSize), className: "date-period__select", width: "180px", minWidth: "180px", options: datePeriodSelectSecondOptions, placeholder: datePeriodSelectSecondPlaceholder, shape: selectShape, value: datePeriodSelectSecondValue, isSearchable: true, onChange: onChangeDatePeriodSecondSelect }))] }));
 }
 
 exports.DatePeriod = DatePeriod;

package/dist/cjs/components/DatePicker.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('../../DatePicker_cjs_DFbSO6Me.js');
+var DatePicker = require('../../DatePicker_cjs_BzAzvsdV.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -22,16 +22,17 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Button_cjs_Dvh0E0zz.js');
-require('../../Icon_cjs_DRdjXL7T.js');
+require('../../Button_cjs_Ivarkwy6.js');
+require('../utils/mergeAppearanceKeys.js');
+require('../../Icon_cjs_D20B2YBo.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_CmBw4h-N.js');
-require('../../Text_cjs_BJ9NgJkx.js');
-require('../../Loader_cjs_BHMB4c8f.js');
-require('../../Input_cjs_B13aeHfj.js');
-require('../../Label_cjs_Kf3sYviA.js');
+require('../../Link_cjs_DXBqPjwm.js');
+require('../../Text_cjs_erTy2pUN.js');
+require('../../Loader_cjs_DMIUN6_q.js');
+require('../../Input_cjs_BQIi1N63.js');
+require('../../Label_cjs_DlbcXQX4.js');
 require('@itcase/icons/default');
 
 

package/dist/cjs/components/Divider.js

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

package/dist/cjs/components/Dot.js

@@ -23,7 +23,6 @@ function Dot(props) {
     const { className, children } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { dataTestId, dataTour, fillClass, borderColorClass, borderTypeClass, shapeClass, sizeClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'dot', borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `dot_shape_${shapeClass}`, sizeClass && `dot_size_${sizeClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: styles, children: children }));
 }

package/dist/cjs/components/Drawer.js

@@ -6,9 +6,9 @@ var clsx = require('clsx');
 var ReactDrawer = require('react-modern-drawer');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Divider = require('../../Divider_cjs_DmIeh3Jq.js');
-var Icon = require('../../Icon_cjs_DRdjXL7T.js');
-var Text = require('../../Text_cjs_BJ9NgJkx.js');
+var Divider = require('../../Divider_cjs_C5Ou2Kqa.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -27,7 +27,7 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_CmBw4h-N.js');
+require('../../Link_cjs_DXBqPjwm.js');
 
 const drawerAppearanceSize = {
     sizeH3: {

package/dist/cjs/components/Dropdown.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DropdownItem = require('../../DropdownItem_cjs_Aun30hgm.js');
+var DropdownItem = require('../../DropdownItem_cjs_nZbgMgqg.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -20,13 +20,13 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Icon_cjs_DRdjXL7T.js');
+require('../../Icon_cjs_D20B2YBo.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_CmBw4h-N.js');
-require('../../Text_cjs_BJ9NgJkx.js');
-require('../../Divider_cjs_DmIeh3Jq.js');
+require('../../Link_cjs_DXBqPjwm.js');
+require('../../Text_cjs_erTy2pUN.js');
+require('../../Divider_cjs_C5Ou2Kqa.js');
 
 
 

package/dist/cjs/components/Flex.js

@@ -23,7 +23,6 @@ function Flex(props) {
     const { id, className, dataTestId, dataTour, type, dataId, print, style, tag: Tag = 'div', onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { directionClass, justifyContentClass, alignContentClass, alignItemsClass, fillClass, borderColorClass, borderTypeClass, flowClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: flexStyles, wrapper: flexWrapperStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'flex', widthClass && `width_${widthClass}`, alignContentClass && `flex_align-content_${alignContentClass}`, alignItemsClass && `flex_align-items_${alignItemsClass}`, directionClass && `flex_direction_${directionClass}`, fillClass && `fill_${fillClass}`, flowClass && `flex_flow_${flowClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, positionClass && `position_${positionClass}`, justifyContentClass && `flex_justify-content_${justifyContentClass}`, shapeClass && `flex_shape_${shapeClass}`, type && `flex_type_${type}`, !print && 'no-print', print && 'print', wrapClass && `flex_wrap_${wrapClass}`), "data-id": dataId, "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, flexStyles, style), onClick: onClick, children: jsxRuntime.jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
 }
@@ -32,7 +31,6 @@ function FlexItem(props) {
     const { className, htmlFor, print, style, tag: Tag = 'div', children } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { dataTestId, dataTour, directionClass, justifyContentClass, alignItemsClass, alignSelfClass, fillClass, fillHoverClass, dataId, growClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: flexItemStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx(Tag, { className: clsx(className, 'flex__item', positionClass && `position_${positionClass}`, alignItemsClass && `flex__item_align-items_${alignItemsClass}`, alignSelfClass && `flex__item_align-self_${alignSelfClass}`, directionClass && `flex__item_direction_${directionClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, growClass && `flex__item_grow_${growClass}`, justifyContentClass &&
             `flex__item_justify-content_${justifyContentClass}`, shapeClass && `flex__item_shape_${shapeClass}`, !print && 'no-print', print && 'print', widthClass && `width_${widthClass}`, wrapClass && `flex__item_wrap_${wrapClass}`), "data-id": dataId, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, flexItemStyles, style), children: children }));

package/dist/cjs/components/Grid.js

@@ -23,7 +23,6 @@ function Grid(props) {
     const { id, className, dataTestId, dataTour, type, horizontalResizing, horizontalScroll, print, tag: Tag = 'div', useGridSystem, verticalResizing, before, after, onClick, onDoubleClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { justifyContentClass, justifyItemsClass, alignContentClass, alignItemsClass, fillClass, fillHoverClass, borderColorClass, columnGapClass, columnsClass, heightClass, rowGapClass, rowsClass, widthClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: gridStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`, !print && 'no-print', print && 'print'), "data-testid": dataTestId, "data-tour": dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && jsxRuntime.jsx("div", { className: "grid__before", children: before }), children, after && jsxRuntime.jsx("div", { className: "grid__after", children: after })] }));
 }
@@ -32,7 +31,6 @@ function GridItem(props) {
     const { id, className, dataTestId, dataTour, print, style, onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { directionClass, justifySelfClass, alignSelfClass, fillClass, fillHoverClass, columnEndClass, columnGapClass, columnSpanClass, columnStartClass, gapClass, heightClass, orderClass, rowEndClass, rowGapClass, rowSpanClass, rowStartClass, widthClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: gridItemStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx("div", { id: id, className: clsx(className, 'grid__item', orderClass && `order_${orderClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, alignSelfClass && `grid__item_align-self_${alignSelfClass}`, justifySelfClass && `grid__item_justify-self_${justifySelfClass}`, columnStartClass && `grid__item_column-start_${columnStartClass}`, columnEndClass && `grid__item_column-end_${columnEndClass}`, columnSpanClass && `grid__item_column-span_${columnSpanClass}`, rowStartClass && `grid__item_row-start_${rowStartClass}`, rowEndClass && `grid__item_row-end_${rowEndClass}`, rowSpanClass && `grid__item_row-span_${rowSpanClass}`, directionClass && `direction_${directionClass}`, gapClass && `gap_${gapClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, rowGapClass && `row-gap_${rowGapClass}`, !print && 'no-print', print && 'print', columnGapClass && `column-gap_${columnGapClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, gridItemStyles, style), onClick: onClick, children: children }));
 }
@@ -41,7 +39,6 @@ function GridRow(props) {
     const { id, className, dataTestId, dataTour, dataId, htmlFor, print, tag: Tag = 'div', onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { fillClass, fillHoverClass, borderColorClass, heightClass, widthClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: gridRowStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'grid__row', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, !print && 'no-print', print && 'print', borderColorClass && `border-color_${borderColorClass}`), "data-id": dataId, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: gridRowStyles, onClick: onClick, children: children }));
 }