@itcase/ui 1.2.35 → 1.3.0

package/dist/cjs/hooks/useDeviceTargetClassGenerator.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
+var React = require('react');
+var camelCase = require('lodash/camelCase');
+var castArray = require('lodash/castArray');
+var UIContext = require('../context/UIContext.js');
+require('react/jsx-runtime');
+require('./useMediaQueries.js');
+require('react-responsive');
+
+function useDeviceTargetClassGenerator(componentProps, appearanceConfig) {
+    /** Generate a class depending on the user's device.
+     * Props:
+     *   - "componentProps" - "props" from component
+     *   - "appearanceConfig" - special appearance dictionary with styles presets
+     *
+     * Usage:
+     *   const appearanceConfig = (
+     *     appearance && componentConfig.appearance && componentConfig.appearance[appearance]
+     *   )
+     *   const classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig)
+     *   ---------
+     *   const fillClass = classGenerator.getClass('fill')
+     *   "fillClass" - is "surface-secondary"
+     *   ---------
+     *   const fillClass = classGenerator.getClass('fill', { prefix: 'fill_' })
+     *   "fillClass" - is "fill_surface-secondary"
+     *   ---------
+     *   const fillClass = classGenerator.fill / classGenerator.fillClass
+     *   "fill" / "fillClass" - is "surface-secondary"
+     *   ---------
+     *   const { fill / fillClass } = classGenerator
+     *   "fill" / "fillClass" - is "surface-secondary"
+     **/
+    var _a = UIContext.useUserDeviceContext(), isMobile = _a.isMobile, isTablet = _a.isTablet, isDesktop = _a.isDesktop;
+    var deviceTargetClassGenerator = React.useMemo(function () {
+        var classGenerator = {
+            getClass: function (propsKey, params) {
+                if (params === void 0) { params = {}; }
+                var _a = params.prefix, prefix = _a === void 0 ? '' : _a, _b = params.replace, replace = _b === void 0 ? [/([A-Z])/g, '-$1'] : _b;
+                // prettier-ignore
+                var deviceBasePart = ((isMobile && 'Mobile') ||
+                    (isTablet && 'Tablet') ||
+                    (isDesktop && 'Desktop') ||
+                    '');
+                var valueForDevice = componentProps["".concat(propsKey).concat(deviceBasePart)];
+                var valueDefault = componentProps[propsKey];
+                var appearanceForDevice = appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig["".concat(propsKey).concat(deviceBasePart)];
+                var appearanceDefault = appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig[propsKey];
+                // prettier-ignore
+                var targetClassValue = (
+                // Value for device from props is first priority
+                valueForDevice ||
+                    // Value without device from props is second priority
+                    valueDefault ||
+                    // Value for device from appearance config is third priority
+                    appearanceForDevice ||
+                    // Value without device from appearance config is last priority
+                    appearanceDefault);
+                if (targetClassValue) {
+                    var cleanClassValue = camelCase(String(targetClassValue));
+                    if (replace) {
+                        var replaceList = castArray(replace);
+                        cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
+                    }
+                    return "".concat(prefix).concat(cleanClassValue).toLowerCase();
+                }
+                // If target key not exists in props and appearance config - return empty class
+                return '';
+            },
+        };
+        var generatorProxyHandler = {
+            get: function (target, prop, receiver) {
+                var args = [];
+                for (var _i = 3; _i < arguments.length; _i++) {
+                    args[_i - 3] = arguments[_i];
+                }
+                if (typeof prop === 'string') {
+                    if (!Reflect.has(target, prop)) {
+                        if (prop.endsWith('Class')) {
+                            var shortProp = prop.substring(0, prop.lastIndexOf('Class'));
+                            return target.getClass(shortProp);
+                        }
+                        return target.getClass(prop);
+                    }
+                    return Reflect.get.apply(Reflect, tslib_es6.__spreadArray([target, prop, receiver], args, false));
+                }
+                return prop;
+            },
+        };
+        return new Proxy(classGenerator, generatorProxyHandler);
+    }, [componentProps, appearanceConfig, isDesktop, isMobile, isTablet]);
+    return deviceTargetClassGenerator;
+}
+
+exports.useDeviceTargetClassGenerator = useDeviceTargetClassGenerator;

package/dist/components/Accordion.js

@@ -3,12 +3,12 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useCallback, useState, useMemo } from 'react';
 import clsx from 'clsx';
 import castArray from 'lodash/castArray';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { icon16 } from '@itcase/icons/default';
