@itcase/ui 1.2.20 → 1.2.22

package/dist/{Button-D1PnF1C-.js → Button-CDc_-QmL.js}

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Icon = require('./Icon-D-zjcPll.js');
+var Icon = require('./Icon-DTwrijaa.js');
 var Link = require('./Link-CqWzwh8V.js');
 var Loader = require('./Loader-fA11tUEJ.js');
 var Text = require('./Text-_YhyTsQ1.js');

package/dist/{Button--5mnRJi2.js → Button-CxJYh-_G.js}

@@ -3,7 +3,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { I as Icon } from './Icon-DD_Vyrw0.js';
+import { I as Icon } from './Icon-DfVed6hR.js';
 import { a as LinkWrapper } from './Link-CeQuavin.js';
 import { L as Loader } from './Loader-CJ8ZCdwy.js';
 import { T as Text } from './Text-CG3xPG27.js';

package/dist/{Icon-D-zjcPll.js → Icon-DTwrijaa.js}

@@ -7,7 +7,7 @@ var SVG = require('react-inlinesvg');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 var Link = require('./Link-CqWzwh8V.js');
-var Tooltip = require('./Tooltip-DkTKx9n-.js');
+var Tooltip = require('./Tooltip-BygRHezt.js');
 
 var iconConfig = {
     appearance: {},

package/dist/{Icon-DD_Vyrw0.js → Icon-DfVed6hR.js}

@@ -5,7 +5,7 @@ import SVG from 'react-inlinesvg';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 import { a as LinkWrapper } from './Link-CeQuavin.js';
-import { T as Tooltip } from './Tooltip-DJufHBiQ.js';
+import { T as Tooltip } from './Tooltip-CK7SVawj.js';
 
 var iconConfig = {
     appearance: {},

package/dist/{Label-BA_CnRBq.js → Label-B7HJUf4x.js}

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 import { T as Text } from './Text-CG3xPG27.js';
-import { T as Tooltip } from './Tooltip-DJufHBiQ.js';
+import { T as Tooltip } from './Tooltip-CK7SVawj.js';
 
 var labelConfig = {
     appearance: undefined,

package/dist/{Label-CpSzGRtr.js → Label-BT_PpHjb.js}

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 var Text = require('./Text-_YhyTsQ1.js');
-var Tooltip = require('./Tooltip-DkTKx9n-.js');
+var Tooltip = require('./Tooltip-BygRHezt.js');
 
 var labelConfig = {
     appearance: undefined,

package/dist/{Tooltip-DkTKx9n-.js → Tooltip-BygRHezt.js}

@@ -15,7 +15,7 @@ var tooltipConfig = {
     },
 };
 var Tooltip = React.forwardRef(function Tooltip(props, ref) {
-    var before = props.before, after = props.after, appearance = props.appearance, children = props.children, className = props.className, text = props.text, title = props.title, type = props.type, set = props.set, arrowPosition = props.arrowPosition, titleTextColor = props.titleTextColor, titleSize = props.titleSize, textColor = props.textColor, textSize = props.textSize, initialIsVisible = props.initialIsVisible;
+    var children = props.children, after = props.after, appearance = props.appearance, arrowPosition = props.arrowPosition, before = props.before, className = props.className, initialIsVisible = props.initialIsVisible, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize, title = props.title, alignPosition = props.alignPosition, titleSize = props.titleSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, type = props.type;
     var tooltipTimeoutHideRef = React.useRef(null);
     var tooltipTimeoutShowRef = React.useRef(null);
     var isTooltipCloseAnimationInProgressRef = React.useRef(false);
@@ -51,7 +51,7 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
         isTooltipCloseAnimationInProgressRef.current = false;
     }, []);
     // @ts-expect-error
-    React.useImperativeHandle(ref, function () { return ({ openTooltip: openTooltip, closeTooltip: closeTooltip }); }, [openTooltip, closeTooltip]);
+    React.useImperativeHandle(ref, function () { return ({ closeTooltip: closeTooltip, openTooltip: openTooltip }); }, [openTooltip, closeTooltip]);
     var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -101,11 +101,8 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
     var appearanceConfig = appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance];
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass), style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxRuntime.jsxs("div", { className: "tooltip__inner", children: [title && (jsxRuntime.jsx(Title.Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass), style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxRuntime.jsxs("div", { className: "tooltip__inner", children: [title && (jsxRuntime.jsx(Title.Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
 });
-Tooltip.defaultProps = {
-    initialIsVisible: null,
-};
 
 exports.Tooltip = Tooltip;
 exports.tooltipConfig = tooltipConfig;

package/dist/{Tooltip-DJufHBiQ.js → Tooltip-CK7SVawj.js}

@@ -13,7 +13,7 @@ var tooltipConfig = {
     },
 };
 var Tooltip = React.forwardRef(function Tooltip(props, ref) {
-    var before = props.before, after = props.after, appearance = props.appearance, children = props.children, className = props.className, text = props.text, title = props.title, type = props.type, set = props.set, arrowPosition = props.arrowPosition, titleTextColor = props.titleTextColor, titleSize = props.titleSize, textColor = props.textColor, textSize = props.textSize, initialIsVisible = props.initialIsVisible;
+    var children = props.children, after = props.after, appearance = props.appearance, arrowPosition = props.arrowPosition, before = props.before, className = props.className, initialIsVisible = props.initialIsVisible, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize, title = props.title, alignPosition = props.alignPosition, titleSize = props.titleSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, type = props.type;
     var tooltipTimeoutHideRef = useRef(null);
     var tooltipTimeoutShowRef = useRef(null);
     var isTooltipCloseAnimationInProgressRef = useRef(false);
@@ -49,7 +49,7 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
         isTooltipCloseAnimationInProgressRef.current = false;
     }, []);
     // @ts-expect-error
-    useImperativeHandle(ref, function () { return ({ openTooltip: openTooltip, closeTooltip: closeTooltip }); }, [openTooltip, closeTooltip]);
+    useImperativeHandle(ref, function () { return ({ closeTooltip: closeTooltip, openTooltip: openTooltip }); }, [openTooltip, closeTooltip]);
     var alignDirectionClass = useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -99,10 +99,7 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
     var appearanceConfig = appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance];
     return (jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass), style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxs("div", { className: "tooltip__inner", children: [title && (jsx(Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass), style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxs("div", { className: "tooltip__inner", children: [title && (jsx(Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight), children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
 });
-Tooltip.defaultProps = {
-    initialIsVisible: null,
-};
 
 export { Tooltip as T, tooltipConfig as t };

package/dist/cjs/components/Accordion.js

@@ -8,7 +8,7 @@ var castArray = require('lodash/castArray');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 var Divider = require('../../Divider-BjB5MD6u.js');
-var Icon = require('../../Icon-D-zjcPll.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -20,7 +20,7 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
 
 var ChevronDown16 = function ChevronDown16(props) {

package/dist/cjs/components/Avatar.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-D-zjcPll.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 var Image = require('../../Image-DrUlRMHa.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
@@ -20,7 +20,7 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
 
 function Avatar(props) {

package/dist/cjs/components/Breadcrumbs.js

@@ -7,7 +7,7 @@ var clsx = require('clsx');
 var camelCase = require('lodash/camelCase');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-D-zjcPll.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 var Link = require('../../Link-CqWzwh8V.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
@@ -19,7 +19,7 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
 
 function BreadcrumbsItem(props) {

package/dist/cjs/components/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button-D1PnF1C-.js');
+var Button = require('../../Button-CDc_-QmL.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -15,11 +15,11 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-D-zjcPll.js');
+require('../../Icon-DTwrijaa.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Text-_YhyTsQ1.js');
 require('../../Title-zwP6c2U2.js');
 require('../../Loader-fA11tUEJ.js');

package/dist/cjs/components/Cell.js

@@ -3,10 +3,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-D-zjcPll.js');
-var Label = require('../../Label-CpSzGRtr.js');
-var Text = require('../../Text-_YhyTsQ1.js');
 var useStyles = require('../hooks/useStyles.js');
+var Icon = require('../../Icon-DTwrijaa.js');
+var Label = require('../../Label-BT_PpHjb.js');
+var Text = require('../../Text-_YhyTsQ1.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -14,17 +14,17 @@ require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
 
 function Cell(props) {
-    var after = props.after, before = props.before, className = props.className, isActive = props.isActive, isDisabled = props.isDisabled, 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, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var isActive = props.isActive, isDisabled = props.isDisabled, 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.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -73,9 +73,13 @@ function Cell(props) {
         prefix: 'width_',
         propsKey: 'width',
     });
+    var gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'gap_',
+        propsKey: 'gap',
+    });
     // @ts-expect-error
     var cellStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.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, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), onClick: onClick, onMouseEnter: onMouseEnter, style: cellStyles, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass, fillClass, fillHoverClass, isActive && fillActiveClass, isDisabled && fillDisabledClass, shapeClass), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsxRuntime.jsx(Label.Label, { appearance: titleLabelAppearance, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsxRuntime.jsx(Label.Label, { appearance: valueLabelAppearance, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
+    return (jsxRuntime.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 && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass, fillClass, fillHoverClass, isActive && fillActiveClass, isDisabled && fillDisabledClass, shapeClass, isEqual && 'cell__wrapper-equal'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
 }
 Cell.defaultProps = {
     isDisabled: false,

package/dist/cjs/components/Choice.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-D-zjcPll.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 var Loader = require('../../Loader-fA11tUEJ.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
@@ -20,7 +20,7 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
 
 var choiceConfig = {
@@ -81,6 +81,14 @@ var Choice = React.forwardRef(function Choice(props, ref) {
         prefix: 'gap_',
         propsKey: 'gap',
     });
+    var rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'row-gap_',
+        propsKey: 'rowGap',
+    });
+    var columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'column-gap_',
+        propsKey: 'columnGap',
+    });
     // prettier-ignore
     var appearanceConfig = (appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'choice', shapeClass ||
@@ -89,7 +97,7 @@ var Choice = React.forwardRef(function Choice(props, ref) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
                 "border-color_".concat(appearanceConfig.borderColor)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsxRuntime.jsx("div", { className: clsx(className, 'choice__wrapper', gapClass, wrapClass), children: options.map(function (item) {
+                    .toLowerCase()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsxRuntime.jsx("div", { className: clsx(className, 'choice__wrapper', gapClass, rowGapClass, columnGapClass, wrapClass), children: options.map(function (item) {
                 // prettier-ignore
                 var isActive = typeof active === 'object'
                     ? String(item.value) === String(active.value)

package/dist/cjs/components/ContextMenu.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var Divider = require('../../Divider-BjB5MD6u.js');
-var Icon = require('../../Icon-D-zjcPll.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('react');
 require('lodash/castArray');
@@ -20,7 +20,7 @@ require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
 
 function ContextMenu(props) {

package/dist/cjs/components/CookiesWarning.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var Cookies = require('js-cookie');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Button = require('../../Button-D1PnF1C-.js');
+var Button = require('../../Button-CDc_-QmL.js');
 var Group = require('../../Group-B2oTJg0t.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
@@ -18,11 +18,11 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-D-zjcPll.js');
+require('../../Icon-DTwrijaa.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
 require('../../Loader-fA11tUEJ.js');
 

package/dist/cjs/components/DatePicker.js

@@ -7,10 +7,10 @@ var clsx = require('clsx');
 var DatePicker = require('react-datepicker');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Button = require('../../Button-D1PnF1C-.js');
-var Icon = require('../../Icon-D-zjcPll.js');
+var Button = require('../../Button-CDc_-QmL.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 var Input = require('../../Input-BSpFMsrf.js');
-var Label = require('../../Label-CpSzGRtr.js');
+var Label = require('../../Label-BT_PpHjb.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -24,7 +24,7 @@ require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../Loader-fA11tUEJ.js');
 require('react-inlinesvg');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
 
 function buildFormatLongFn(args) {

package/dist/cjs/components/Grid.js

@@ -150,9 +150,13 @@ function GridRow(props) {
         prefix: 'fill_hover_',
         propsKey: 'fillHover',
     });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
     // @ts-expect-error
     var gridRowStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx(Tag, { className: clsx(className, 'grid__row', fillClass, fillHoverClass), "data-tour": dataTour, htmlFor: htmlFor, id: id, style: gridRowStyles, onClick: onClick, children: children }));
+    return (jsxRuntime.jsx(Tag, { className: clsx(className, 'grid__row', fillClass, fillHoverClass, borderColorClass), "data-tour": dataTour, htmlFor: htmlFor, id: id, style: gridRowStyles, onClick: onClick, children: children }));
 }
 GridRow.defaultProps = {
     tag: 'div',

package/dist/cjs/components/Icon.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Icon = require('../../Icon-D-zjcPll.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -18,7 +18,7 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Text-_YhyTsQ1.js');
 require('../../Title-zwP6c2U2.js');
 

package/dist/cjs/components/InputPassword.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-D-zjcPll.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -18,7 +18,7 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Text-_YhyTsQ1.js');
 require('../../Title-zwP6c2U2.js');
 

package/dist/cjs/components/Label.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Label = require('../../Label-CpSzGRtr.js');
+var Label = require('../../Label-BT_PpHjb.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -16,7 +16,7 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Text-_YhyTsQ1.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
 
 

package/dist/cjs/components/LanguageSelector.js

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var Icon = require('../../Icon-D-zjcPll.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 require('react');
 require('react-inlinesvg');
 require('../hooks/useDeviceTargetClass.js');
@@ -18,7 +18,7 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Text-_YhyTsQ1.js');
 require('../../Title-zwP6c2U2.js');
 

package/dist/cjs/components/Pagination.js

@@ -7,7 +7,7 @@ var ceil = require('lodash/ceil');
 var ReactPaginate = require('react-paginate');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var DropdownItem = require('../../DropdownItem-D52wxY6I.js');
-var Icon = require('../../Icon-D-zjcPll.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -23,7 +23,7 @@ require('../../Divider-BjB5MD6u.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react-inlinesvg');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
 
 function Pagination(props) {

package/dist/cjs/components/Response.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Button = require('../../Button-D1PnF1C-.js');
+var Button = require('../../Button-CDc_-QmL.js');
 var Group = require('../../Group-B2oTJg0t.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 var Title = require('../../Title-zwP6c2U2.js');
@@ -19,10 +19,10 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-D-zjcPll.js');
+require('../../Icon-DTwrijaa.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Loader-fA11tUEJ.js');
 
 var responseConfig = {

package/dist/cjs/components/Search.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-D-zjcPll.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 var Scrollbar = require('../../Scrollbar-DVlIZzvz.js');
 require('lodash/castArray');
@@ -20,7 +20,7 @@ require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
 require('react-scrollbars-custom');
 

package/dist/cjs/components/Select.js

@@ -3,7 +3,7 @@
 var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Select = require('react-select');
-var Icon = require('../../Icon-D-zjcPll.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 var React = require('react');
 var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');
@@ -23,7 +23,7 @@ require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
 require('lodash/castArray');
 

package/dist/cjs/components/SiteMenu.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var UIContext = require('../context/UIContext.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-D-zjcPll.js');
+var Icon = require('../../Icon-DTwrijaa.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
@@ -19,7 +19,7 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DkTKx9n-.js');
+require('../../Tooltip-BygRHezt.js');
 require('../../Title-zwP6c2U2.js');
 
 function SiteMenu(props) {

package/dist/cjs/components/Tooltip.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Tooltip = require('../../Tooltip-DkTKx9n-.js');
+var Tooltip = require('../../Tooltip-BygRHezt.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/components/Accordion.js

@@ -6,7 +6,7 @@ import castArray from 'lodash/castArray';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { D as Divider } from '../Divider-U5UdY-ef.js';
-import { I as Icon } from '../Icon-DD_Vyrw0.js';
+import { I as Icon } from '../Icon-DfVed6hR.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -18,7 +18,7 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
-import '../Tooltip-DJufHBiQ.js';
+import '../Tooltip-CK7SVawj.js';
 import '../Title-BfSFPJtJ.js';
 
 var ChevronDown16 = function ChevronDown16(props) {

package/dist/components/Avatar.js

@@ -2,7 +2,7 @@ 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-DD_Vyrw0.js';
+import { I as Icon } from '../Icon-DfVed6hR.js';
 import { I as Image } from '../Image-8t6PvsaZ.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
@@ -18,7 +18,7 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-DJufHBiQ.js';
+import '../Tooltip-CK7SVawj.js';
 import '../Title-BfSFPJtJ.js';
 
 function Avatar(props) {