@itcase/ui 1.8.122 → 1.8.124

package/dist/components/Avatar.js

@@ -1,9 +1,8 @@
-export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_lx7s4Vla.js';
+export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_BFom0nAS.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -17,12 +16,12 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon_es_BrwLifge.js';
+import '../Icon_es_D5eiycFI.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_XiqbdwLp.js';
-import '../Text_es_CwV9rjFD.js';
-import '../Image_es_BvYo_cHH.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Text_es_CnymlElo.js';
+import '../Image_es_BHec4iVN.js';

package/dist/components/AvatarStack/stories/__mock__.js

@@ -1,4 +1,4 @@
-var avatarsListMock = [
+const avatarsListMock = [
     {
         id: 0,
         src: '/avatar/Man.png',

package/dist/components/AvatarStack.js

@@ -3,10 +3,9 @@ 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_lx7s4Vla.js';
-import { G as Group } from '../Group_es_DRqIIM9m.js';
-import { T as Text } from '../Text_es_CwV9rjFD.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { A as Avatar } from '../Avatar_es_BFom0nAS.js';
+import { G as Group } from '../Group_es_BU5k8f5S.js';
+import { T as Text } from '../Text_es_CnymlElo.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -21,14 +20,14 @@ import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
-import '../Icon_es_BrwLifge.js';
+import '../Icon_es_D5eiycFI.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_XiqbdwLp.js';
-import '../Image_es_BvYo_cHH.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Image_es_BHec4iVN.js';
 
-var avatarStackAppearanceSize = {
+const avatarStackAppearanceSize = {
     size16: {
         size: '16',
     },
@@ -49,18 +48,20 @@ var avatarStackAppearanceSize = {
     },
 };
 
-var avatarStackAppearance = __assign({}, avatarStackAppearanceSize);
+const avatarStackAppearance = {
+    ...avatarStackAppearanceSize,
+};
 
-var avatarStackConfig = {
+const avatarStackConfig = {
     appearance: avatarStackAppearance};
 function AvatarStack(props) {
-    var className = props.className, appearance = props.appearance, _a = props.direction, direction = _a === void 0 ? 'horizontal' : _a, avatarAppearance = props.avatarAppearance, avatarsList = props.avatarsList, _b = props.length, length = _b === void 0 ? 3 : _b, isSkeleton = props.isSkeleton;
-    var appearanceConfig = useAppearanceConfig(appearance, avatarStackConfig);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { className, appearance, direction = 'horizontal', avatarAppearance, avatarsList, length = 3, isSkeleton, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, avatarStackConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     // "size" is numeric
-    var size = propsGenerator.size;
-    var avatarStackStyles = useStyles(props).styles;
-    return (avatarsList.length && (jsxs("div", { className: clsx(className, 'avatar-stack', direction && "group_direction_".concat(direction), size && "avatar-stack_size_".concat(size), isSkeleton && "avatar-stack-skeleton"), style: avatarStackStyles, children: [avatarsList.slice(0, length).map(function (item) { return (jsx(Avatar, { className: "avatar-stack__item", appearance: "".concat(avatarAppearance, " size").concat(size), src: item.src, textSize: "l", firstName: item.firstName, secondName: item.lastName, shape: "circular" }, item.id)); }), avatarsList.length > length && (jsx(Group, { className: "avatar-stack__item avatar-stack__item-text", width: size, height: size, fill: "surfaceSecondary", children: jsxs(Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
+    const { size } = propsGenerator;
+    const { styles: avatarStackStyles } = useStyles(props);
+    return (avatarsList.length && (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) => (jsx(Avatar, { className: "avatar-stack__item", appearance: `${avatarAppearance} size${size}`, src: item.src, textSize: "l", firstName: item.firstName, secondName: item.lastName, shape: "circular" }, item.id))), avatarsList.length > length && (jsx(Group, { className: "avatar-stack__item avatar-stack__item-text", width: size, height: size, fill: "surfaceSecondary", children: jsxs(Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
 }
 
 export { AvatarStack };

package/dist/components/Badge.js

@@ -1,5 +1,4 @@
-export { B as Badge, f as badgeAppearance, g as badgeConfig } from '../Icon_es_BrwLifge.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
+export { B as Badge, f as badgeAppearance, g as badgeConfig } from '../Icon_es_D5eiycFI.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -22,5 +21,5 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_XiqbdwLp.js';
-import '../Text_es_CwV9rjFD.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Text_es_CnymlElo.js';

package/dist/components/Breadcrumbs/stories/__mock__.js

@@ -1,4 +1,4 @@
-var breadcrumbsListMock = [
+const breadcrumbsListMock = [
     {
         id: '1',
         key: 1,

package/dist/components/Breadcrumbs.js

@@ -4,10 +4,9 @@ import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { I as Icon } from '../Icon_es_BrwLifge.js';
-import { a as LinkWrapper } from '../Link_es_XiqbdwLp.js';
-import { T as Text } from '../Text_es_CwV9rjFD.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { I as Icon } from '../Icon_es_D5eiycFI.js';
+import { a as LinkWrapper } from '../Link_es_P2b6ya7P.js';
+import { T as Text } from '../Text_es_CnymlElo.js';
 import { icons12, icons14, icons16, icons20, icons24 } from '@itcase/icons/default';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -26,7 +25,7 @@ import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 
-var breadcrumbsAppearanceAccent = {
+const breadcrumbsAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
         labelTextColor: 'accentTextPrimary',
@@ -35,7 +34,7 @@ var breadcrumbsAppearanceAccent = {
     },
 };
 
-var breadcrumbsAppearanceSize = {
+const breadcrumbsAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         labelTextSize: 'xxl',
@@ -73,7 +72,7 @@ var breadcrumbsAppearanceSize = {
     },
 };
 
-var breadcrumbsAppearanceStyle = {
+const breadcrumbsAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -87,7 +86,7 @@ var breadcrumbsAppearanceStyle = {
     },
 };
 
-var breadcrumbsAppearanceSurface = {
+const breadcrumbsAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         labelTextColor: 'surfaceTextPrimary',
@@ -114,35 +113,40 @@ var breadcrumbsAppearanceSurface = {
     },
 };
 
-var breadcrumbsAppearance = __assign(__assign(__assign(__assign({}, breadcrumbsAppearanceSize), breadcrumbsAppearanceStyle), breadcrumbsAppearanceAccent), breadcrumbsAppearanceSurface);
+const breadcrumbsAppearance = {
+    ...breadcrumbsAppearanceSize,
+    ...breadcrumbsAppearanceStyle,
+    ...breadcrumbsAppearanceAccent,
+    ...breadcrumbsAppearanceSurface,
+};
 
-var breadcrumbsConfig = {
+const breadcrumbsConfig = {
     appearance: breadcrumbsAppearance};
 function BreadcrumbsItem(props) {
-    var className = props.className, appearance = props.appearance, href = props.href, isActive = props.isActive, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
-    var appearanceConfig = useAppearanceConfig(appearance, breadcrumbsConfig);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, labelTextColor = propsGenerator.labelTextColor, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, borderColorClass = propsGenerator.borderColorClass, text = propsGenerator.text, cursor = propsGenerator.cursor, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, underlineClass = propsGenerator.underlineClass;
+    const { className, appearance, href, isActive, isSkeleton, onClick, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, breadcrumbsConfig);
+    const propsGenerator = 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
-    var itemStyles = useStyles(props).styles;
-    return (jsxs(LinkWrapper, { className: clsx(className, 'breadcrumbs__item', borderColorClass && "border-color_".concat(borderColorClass), isActive && 'breadcrumbs__item_current', sizeClass && "breadcrumbs__item_size_".concat(sizeClass), shapeClass && "breadcrumbs__item_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), underlineClass && "text-decoration_".concat(underlineClass), isSkeleton && "breadcrumbs__item_skeleton", onClick && (cursor || 'cursor_type_pointer')), href: href, LinkComponent: "div", style: itemStyles, onClick: onClick, children: [jsx(Text, { className: "breadcrumbs__item-text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, children: text || children }), !isActive && (icon || iconSrc) && (jsx(Icon, { className: clsx('breadcrumbs__item-icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }));
+    const { styles: itemStyles } = useStyles(props);
+    return (jsxs(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')), href: href, LinkComponent: "div", style: itemStyles, onClick: onClick, children: [jsx(Text, { className: "breadcrumbs__item-text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, children: text || children }), !isActive && (icon || iconSrc) && (jsx(Icon, { className: clsx('breadcrumbs__item-icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }));
 }
 
 function Breadcrumbs(props) {
-    var className = props.className, appearance = props.appearance, breadcrumbsList = props.breadcrumbsList, isSkeleton = props.isSkeleton, children = props.children;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var _a = propsGenerator.directionClass, directionClass = _a === void 0 ? 'horizontal' : _a, widthClass = propsGenerator.widthClass;
-    var breadcrumbsItemsList = useMemo(function () {
+    const { className, appearance, breadcrumbsList, isSkeleton, children } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { directionClass = 'horizontal', widthClass } = propsGenerator;
+    const breadcrumbsItemsList = useMemo(() => {
         if (breadcrumbsList) {
-            return breadcrumbsList.map(function (item, i) { return (jsx(BreadcrumbsItem, { appearance: appearance, text: item.text, icon: item.icon, iconSrc: item.icon, isActive: i + 1 === breadcrumbsList.length && true, isSkeleton: isSkeleton }, "breadcrumbsItem_".concat(item.key || item.id || item.text))); });
+            return breadcrumbsList.map((item, i) => (jsx(BreadcrumbsItem, { appearance: appearance, text: item.text, icon: item.icon, iconSrc: item.icon, isActive: i + 1 === breadcrumbsList.length && true, isSkeleton: isSkeleton }, `breadcrumbsItem_${item.key || item.id || item.text}`)));
         }
         if (children) {
             return children;
         }
         return [];
     }, [children, breadcrumbsList, appearance]);
-    var breadcrumbsStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'breadcrumbs', widthClass && "width_".concat(widthClass), directionClass && "direction_".concat(directionClass)), style: breadcrumbsStyles, children: breadcrumbsItemsList }));
+    const { styles: breadcrumbsStyles } = useStyles(props);
+    return (jsx("div", { className: clsx(className, 'breadcrumbs', widthClass && `width_${widthClass}`, directionClass && `direction_${directionClass}`), style: breadcrumbsStyles, children: breadcrumbsItemsList }));
 }
 
 export { Breadcrumbs, BreadcrumbsItem, breadcrumbsAppearance };

package/dist/components/Button.js

@@ -1,9 +1,8 @@
-export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_CtH5EKJd.js';
+export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_Cn3wtv3M.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../Icon_es_BrwLifge.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
+import '../Icon_es_D5eiycFI.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '@itcase/common';
@@ -23,6 +22,6 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_XiqbdwLp.js';
-import '../Text_es_CwV9rjFD.js';
-import '../Loader_es_BUSqFrCd.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Text_es_CnymlElo.js';
+import '../Loader_es_CmSggwbR.js';

package/dist/components/Cell/stories/__mock__.js

@@ -1,6 +1,6 @@
 // "Placeholder" is removed from @itcase/icons.
 // Use url to ".storybook/assets/icons/placeholder.svg"
-var cellMock = {
+const cellMock = {
     title: 'Title',
     // titleIcon: icons16.Placeholder,
     titleLabel: 'Label',

package/dist/components/Cell.js

@@ -3,10 +3,9 @@ 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 { I as Icon } from '../Icon_es_BrwLifge.js';
-import { L as Label } from '../Label_es_SULlg9bL.js';
-import { T as Text } from '../Text_es_CwV9rjFD.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { I as Icon } from '../Icon_es_D5eiycFI.js';
+import { L as Label } from '../Label_es_DCqpSw_F.js';
+import { T as Text } from '../Text_es_CnymlElo.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -24,9 +23,9 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_XiqbdwLp.js';
+import '../Link_es_P2b6ya7P.js';
 
-var cellAppearanceSize = {
+const cellAppearanceSize = {
     sizeXL: {
         size: 'xl',
         titleLabelAppearanceSize: 'sizeXS',
@@ -85,7 +84,7 @@ var cellAppearanceSize = {
     },
 };
 
-var cellAppearanceStyle = {
+const cellAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -99,7 +98,7 @@ var cellAppearanceStyle = {
     },
 };
 
-var cellAppearanceSurface = {
+const cellAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
@@ -154,33 +153,37 @@ var cellAppearanceSurface = {
     },
 };
 
-var cellAppearance = __assign(__assign(__assign({}, cellAppearanceSize), cellAppearanceStyle), cellAppearanceSurface);
+const cellAppearance = {
+    ...cellAppearanceSize,
+    ...cellAppearanceStyle,
+    ...cellAppearanceSurface,
+};
 
-var cellConfig = {
+const cellConfig = {
     appearance: cellAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         cellConfig.appearance = appearanceConfig;
     },
 };
 function Cell(props) {
-    var className = props.className, appearance = props.appearance, title = props.title, titleIcon = props.titleIcon, titleLabel = props.titleLabel, titleTag = props.titleTag, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, value = props.value, valueIcon = props.valueIcon, valueTag = props.valueTag, before = props.before, after = props.after, isActive = props.isActive, isEqual = props.isEqual, isSameWidth = props.isSameWidth, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
-    var appearanceConfig = useAppearanceConfig(appearance, cellConfig);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleIconFill = propsGenerator.titleIconFill, titleIconFillHover = propsGenerator.titleIconFillHover, titleIconFillSize = propsGenerator.titleIconFillSize, titleIconItemFill = propsGenerator.titleIconItemFill, titleIconShape = propsGenerator.titleIconShape, titleIconSrc = propsGenerator.titleIconSrc, titleLabelAppearance = propsGenerator.titleLabelAppearance, titleLabelAppearanceSize = propsGenerator.titleLabelAppearanceSize, titleLabelShape = propsGenerator.titleLabelShape, titleLabelSize = propsGenerator.titleLabelSize, titleLabelTextSize = propsGenerator.titleLabelTextSize, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextTruncate = propsGenerator.titleTextTruncate, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, reverseClass = propsGenerator.reverseClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, valueIconFill = propsGenerator.valueIconFill, valueIconFillHover = propsGenerator.valueIconFillHover, valueIconFillSize = propsGenerator.valueIconFillSize, valueIconItemFill = propsGenerator.valueIconItemFill, valueIconShape = propsGenerator.valueIconShape, valueIconSrc = propsGenerator.valueIconSrc, valueLabel = propsGenerator.valueLabel, valueLabelAppearance = propsGenerator.valueLabelAppearance, valueLabelAppearanceSize = propsGenerator.valueLabelAppearanceSize, valueLabelShape = propsGenerator.valueLabelShape, valueLabelSize = propsGenerator.valueLabelSize, valueLabelTextSize = propsGenerator.valueLabelTextSize, valueTextAlign = propsGenerator.valueTextAlign, valueTextColor = propsGenerator.valueTextColor, valueTextSize = propsGenerator.valueTextSize, valueTextTruncate = propsGenerator.valueTextTruncate, valueTextWeight = propsGenerator.valueTextWeight, valueTextWrap = propsGenerator.valueTextWrap, widthClass = propsGenerator.widthClass, zeroGap = propsGenerator.zeroGap, zeroPadding = propsGenerator.zeroPadding;
+    const { className, appearance, 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;
     // @ts-expect-error
-    var _a = useStyles(props), dataStyles = _a.data, cellStyles = _a.styles;
-    return (jsxs("div", { className: clsx(className, 'cell', sizeClass && "cell_size_".concat(sizeClass), !isActive
-            ? fillClass && "fill_".concat(fillClass)
-            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
-            ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), !isActive
-            ? borderColorClass && "border-color_".concat(borderColorClass)
+    const { data: dataStyles, styles: cellStyles } = useStyles(props);
+    return (jsxs("div", { className: clsx(className, 'cell', sizeClass && `cell_size_${sizeClass}`, !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, !isActive
+            ? borderColorClass && `border-color_${borderColorClass}`
             : borderColorActiveClass &&
-                "border-color_active_".concat(borderColorActiveClass), !isActive
+                `border-color_active_${borderColorActiveClass}`, !isActive
             ? borderColorHoverClass &&
-                "border-color_hover_".concat(borderColorHoverClass)
+                `border-color_hover_${borderColorHoverClass}`
             : borderColorActiveHoverClass &&
-                "border-color_active_hover_".concat(borderColorActiveHoverClass), reverseClass && "cell_reverse_".concat(reverseClass), shapeClass && "cell_shape_".concat(shapeClass), widthClass && "width_".concat(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_".concat(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: "".concat(titleLabelAppearance, " ").concat(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: "".concat(valueLabelAppearance, " ").concat(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, { 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 })] }));
 }
 
 export { Cell, cellAppearance, cellConfig };

package/dist/components/Checkbox.js

@@ -2,8 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { T as Text } from '../Text_es_CwV9rjFD.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { T as Text } from '../Text_es_CnymlElo.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -20,7 +19,7 @@ import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 
-var checkboxAppearanceDefault = {
+const checkboxAppearanceDefault = {
     defaultPrimary: {
         fillCheckbox: 'surfaceSecondary',
         fillCheckboxActive: 'surfaceSecondary',
@@ -36,7 +35,7 @@ var checkboxAppearanceDefault = {
     },
 };
 
-var checkboxAppearanceDisabled = {
+const checkboxAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceFillDisabled',
         borderColor: 'errorBorderQuaternary',
@@ -56,7 +55,7 @@ var checkboxAppearanceDisabled = {
     },
 };
 
-var checkboxAppearanceError = {
+const checkboxAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         fillCheckbox: 'errorPrimary',
@@ -81,7 +80,7 @@ var checkboxAppearanceError = {
     },
 };
 
-var checkboxAppearanceRequire = {
+const checkboxAppearanceRequire = {
     requirePrimary: {
         fillCheckbox: 'warningTertiary',
         fillCheckboxActive: 'warningPrimary',
@@ -105,7 +104,7 @@ var checkboxAppearanceRequire = {
     },
 };
 
-var checkboxAppearanceSize = {
+const checkboxAppearanceSize = {
     sizeXL: {
         size: 'xl',
         labelTextSize: 'm',
@@ -128,7 +127,7 @@ var checkboxAppearanceSize = {
     },
 };
 
-var checkboxAppearanceStyle = {
+const checkboxAppearanceStyle = {
     solid: {
         borderColorCheckbox: 'none',
         borderColorCheckboxActive: 'none',
@@ -150,7 +149,7 @@ var checkboxAppearanceStyle = {
     },
 };
 
-var checkboxAppearanceSuccess = {
+const checkboxAppearanceSuccess = {
     successPrimary: {
         fillCheckbox: 'successPrimary',
         fillCheckboxActive: 'successPrimary',
@@ -174,39 +173,47 @@ var checkboxAppearanceSuccess = {
     },
 };
 
-var checkboxAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, checkboxAppearanceDefault), checkboxAppearanceError), checkboxAppearanceSuccess), checkboxAppearanceRequire), checkboxAppearanceDisabled), checkboxAppearanceSize), checkboxAppearanceStyle);
+const checkboxAppearance = {
+    ...checkboxAppearanceDefault,
+    ...checkboxAppearanceError,
+    ...checkboxAppearanceSuccess,
+    ...checkboxAppearanceRequire,
+    ...checkboxAppearanceDisabled,
+    ...checkboxAppearanceSize,
+    ...checkboxAppearanceStyle,
+};
 
-var checkboxConfig = {
+const checkboxConfig = {
     appearance: checkboxAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         checkboxConfig.appearance = appearanceConfig;
     },
 };
 function Checkbox(props) {
-    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, disabled = props.disabled, isDisabled = props.isDisabled, checked = props.checked, indeterminate = props.indeterminate, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, before = props.before, after = props.after, isActive = props.isActive, isChecked = props.isChecked, isSkeleton = props.isSkeleton, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
-    var appearanceConfig = useAppearanceConfig(appearance, checkboxConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillCheckboxActiveClass = propsGenerator.fillCheckboxActiveClass, fillCheckboxActiveHoverClass = propsGenerator.fillCheckboxActiveHoverClass, fillCheckboxClass = propsGenerator.fillCheckboxClass, fillCheckboxHoverClass = propsGenerator.fillCheckboxHoverClass, fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorCheckboxActiveClass = propsGenerator.borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass = propsGenerator.borderColorCheckboxActiveHoverClass, borderColorCheckboxClass = propsGenerator.borderColorCheckboxClass, borderColorCheckboxHoverClass = propsGenerator.borderColorCheckboxHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
-    return (jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_".concat(fillHoverClass), sizeClass && "checkbox_size_".concat(sizeClass), !checked
-            ? fillCheckboxClass && "checkbox_fill_".concat(fillCheckboxClass)
+    const { id, className, appearance, label, desc, disabled, isDisabled, checked, indeterminate, Tag = 'label', value, before, after, isActive, isChecked, isSkeleton, onBlur, onChange, onFocus, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, checkboxConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillCheckboxActiveClass, fillCheckboxActiveHoverClass, fillCheckboxClass, fillCheckboxHoverClass, fillCheckmarkClass, fillClass, fillHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass, borderColorCheckboxClass, borderColorCheckboxHoverClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, sizeClass && `checkbox_size_${sizeClass}`, !checked
+            ? fillCheckboxClass && `checkbox_fill_${fillCheckboxClass}`
             : fillCheckboxActiveClass &&
-                "checkbox_fill_active_".concat(fillCheckboxActiveClass), !checked
+                `checkbox_fill_active_${fillCheckboxActiveClass}`, !checked
             ? fillCheckboxHoverClass &&
-                "checkbox_fill_hover_".concat(fillCheckboxHoverClass)
+                `checkbox_fill_hover_${fillCheckboxHoverClass}`
             : fillCheckboxActiveHoverClass &&
-                "checkbox_fill_active_hover_".concat(fillCheckboxActiveHoverClass), !checked
+                `checkbox_fill_active_hover_${fillCheckboxActiveHoverClass}`, !checked
             ? borderColorCheckboxClass &&
-                "checkbox_border-color_".concat(borderColorCheckboxClass)
+                `checkbox_border-color_${borderColorCheckboxClass}`
             : borderColorCheckboxActiveClass &&
-                "checkbox_border-color_active_".concat(borderColorCheckboxActiveClass), !checked
+                `checkbox_border-color_active_${borderColorCheckboxActiveClass}`, !checked
             ? borderColorCheckboxHoverClass &&
-                "checkbox_border-color_hover_".concat(borderColorCheckboxHoverClass)
+                `checkbox_border-color_hover_${borderColorCheckboxHoverClass}`
             : borderColorCheckboxActiveHoverClass &&
-                "checkbox_border-color_active_hover_".concat(borderColorCheckboxActiveHoverClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxs("div", { className: "checkbox__item", children: [jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsx("div", { className: clsx('checkbox__state', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), children: "\u00A0" }), jsx("div", { className: clsx(!indeterminate
+                `checkbox_border-color_active_hover_${borderColorCheckboxActiveHoverClass}`, widthClass && `width_${widthClass}`, isSkeleton && `checkbox_skeleton`), htmlFor: Tag === 'label' && id, children: [before, jsxs("div", { className: "checkbox__item", children: [jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsx("div", { className: clsx('checkbox__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsx("div", { className: clsx(!indeterminate
                             ? 'checkbox__state-checkmark'
                             : 'checkbox__state-indeterminate', (checked || indeterminate) &&
                             fillCheckmarkClass &&
-                            "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsx(Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsx("div", { className: "checkbox__after", children: after })] }));
+                            `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsx(Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsx("div", { className: "checkbox__after", children: after })] }));
 }
 
 export { Checkbox, checkboxAppearance, checkboxConfig };