-import { D as Divider } from '../Divider-Bdz66wfW.js';
-import { I as Icon } from '../Icon-21rsw8YW.js';
-import { T as Text } from '../Text-DGEJa_FL.js';
+import { D as Divider } from '../Divider-DBvDCUqP.js';
+import { I as Icon } from '../Icon-CZrDqG76.js';
+import { T as Text } from '../Text-JayJa3hj.js';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
@@ -17,9 +17,9 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Link-CeQuavin.js';
-import '../Tooltip-BsMYxi_I.js';
-import '../Title-Bp-4wxkT.js';
+import '../Link-_A9ZfNln.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Title-CHgrIarR.js';
 
 function AccordionItem(props) {
     var id = props.id, children = props.children, isExpanded = props.isExpanded, afterContent = props.afterContent, beforeContent = props.beforeContent, className = props.className, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, showDivider = props.showDivider, size = props.size, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClick = props.onClick;
@@ -33,45 +33,11 @@ function AccordionItem(props) {
         };
         onClick && onClick(thisItemData);
     }, [id, title, content, isExpanded, onClick]);
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var contentBorderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'contentBorderColor',
-    });
-    var titleBorderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'titleBorderColor',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var contentFillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'contentFill',
-    });
-    var titleFillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'titleFill',
-    });
-    var titleFillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'titleFillHover',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'accordion-item_shape_',
-        propsKey: 'shape',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var borderColorClass = classGenerator.borderColorClass, contentBorderColorClass = classGenerator.contentBorderColorClass, contentFillClass = classGenerator.contentFillClass, contentFillHoverClass = classGenerator.contentFillHoverClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass, titleBorderColorClass = classGenerator.titleBorderColorClass, titleFillClass = classGenerator.titleFillClass, titleFillHoverClass = classGenerator.titleFillHoverClass;
     // @ts-expect-error
     var styles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || jsx(Icon, { iconFill: iconFill, size: "16", SvgImage: icon16.ChevronDown }) }), beforeContent && beforeContent, showDivider && (jsx(Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize })), isExpanded && (jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass, contentFillClass, fillHoverClass), children: children ||
