@itcase/ui 1.8.122 → 1.8.124

package/dist/cjs/components/Accordion.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
@@ -8,9 +7,9 @@ var castArray = require('lodash/castArray');
 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_Cz6IyOkb.js');
-var Divider = require('../../Divider_cjs_DUYtmwn2.js');
-var Text = require('../../Text_cjs_0EINiUq4.js');
+var Icon = require('../../Icon_cjs_DpFxIFv5.js');
+var Divider = require('../../Divider_cjs_DrmV2ezS.js');
+var Text = require('../../Text_cjs_BDTjOTVB.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
 require('lodash/upperFirst');
@@ -27,9 +26,9 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_C5UsZUiF.js');
+require('../../Link_cjs_qKXVfU8e.js');
 
-var accordionAppearanceSize = {
+const accordionAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         titleTextSize: 'h3',
@@ -80,7 +79,7 @@ var accordionAppearanceSize = {
     },
 };
 
-var accordionAppearanceStyle = {
+const accordionAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -94,7 +93,7 @@ var accordionAppearanceStyle = {
     },
 };
 
-var accordionAppearanceSurface = {
+const accordionAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
@@ -130,19 +129,23 @@ var accordionAppearanceSurface = {
     },
 };
 
-var accordionAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, accordionAppearanceSize), accordionAppearanceStyle), accordionAppearanceSurface);
+const accordionAppearance = {
+    ...accordionAppearanceSize,
+    ...accordionAppearanceStyle,
+    ...accordionAppearanceSurface,
+};
 