+    return (jsxs("div", { className: clsx('accordion-item', className, borderColorClass && "border-color_".concat(borderColorClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "accordion-item_shape_".concat(shapeClass), size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || jsx(Icon, { iconFill: iconFill, size: "16", SvgImage: icon16.ChevronDown }) }), beforeContent && beforeContent, showDivider && (jsx(Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize })), isExpanded && (jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass && "border-color_".concat(contentBorderColorClass), contentFillClass && "fill_".concat(contentFillClass), contentFillHoverClass && "fill_hover_".concat(contentFillHoverClass)), children: children ||
                     (content && (jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
 }
 
@@ -122,26 +88,8 @@ function Accordion(props) {
         }
         return [];
     }, [children, items, expandedItems, onClickAccordionItem]);
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var directionClass = useDeviceTargetClass(props, {
-        prefix: 'accordion_direction_',
-        propsKey: 'direction',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'accordion_shape_',
-        propsKey: 'shape',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var borderColorClass = classGenerator.borderColorClass, directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
     /*
      * paddingHorizontalWrapper="16px"
      * paddingHorizontal - styles  (horizontal will be parsed to left/right)
@@ -149,7 +97,7 @@ function Accordion(props) {
      */
     // @ts-expect-error
     var _c = useStyles(props), accordionStyles = _c.styles, accordionWrapperStyles = _c.wrapper;
-    return (jsx("div", { className: clsx(className, 'accordion', borderColorClass, directionClass, fillClass, shapeClass, widthClass), style: accordionStyles, children: jsx("div", { className: "accordion__wrapper", style: accordionWrapperStyles, children: accordionItemsList }) }));
+    return (jsx("div", { className: clsx(className, 'accordion', borderColorClass && "border-color_".concat(borderColorClass), directionClass && "accordion_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), shapeClass && "accordion_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass)), style: accordionStyles, children: jsx("div", { className: "accordion__wrapper", style: accordionWrapperStyles, children: accordionItemsList }) }));
 }
 
 export { Accordion, AccordionItem };

package/dist/components/Avatar.js

@@ -1,24 +1,24 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-21rsw8YW.js';
-import { I as Image } from '../Image-8t6PvsaZ.js';
-import { T as Text } from '../Text-DGEJa_FL.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
+import { I as Icon } from '../Icon-CZrDqG76.js';
+import { I as Image } from '../Image-Dx4AWHLO.js';
+import { T as Text } from '../Text-JayJa3hj.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../Tooltip-BsMYxi_I.js';
-import '../Title-Bp-4wxkT.js';
+import '../Link-_A9ZfNln.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Title-CHgrIarR.js';
 
 var avatarAppearance = {
     dev: {},
@@ -32,31 +32,16 @@ var avatarConfig = {
 };
 function Avatar(props) {
     var after = props.after, appearance = props.appearance, before = props.before, className = props.className, Dot = props.Dot, _a = props.firstName, firstName = _a === void 0 ? '' : _a, icon = props.icon, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconSrc = props.iconSrc, mode = props.mode, _b = props.secondName, secondName = _b === void 0 ? '' : _b, _c = props.size, size = _c === void 0 ? '96' : _c, src = props.src, _d = props.textColor, textColor = _d === void 0 ? 'surfaceTextTertiary' : _d, _e = props.textSize, textSize = _e === void 0 ? 'l' : _e, _f = props.textWeight, textWeight = _f === void 0 ? '600' : _f, type = props.type, onClick = props.onClick;
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'avatar_shape_',
-        propsKey: 'shape',
-    });
     var avatarChars = useMemo(function () {
         var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
         var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
         return "".concat(firstChar).concat(secondChar);
     }, [firstName, secondName]);
-    var appearanceConfig = appearance && avatarConfig.appearance && avatarConfig.appearance[appearance];
-    return (jsx("div", { className: clsx(className, 'avatar', shapeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                "avatar_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxs("div", { className: clsx('avatar__wrapper', fillClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                    "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                    "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase())), children: [before, src ? (jsx(Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsx(Text, { className: "avatar__name", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textWeight: textWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textWeight), children: avatarChars })), (icon || iconSrc) && (jsx(Icon, { className: "avatar__icon", fill: iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFill), fillHover: iconFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFillHover), fillSize: iconFillSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFillSize), iconFill: iconItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconItemFill), iconSize: iconSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconSize), imageSrc: iconSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconSrc), shape: iconShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconShape), SvgImage: icon || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.icon) })), Dot, after] }) }));
+    // @ts-expect-error
+    var appearanceConfig = avatarConfig.appearance && avatarConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass;
+    return (jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsx(Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsx(Text, { className: "avatar__name", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textWeight: textWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textWeight), children: avatarChars })), (icon || iconSrc) && (jsx(Icon, { className: "avatar__icon", fill: iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFill), fillHover: iconFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFillHover), fillSize: iconFillSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFillSize), iconFill: iconItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconItemFill), iconSize: iconSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconSize), imageSrc: iconSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconSrc), shape: iconShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconShape), SvgImage: icon || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.icon) })), Dot, after] }) }));
 }
 
 export { Avatar, avatarAppearance, avatarConfig };

package/dist/components/Badge.js

@@ -1,7 +1,8 @@
-export { B as Badge, b as badgeAppearance, a as badgeConfig } from '../Badge-MPtjfQS8.js';
+export { B as Badge, b as badgeAppearance, a as badgeConfig } from '../Badge-DMRagi5O.js';
 import 'react/jsx-runtime';
 import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -12,4 +13,4 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-DGEJa_FL.js';
+import '../Text-JayJa3hj.js';

package/dist/components/Breadcrumbs.js

@@ -3,11 +3,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import camelCase from 'lodash/camelCase';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-21rsw8YW.js';
-import { a as LinkWrapper } from '../Link-CeQuavin.js';
-import { T as Text } from '../Text-DGEJa_FL.js';
+import { I as Icon } from '../Icon-CZrDqG76.js';
+import { a as LinkWrapper } from '../Link-_A9ZfNln.js';
+import { T as Text } from '../Text-JayJa3hj.js';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
@@ -16,34 +16,20 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Tooltip-BsMYxi_I.js';
-import '../Title-Bp-4wxkT.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Title-CHgrIarR.js';
 
 function BreadcrumbsItem(props) {
-    var children = props.children, className = props.className, cursor = props.cursor, _a = props.set, set = _a === void 0 ? 'default' : _a, text = props.text, textSize = props.textSize, textColor = props.textColor, textColorHover = props.textColorHover, href = props.href, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, onClick = props.onClick;
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'breadcrumbs__item_shape_',
-        propsKey: 'shape',
-    });
-    var positionClass = useDeviceTargetClass(props, {
-        prefix: 'position_',
-        propsKey: 'position',
-    });
-    var underlineClass = useDeviceTargetClass(props, {
-        prefix: 'text-decoration_',
-        propsKey: 'underline',
-    });
+    var children = props.children, cursor = props.cursor, className = props.className, href = props.href, iconAfter = props.iconAfter, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, iconAfterSize = props.iconAfterSize, _a = props.set, set = _a === void 0 ? 'default' : _a, text = props.text, textColor = props.textColor, textColorHover = props.textColorHover, textSize = props.textSize, onClick = props.onClick;
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var fillClass = classGenerator.fillClass, positionClass = classGenerator.positionClass, shapeClass = classGenerator.shapeClass, underlineClass = classGenerator.underlineClass;
     // @ts-expect-error
     var itemStyles = useStyles(props).styles;
-    return (jsxs(LinkWrapper, { className: clsx(className, 'breadcrumbs__item', set && "breadcrumbs__item_set_".concat(set), fillClass, positionClass, shapeClass, underlineClass, onClick && (cursor || 'cursor_type_pointer')), DefaultComponent: "div", href: href, style: itemStyles, onClick: onClick, children: [jsx(Text, { className: "breadcrumbs__item-text", size: textSize, textColor: textColor, textColorHover: textColorHover, children: text || children }), iconAfter && (jsx(Icon, { bgFill: iconAfterBgFill, className: "breadcrumbs__item-icon", fill: iconAfterFill, size: iconAfterSize, SvgImage: iconAfter }))] }));
+    return (jsxs(LinkWrapper, { className: clsx(className, 'breadcrumbs__item', set && "breadcrumbs__item_set_".concat(set), fillClass && "fill_".concat(fillClass), positionClass && "position_".concat(positionClass), shapeClass && "breadcrumbs__item_shape_".concat(shapeClass), underlineClass && "text-decoration_".concat(underlineClass), onClick && (cursor || 'cursor_type_pointer')), DefaultComponent: "div", href: href, style: itemStyles, onClick: onClick, children: [jsx(Text, { className: "breadcrumbs__item-text", size: textSize, textColor: textColor, textColorHover: textColorHover, children: text || children }), iconAfter && (jsx(Icon, { className: "breadcrumbs__item-icon", fill: iconAfterFill, bgFill: iconAfterBgFill, size: iconAfterSize, SvgImage: iconAfter }))] }));
 }
 
 function Breadcrumbs(props) {
-    var breadcrumbsList = props.breadcrumbsList, children = props.children, className = props.className, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, itemUnderline = props.itemUnderline, itemTextColor = props.itemTextColor, itemTextColorHover = props.itemTextColorHover, set = props.set, otherProps = __rest(props, ["breadcrumbsList", "children", "className", "iconAfterSize", "iconAfterBgFill", "iconAfterFill", "itemUnderline", "itemTextColor", "itemTextColorHover", "set"]);
+    var children = props.children, breadcrumbsList = props.breadcrumbsList, className = props.className, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, iconAfterSize = props.iconAfterSize, itemTextColor = props.itemTextColor, itemTextColorHover = props.itemTextColorHover, itemUnderline = props.itemUnderline, set = props.set, otherProps = __rest(props, ["children", "breadcrumbsList", "className", "iconAfterBgFill", "iconAfterFill", "iconAfterSize", "itemTextColor", "itemTextColorHover", "itemUnderline", "set"]);
     var breadcrumbsItemsList = useMemo(function () {
         if (breadcrumbsList) {
             var itemProps_1 = Object.entries(otherProps).reduce(function (collectedProps, _a) {
@@ -55,38 +41,20 @@ function Breadcrumbs(props) {
                 }
                 return collectedProps;
             }, {});
-            return breadcrumbsList.map(function (item, i) { return (jsx(BreadcrumbsItem, __assign({ set: i + 1 !== breadcrumbsList.length ? 'default' : 'current', 
+            return breadcrumbsList.map(function (item, i) { return (jsx(BreadcrumbsItem, __assign({ href: item.href, 
                 // @ts-expect-error
-                iconAfter: i + 1 !== breadcrumbsList.length ? itemProps_1.iconAfter : null, iconAfterSize: iconAfterSize, iconAfterBgFill: iconAfterBgFill, iconAfterFill: iconAfterFill, text: item.text, textColor: itemTextColor, textColorHover: itemTextColorHover, underline: itemUnderline, href: item.href }, itemProps_1), "breadcrumbsItem_".concat(item.id || item.text))); });
+                iconAfter: i + 1 !== breadcrumbsList.length ? itemProps_1.iconAfter : null, iconAfterBgFill: iconAfterBgFill, iconAfterFill: iconAfterFill, iconAfterSize: iconAfterSize, text: item.text, textColor: itemTextColor, textColorHover: itemTextColorHover, underline: itemUnderline, set: i + 1 !== breadcrumbsList.length ? 'default' : 'current' }, itemProps_1), "breadcrumbsItem_".concat(item.id || item.text))); });
         }
         if (children) {
             return children;
         }
         return [];
     }, [children, breadcrumbsList, otherProps]);
-    var directionClass = useDeviceTargetClass(props, {
-        prefix: 'direction_',
-        propsKey: 'direction',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'breadcrumbs_shape_',
-        propsKey: 'shape',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var positionClass = useDeviceTargetClass(props, {
-        prefix: 'position_',
-        propsKey: 'position',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, positionClass = classGenerator.positionClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var breadcrumbsStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'breadcrumbs', widthClass, directionClass, fillClass, positionClass, shapeClass, set && "breadcrumbs_set_".concat(set)), style: breadcrumbsStyles, children: breadcrumbsItemsList }));
+    return (jsx("div", { className: clsx(className, 'breadcrumbs', widthClass && "width_".concat(widthClass), directionClass && "direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), positionClass && "position_".concat(positionClass), shapeClass && "breadcrumbs_shape_".concat(shapeClass), set && "breadcrumbs_set_".concat(set)), style: breadcrumbsStyles, children: breadcrumbsItemsList }));
 }
 Breadcrumbs.defaultProps = {
     direction: 'horizontal',

package/dist/components/Button.js

@@ -1,8 +1,9 @@
-export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button-f0zWwezF.js';
+export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button-CX3x7Z6Q.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -12,11 +13,10 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-21rsw8YW.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../Icon-CZrDqG76.js';
 import 'react-inlinesvg';
-import '../Link-CeQuavin.js';
-import '../Tooltip-BsMYxi_I.js';
-import '../Text-DGEJa_FL.js';
-import '../Title-Bp-4wxkT.js';
-import '../Loader-CuxFXcNG.js';
+import '../Link-_A9ZfNln.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Text-JayJa3hj.js';
+import '../Title-CHgrIarR.js';
+import '../Loader-K_DJmah6.js';

package/dist/components/Caption.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -14,21 +15,11 @@ import '../hooks/styleAttributes.js';
 
 function Caption(props) {
     var children = props.children, className = props.className;
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillGradientClass = useDeviceTargetClass(props, {
-        prefix: 'fill-gradient_',
-        propsKey: 'fillGradient',
-    });
-    var positionClass = useDeviceTargetClass(props, {
-        prefix: 'caption_position_',
-        propsKey: 'position',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var fillClass = classGenerator.fillClass, fillGradientClass = classGenerator.fillGradientClass, positionClass = classGenerator.positionClass;
     // @ts-expect-error
     var captionStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'caption', positionClass, fillClass, fillGradientClass), style: captionStyles, children: children }));
+    return (jsx("div", { className: clsx(className, 'caption', positionClass && "caption_position_".concat(positionClass), fillClass && "fill_".concat(fillClass), fillGradientClass && "fill-gradient_".concat(fillGradientClass)), style: captionStyles, children: children }));
 }
 
 export { Caption };

package/dist/components/Card.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Image } from '../Image-8t6PvsaZ.js';
-import { T as Text } from '../Text-DGEJa_FL.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
+import { I as Image } from '../Image-Dx4AWHLO.js';
+import { T as Text } from '../Text-JayJa3hj.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -16,15 +17,9 @@ import '../hooks/styleAttributes.js';
 
 function Card(props) {
     var children = props.children, className = props.className, image = props.image, _a = props.imageShape, imageShape = _a === void 0 ? 'rounded' : _a, size = props.size, src = props.src, text = props.text, _b = props.textColor, textColor = _b === void 0 ? 'surfaceTextPrimary' : _b, _c = props.textSize, textSize = _c === void 0 ? 'p' : _c, textTag = props.textTag, title = props.title, _d = props.titleColor, titleColor = _d === void 0 ? 'surfaceTextPrimary' : _d, _e = props.titleSize, titleSize = _e === void 0 ? 'h5' : _e, _f = props.titleTag, titleTag = _f === void 0 ? 'span' : _f, type = props.type, onClick = props.onClick;
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'card_shape_',
-        propsKey: 'shape',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'resize-horizontal_',
-        propsKey: 'width',
-    });
-    return (jsx("div", { className: clsx(className, 'card', shapeClass, size && "card_size_".concat(size), type && "card_type_".concat(type), widthClass), onClick: onClick, children: jsxs("div", { className: "card__wrapper", children: [image, src && jsx(Image, { className: "card__image", shape: imageShape, src: src }), jsxs("div", { className: "card__data", children: [title && (jsx(Text, { className: "card__data-title", size: titleSize, tag: titleTag, textColor: titleColor, children: title })), text && (jsx(Text, { className: "card__data-desc", size: textSize, tag: textTag, textColor: textColor, children: text }))] }), children] }) }));
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
+    return (jsx("div", { className: clsx(className, 'card', shapeClass && "card_shape_".concat(shapeClass), size && "card_size_".concat(size), type && "card_type_".concat(type), widthClass && "resize-horizontal_".concat(widthClass)), onClick: onClick, children: jsxs("div", { className: "card__wrapper", children: [image, src && jsx(Image, { className: "card__image", shape: imageShape, src: src }), jsxs("div", { className: "card__data", children: [title && (jsx(Text, { className: "card__data-title", size: titleSize, tag: titleTag, textColor: titleColor, children: title })), text && (jsx(Text, { className: "card__data-desc", size: textSize, tag: textTag, textColor: textColor, children: text }))] }), children] }) }));
 }
 
 export { Card };