-var accordionItemConfig = {
+const accordionItemConfig = {
     appearance: accordionAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         accordionItemConfig.appearance = appearanceConfig;
     },
 };
 function AccordionItem(props) {
-    var id = props.id, className = props.className, appearance = props.appearance, title = props.title, afterContent = props.afterContent, beforeContent = props.beforeContent, content = props.content, isExpanded = props.isExpanded, onClick = props.onClick, children = props.children;
-    var onClickTitle = React.useCallback(function () {
+    const { id, className, appearance, title, afterContent, beforeContent, content, isExpanded, onClick, children, } = props;
+    const onClickTitle = React.useCallback(() => {
         // "!isExpanded" - is next state of expanded
-        var thisItemData = {
+        const thisItemData = {
             id: id,
             title: title,
             content: content,
@@ -150,27 +153,27 @@ function AccordionItem(props) {
         };
         onClick && onClick(thisItemData);
     }, [id, title, content, isExpanded, onClick]);
-    var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, accordionItemConfig);
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleWidthClass = propsGenerator.titleWidthClass, borderColorClass = propsGenerator.borderColorClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, contentTextColor = propsGenerator.contentTextColor, contentTextSize = propsGenerator.contentTextSize, contentTextWeight = propsGenerator.contentTextWeight, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, showDivider = propsGenerator.showDivider, sizeClass = propsGenerator.sizeClass, zeroGap = propsGenerator.zeroGap, zeroPadding = propsGenerator.zeroPadding;
-    var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, zeroPadding && 'accordion-item_zero-padding', zeroGap && 'accordion-item_zero-gap', borderColorClass && "border-color_".concat(borderColorClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), sizeClass && "accordion-item_size_".concat(sizeClass), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsxs("div", { className: clsx('accordion-item__header', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), titleWidthClass && "width_".concat(titleWidthClass), onClickTitle && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsxs("div", { className: "accordion-item__action", children: [badgeValue && (jsxRuntime.jsx(Icon.Badge, { className: "accordion-item__badge", appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (jsxRuntime.jsxs("div", { className: clsx('accordion-item__content'), children: [content && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content-inner', fillClass && "fill_".concat(fillClass)), children: jsxRuntime.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, accordionItemConfig);
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, titleBorderColorClass, titleFillClass, titleFillHoverClass, titleTextColor, titleTextSize, titleTextWeight, titleWidthClass, borderColorClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, contentTextColor, contentTextSize, contentTextWeight, dividerDirection, dividerFill, dividerSize, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, shapeStrengthClass, showDivider, sizeClass, zeroGap, zeroPadding, } = propsGenerator;
+    const { styles } = useStyles.useStyles(props);
+    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, zeroPadding && 'accordion-item_zero-padding', zeroGap && 'accordion-item_zero-gap', borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `accordion-item_size_${sizeClass}`, isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsxs("div", { className: clsx('accordion-item__header', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass && `border-color_${titleBorderColorClass}`, titleFillClass && `fill_${titleFillClass}`, titleFillHoverClass && `fill_hover_${titleFillHoverClass}`, titleWidthClass && `width_${titleWidthClass}`, onClickTitle && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsxs("div", { className: "accordion-item__action", children: [badgeValue && (jsxRuntime.jsx(Icon.Badge, { className: "accordion-item__badge", appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (jsxRuntime.jsxs("div", { className: clsx('accordion-item__content'), children: [content && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content-inner', fillClass && `fill_${fillClass}`), children: jsxRuntime.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
 }
 
 function Accordion(props) {
-    var className = props.className, appearance = props.appearance, _a = props.initial, initial = _a === void 0 ? [] : _a, items = props.items, isMultiple = props.isMultiple, onClickItem = props.onClickItem, children = props.children;
-    var _b = React.useState(function () { return castArray(initial); }), expandedItems = _b[0], setExpandedItems = _b[1];
-    var onClickAccordionItem = React.useCallback(function (targetItem) {
-        setExpandedItems(function (prevState) {
-            var isExpanded = prevState.find(function (id) { return id === targetItem.id; });
+    const { className, appearance, initial = [], items, isMultiple, onClickItem, children, } = props;
+    const [expandedItems, setExpandedItems] = React.useState(() => castArray(initial));
+    const onClickAccordionItem = React.useCallback((targetItem) => {
+        setExpandedItems((prevState) => {
+            const isExpanded = prevState.find((id) => id === targetItem.id);
             if (isMultiple) {
                 if (isExpanded) {
                     // ... without target id
-                    return prevState.filter(function (id) { return id !== targetItem.id; });
+                    return prevState.filter((id) => id !== targetItem.id);
                 }
                 else {
                     // ... with target id
-                    return tslib_es6.__spreadArray(tslib_es6.__spreadArray([], prevState, true), [targetItem.id], false);
+                    return [...prevState, targetItem.id];
                 }
             }
             else {
@@ -184,15 +187,15 @@ function Accordion(props) {
         });
         onClickItem && onClickItem(targetItem);
     }, [isMultiple, onClickItem]);
-    var accordionItemsList = React.useMemo(function () {
+    const accordionItemsList = React.useMemo(() => {
         if (items) {
-            return items.map(function (item, i) { return (jsxRuntime.jsx(AccordionItem, { id: item.id, appearance: appearance, title: item.title, content: item.content, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, "accordionItem_".concat(item.id || i + 1))); });
+            return items.map((item, i) => (jsxRuntime.jsx(AccordionItem, { id: item.id, appearance: appearance, title: item.title, content: item.content, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, `accordionItem_${item.id || i + 1}`)));
         }
         if (children) {
             // @ts-ignore
-            return React.Children.toArray(children).map(function (child) {
+            return React.Children.toArray(children).map((child) => {
                 if (React.isValidElement(child)) {
-                    var childID = child.props.id || child.key;
+                    const childID = child.props.id || child.key;
                     return React.cloneElement(child, {
                         id: childID,
                         isExpanded: expandedItems.includes(childID),
@@ -204,10 +207,10 @@ function Accordion(props) {
         }
         return [];
     }, [children, items, expandedItems, onClickAccordionItem]);
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, widthClass = propsGenerator.widthClass;
-    var accordionStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'accordion', borderColorClass && "border-color_".concat(borderColorClass), fillClass && "fill_".concat(fillClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), widthClass && "width_".concat(widthClass)), style: accordionStyles, children: accordionItemsList }));
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    const { fillClass, borderColorClass, shapeClass, shapeStrengthClass, widthClass, } = propsGenerator;
+    const { styles: accordionStyles } = useStyles.useStyles(props);
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'accordion', borderColorClass && `border-color_${borderColorClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`), style: accordionStyles, children: accordionItemsList }));
 }
 
 exports.Accordion = Accordion;

package/dist/cjs/components/Avatar.js

@@ -1,11 +1,10 @@
 'use strict';
 
-var Avatar = require('../../Avatar_cjs_kuE0Rueg.js');
+var Avatar = require('../../Avatar_cjs_mojzcWRL.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -19,15 +18,15 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Icon_cjs_Cz6IyOkb.js');
+require('../../Icon_cjs_DpFxIFv5.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Link_cjs_C5UsZUiF.js');
-require('../../Text_cjs_0EINiUq4.js');
-require('../../Image_cjs_B6YlGx8G.js');
+require('../../Link_cjs_qKXVfU8e.js');
+require('../../Text_cjs_BDTjOTVB.js');
+require('../../Image_cjs_CBDMUzv_.js');
 
 
 

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

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

package/dist/cjs/components/AvatarStack.js

@@ -5,10 +5,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 Avatar = require('../../Avatar_cjs_kuE0Rueg.js');
-var Group = require('../../Group_cjs_CsJ6ICKK.js');
-var Text = require('../../Text_cjs_0EINiUq4.js');
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
+var Avatar = require('../../Avatar_cjs_mojzcWRL.js');
+var Group = require('../../Group_cjs_DmfeUcFI.js');
+var Text = require('../../Text_cjs_BDTjOTVB.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -23,14 +22,14 @@ require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
-require('../../Icon_cjs_Cz6IyOkb.js');
+require('../../Icon_cjs_DpFxIFv5.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_C5UsZUiF.js');
-require('../../Image_cjs_B6YlGx8G.js');
+require('../../Link_cjs_qKXVfU8e.js');
+require('../../Image_cjs_CBDMUzv_.js');
 
-var avatarStackAppearanceSize = {
+const avatarStackAppearanceSize = {
     size16: {
         size: '16',
     },
@@ -51,18 +50,20 @@ var avatarStackAppearanceSize = {
     },
 };
 
-var avatarStackAppearance = tslib_es6.__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.useAppearanceConfig(appearance, avatarStackConfig);
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const { className, appearance, direction = 'horizontal', avatarAppearance, avatarsList, length = 3, isSkeleton, } = props;
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, avatarStackConfig);
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     // "size" is numeric
-    var size = propsGenerator.size;
-    var avatarStackStyles = useStyles.useStyles(props).styles;
-    return (avatarsList.length && (jsxRuntime.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 (jsxRuntime.jsx(Avatar.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 && (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] }) }))] })));
+    const { size } = propsGenerator;
+    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, { 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 && (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] }) }))] })));
 }
 
 exports.AvatarStack = AvatarStack;

package/dist/cjs/components/Badge.js

@@ -1,7 +1,6 @@
 'use strict';
 
-var Icon = require('../../Icon_cjs_Cz6IyOkb.js');
-require('../../tslib.es6_cjs_CCZ3TN_7.js');
+var Icon = require('../../Icon_cjs_DpFxIFv5.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -24,8 +23,8 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Link_cjs_C5UsZUiF.js');
-require('../../Text_cjs_0EINiUq4.js');
+require('../../Link_cjs_qKXVfU8e.js');
+require('../../Text_cjs_BDTjOTVB.js');
 
 
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var breadcrumbsListMock = [
+const breadcrumbsListMock = [
     {
         id: '1',
         key: 1,

package/dist/cjs/components/Breadcrumbs.js

@@ -6,10 +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_Cz6IyOkb.js');
-var Link = require('../../Link_cjs_C5UsZUiF.js');
-var Text = require('../../Text_cjs_0EINiUq4.js');
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
+var Icon = require('../../Icon_cjs_DpFxIFv5.js');
+var Link = require('../../Link_cjs_qKXVfU8e.js');
+var Text = require('../../Text_cjs_BDTjOTVB.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -28,7 +27,7 @@ require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
 
-var breadcrumbsAppearanceAccent = {
+const breadcrumbsAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
         labelTextColor: 'accentTextPrimary',
@@ -37,7 +36,7 @@ var breadcrumbsAppearanceAccent = {
     },
 };
 
-var breadcrumbsAppearanceSize = {
+const breadcrumbsAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         labelTextSize: 'xxl',
@@ -75,7 +74,7 @@ var breadcrumbsAppearanceSize = {
     },
 };
 
-var breadcrumbsAppearanceStyle = {
+const breadcrumbsAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -89,7 +88,7 @@ var breadcrumbsAppearanceStyle = {
     },
 };
 
-var breadcrumbsAppearanceSurface = {
+const breadcrumbsAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         labelTextColor: 'surfaceTextPrimary',
@@ -116,35 +115,40 @@ var breadcrumbsAppearanceSurface = {
     },
 };
 
-var breadcrumbsAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__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.useAppearanceConfig(appearance, breadcrumbsConfig);
-    var propsGenerator = useDevicePropsGenerator.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.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
-    var itemStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs(Link.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: [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 }))] }));
+    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')), 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 }))] }));
 }
 
 function Breadcrumbs(props) {
-    var className = props.className, appearance = props.appearance, breadcrumbsList = props.breadcrumbsList, isSkeleton = props.isSkeleton, children = props.children;
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var _a = propsGenerator.directionClass, directionClass = _a === void 0 ? 'horizontal' : _a, widthClass = propsGenerator.widthClass;
-    var breadcrumbsItemsList = React.useMemo(function () {
+    const { className, appearance, breadcrumbsList, isSkeleton, children } = props;
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    const { directionClass = 'horizontal', widthClass } = propsGenerator;
+    const breadcrumbsItemsList = React.useMemo(() => {
         if (breadcrumbsList) {
-            return breadcrumbsList.map(function (item, i) { return (jsxRuntime.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) => (jsxRuntime.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.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'breadcrumbs', widthClass && "width_".concat(widthClass), directionClass && "direction_".concat(directionClass)), style: breadcrumbsStyles, children: breadcrumbsItemsList }));
+    const { styles: breadcrumbsStyles } = useStyles.useStyles(props);
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'breadcrumbs', widthClass && `width_${widthClass}`, directionClass && `direction_${directionClass}`), style: breadcrumbsStyles, children: breadcrumbsItemsList }));
 }
 
 exports.Breadcrumbs = Breadcrumbs;

package/dist/cjs/components/Button.js

@@ -1,11 +1,10 @@
 'use strict';
 
-var Button = require('../../Button_cjs_i0Dn1pkl.js');
+var Button = require('../../Button_cjs_CZz8OjWi.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('../../Icon_cjs_Cz6IyOkb.js');
-require('../../tslib.es6_cjs_CCZ3TN_7.js');
+require('../../Icon_cjs_DpFxIFv5.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('@itcase/common');
@@ -25,9 +24,9 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Link_cjs_C5UsZUiF.js');
-require('../../Text_cjs_0EINiUq4.js');
-require('../../Loader_cjs_D3lnxPlI.js');
+require('../../Link_cjs_qKXVfU8e.js');
+require('../../Text_cjs_BDTjOTVB.js');
+require('../../Loader_cjs_DIDsIq3J.js');
 
 
 

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

@@ -2,7 +2,7 @@
 
 // "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/cjs/components/Cell.js

@@ -5,10 +5,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_Cz6IyOkb.js');
-var Label = require('../../Label_cjs_DMoaOoHi.js');
-var Text = require('../../Text_cjs_0EINiUq4.js');
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
+var Icon = require('../../Icon_cjs_DpFxIFv5.js');
+var Label = require('../../Label_cjs_C-x9blCL.js');
+var Text = require('../../Text_cjs_BDTjOTVB.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -26,9 +25,9 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_C5UsZUiF.js');
+require('../../Link_cjs_qKXVfU8e.js');
 
-var cellAppearanceSize = {
+const cellAppearanceSize = {
     sizeXL: {
         size: 'xl',
         titleLabelAppearanceSize: 'sizeXS',
@@ -87,7 +86,7 @@ var cellAppearanceSize = {
     },
 };
 
-var cellAppearanceStyle = {
+const cellAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -101,7 +100,7 @@ var cellAppearanceStyle = {
     },
 };
 
-var cellAppearanceSurface = {
+const cellAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
@@ -156,33 +155,37 @@ var cellAppearanceSurface = {
     },
 };
 
-var cellAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__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.useAppearanceConfig(appearance, cellConfig);
-    var propsGenerator = useDevicePropsGenerator.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.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
-    var _a = useStyles.useStyles(props), dataStyles = _a.data, cellStyles = _a.styles;
-    return (jsxRuntime.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.useStyles(props);
+    return (jsxRuntime.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 && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(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: "".concat(titleLabelAppearance, " ").concat(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: "".concat(valueLabelAppearance, " ").concat(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, { 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 })] }));
 }
 
 exports.Cell = Cell;