package/dist/components/Cell.js

@@ -1,10 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-21rsw8YW.js';
-import { L as Label } from '../Label-Rq2ptfUd.js';
-import { T as Text } from '../Text-DGEJa_FL.js';
+import { I as Icon } from '../Icon-CZrDqG76.js';
+import { L as Label } from '../Label-DQyB2ThM.js';
+import { T as Text } from '../Text-JayJa3hj.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -14,69 +15,18 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
-import '../Link-CeQuavin.js';
-import '../Tooltip-BsMYxi_I.js';
-import '../Title-Bp-4wxkT.js';
+import '../Link-_A9ZfNln.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Title-CHgrIarR.js';
 
 function Cell(props) {
     var isActive = props.isActive, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isEqual = props.isEqual, after = props.after, before = props.before, className = props.className, mode = props.mode, reverse = props.reverse, set = props.set, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize, titleLabelTextSize = props.titleLabelTextSize, titleTag = props.titleTag, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize, valueLabelTextSize = props.valueLabelTextSize, valueTag = props.valueTag, valueTextAlign = props.valueTextAlign, valueTextColor = props.valueTextColor, valueTextSize = props.valueTextSize, valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var fillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'cell__wrapper_shape_',
-        propsKey: 'shape',
-    });
-    var bgFillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'bgFill',
-    });
-    var bgFillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'bgFillHover',
-    });
-    var bgFillActiveClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'bgFillActive',
-    });
-    var bgFillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'bgFillDisabled',
-    });
-    var bgShapeClass = useDeviceTargetClass(props, {
-        prefix: 'cell_shape_',
-        propsKey: 'bgShape',
-    });
-    var directionClass = useDeviceTargetClass(props, {
-        prefix: 'cell__wrapper_direction_',
-        propsKey: 'direction',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var gapClass = useDeviceTargetClass(props, {
-        prefix: 'gap_',
-        propsKey: 'gap',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var bgFillActiveClass = classGenerator.bgFillActiveClass, bgFillClass = classGenerator.bgFillClass, bgFillDisabledClass = classGenerator.bgFillDisabledClass, bgFillHoverClass = classGenerator.bgFillHoverClass, bgShapeClass = classGenerator.bgShapeClass, directionClass = classGenerator.directionClass, fillActiveClass = classGenerator.fillActiveClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, gapClass = classGenerator.gapClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var cellStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, gapClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass, fillClass, fillHoverClass, isActive && fillActiveClass, isDisabled && fillDisabledClass, shapeClass, isEqual && 'cell__wrapper-equal'), children: [title && (jsxs("div", { className: "cell__data", children: [jsx(Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsx(Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxs("div", { className: "cell__data", children: [jsx(Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsx(Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
+    return (jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled && bgFillDisabledClass && "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && "width_".concat(widthClass), gapClass && "gap_".concat(gapClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), 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), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled && fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxs("div", { className: "cell__data", children: [jsx(Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsx(Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxs("div", { className: "cell__data", children: [jsx(Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsx(Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
 }
 
 export { Cell };