@itcase/ui 1.2.22 → 1.2.23

package/dist/{Button-CxJYh-_G.js → Button-BLcVDStV.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-DfVed6hR.js';
+import { I as Icon } from './Icon-DQWyj5EO.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/{Button-CDc_-QmL.js → Button-DawNa85U.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-DTwrijaa.js');
+var Icon = require('./Icon-BeHO7N79.js');
 var Link = require('./Link-CqWzwh8V.js');
 var Loader = require('./Loader-fA11tUEJ.js');
 var Text = require('./Text-_YhyTsQ1.js');

package/dist/{Icon-DTwrijaa.js → Icon-BeHO7N79.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-BygRHezt.js');
+var Tooltip = require('./Tooltip-xGmgUzGr.js');
 
 var iconConfig = {
     appearance: {},
@@ -16,8 +16,9 @@ var iconConfig = {
     },
 };
 var Icon = React.forwardRef(function Icon(props, ref) {
-    var _a = React.useState(false), isTooltipVisible = _a[0], setIsTooltipVisible = _a[1];
-    var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick;
+    // TODO: Tooltip doesn't work that anymore
+    // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
+    var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
     // const svgSizes = useMemo(() => {
     //   const sizes: {
     //     width?: string
@@ -106,7 +107,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
     });
     // @ts-expect-error
     var iconStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: function () { return setIsTooltipVisible(true); }, onMouseLeave: function () { return setIsTooltipVisible(false); }, children: jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx(link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [before, ImageComponent, after, Badge, isTooltipVisible && showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }) }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx(link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [before, ImageComponent, after, Badge, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }) }));
 });
 var removeFillStroke = function (code) {
     return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');

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

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import clsx from 'clsx';
 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-CK7SVawj.js';
+import { T as Tooltip } from './Tooltip-aaDRYNWY.js';
 
 var iconConfig = {
     appearance: {},
@@ -14,8 +14,9 @@ var iconConfig = {
     },
 };
 var Icon = React.forwardRef(function Icon(props, ref) {
-    var _a = useState(false), isTooltipVisible = _a[0], setIsTooltipVisible = _a[1];
-    var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick;
+    // TODO: Tooltip doesn't work that anymore
+    // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
+    var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
     // const svgSizes = useMemo(() => {
     //   const sizes: {
     //     width?: string
@@ -104,7 +105,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
     });
     // @ts-expect-error
     var iconStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: function () { return setIsTooltipVisible(true); }, onMouseLeave: function () { return setIsTooltipVisible(false); }, children: jsxs(LinkWrapper, { className: clsx(link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [before, ImageComponent, after, Badge, isTooltipVisible && showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }) }));
+    return (jsx("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: jsxs(LinkWrapper, { className: clsx(link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [before, ImageComponent, after, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }) }));
 });
 var removeFillStroke = function (code) {
     return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');

package/dist/{Label-BT_PpHjb.js → Label-B0O9q0E4.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-BygRHezt.js');
+var Tooltip = require('./Tooltip-xGmgUzGr.js');
 
 var labelConfig = {
     appearance: undefined,

package/dist/{Label-B7HJUf4x.js → Label-D8DRdqad.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-CK7SVawj.js';
+import { T as Tooltip } from './Tooltip-aaDRYNWY.js';
 
 var labelConfig = {
     appearance: undefined,

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

@@ -13,11 +13,14 @@ var tooltipConfig = {
     },
 };
 var Tooltip = React.forwardRef(function Tooltip(props, ref) {
-    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 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, _a = props.openTimeoutDelay, openTimeoutDelay = _a === void 0 ? 500 : _a, _b = props.closeTimeoutDelay, closeTimeoutDelay = _b === void 0 ? 250 : _b;
+    var tooltipElementRef = useRef(null);
     var tooltipTimeoutHideRef = useRef(null);
     var tooltipTimeoutShowRef = useRef(null);
     var isTooltipCloseAnimationInProgressRef = useRef(false);
-    var _a = useState(initialIsVisible), isTooltipVisible = _a[0], setIsTooltipVisible = _a[1];
+    // TODO: rename to open?
+    var _c = useState(initialIsVisible), isTooltipVisible = _c[0], setIsTooltipVisible = _c[1];
+    // TODO: or rename to show/hide?
     var openTooltip = useCallback(function () {
         if (!isTooltipCloseAnimationInProgressRef.current) {
             if (tooltipTimeoutHideRef.current) {
@@ -25,9 +28,9 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
             }
             tooltipTimeoutShowRef.current = setTimeout(function () {
                 setIsTooltipVisible(true);
-            }, 500);
+            }, openTimeoutDelay);
         }
-    }, []);
+    }, [openTimeoutDelay]);
     var closeTooltip = useCallback(function () {
         if (tooltipTimeoutShowRef.current) {
             clearTimeout(tooltipTimeoutShowRef.current);
@@ -43,13 +46,20 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
                 }
                 return newState;
             });
-        }, 250);
-    }, []);
+        }, closeTimeoutDelay);
+    }, [closeTimeoutDelay]);
     var onAnimationEnd = useCallback(function () {
         isTooltipCloseAnimationInProgressRef.current = false;
     }, []);
-    // @ts-expect-error
-    useImperativeHandle(ref, function () { return ({ closeTooltip: closeTooltip, openTooltip: openTooltip }); }, [openTooltip, closeTooltip]);
+    useImperativeHandle(ref, function () { return ({
+        get tooltipElement() {
+            return tooltipElementRef.current;
+        },
+        isTooltipVisible: isTooltipVisible,
+        closeTooltip: closeTooltip,
+        openTooltip: openTooltip,
+    }); }, [isTooltipVisible, openTooltip, closeTooltip]);
+    /* STYLES */
     var alignDirectionClass = useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -96,10 +106,11 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
     });
     // @ts-expect-error
     var tooltipStyles = useStyles(props).styles;
-    var appearanceConfig = appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance];
+    // prettier-ignore
+    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, 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] }));
+                "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, ref: tooltipElementRef, 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] }));
 });
 
 export { Tooltip as T, tooltipConfig as t };

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

@@ -15,11 +15,14 @@ var tooltipConfig = {
     },
 };
 var Tooltip = React.forwardRef(function Tooltip(props, ref) {
-    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 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, _a = props.openTimeoutDelay, openTimeoutDelay = _a === void 0 ? 500 : _a, _b = props.closeTimeoutDelay, closeTimeoutDelay = _b === void 0 ? 250 : _b;
+    var tooltipElementRef = React.useRef(null);
     var tooltipTimeoutHideRef = React.useRef(null);
     var tooltipTimeoutShowRef = React.useRef(null);
     var isTooltipCloseAnimationInProgressRef = React.useRef(false);
-    var _a = React.useState(initialIsVisible), isTooltipVisible = _a[0], setIsTooltipVisible = _a[1];
+    // TODO: rename to open?
+    var _c = React.useState(initialIsVisible), isTooltipVisible = _c[0], setIsTooltipVisible = _c[1];
+    // TODO: or rename to show/hide?
     var openTooltip = React.useCallback(function () {
         if (!isTooltipCloseAnimationInProgressRef.current) {
             if (tooltipTimeoutHideRef.current) {
@@ -27,9 +30,9 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
             }
             tooltipTimeoutShowRef.current = setTimeout(function () {
                 setIsTooltipVisible(true);
-            }, 500);
+            }, openTimeoutDelay);
         }
-    }, []);
+    }, [openTimeoutDelay]);
     var closeTooltip = React.useCallback(function () {
         if (tooltipTimeoutShowRef.current) {
             clearTimeout(tooltipTimeoutShowRef.current);
@@ -45,13 +48,20 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
                 }
                 return newState;
             });
-        }, 250);
-    }, []);
+        }, closeTimeoutDelay);
+    }, [closeTimeoutDelay]);
     var onAnimationEnd = React.useCallback(function () {
         isTooltipCloseAnimationInProgressRef.current = false;
     }, []);
-    // @ts-expect-error
-    React.useImperativeHandle(ref, function () { return ({ closeTooltip: closeTooltip, openTooltip: openTooltip }); }, [openTooltip, closeTooltip]);
+    React.useImperativeHandle(ref, function () { return ({
+        get tooltipElement() {
+            return tooltipElementRef.current;
+        },
+        isTooltipVisible: isTooltipVisible,
+        closeTooltip: closeTooltip,
+        openTooltip: openTooltip,
+    }); }, [isTooltipVisible, openTooltip, closeTooltip]);
+    /* STYLES */
     var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -98,10 +108,11 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
     });
     // @ts-expect-error
     var tooltipStyles = useStyles.useStyles(props).styles;
-    var appearanceConfig = appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance];
+    // prettier-ignore
+    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, 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] }));
+                "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, ref: tooltipElementRef, 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] }));
 });
 
 exports.Tooltip = Tooltip;

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-DTwrijaa.js');
+var Icon = require('../../Icon-BeHO7N79.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.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-DTwrijaa.js');
+var Icon = require('../../Icon-BeHO7N79.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.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-DTwrijaa.js');
+var Icon = require('../../Icon-BeHO7N79.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.js');
 require('../../Title-zwP6c2U2.js');
 
 function BreadcrumbsItem(props) {

package/dist/cjs/components/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button-CDc_-QmL.js');
+var Button = require('../../Button-DawNa85U.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-DTwrijaa.js');
+require('../../Icon-BeHO7N79.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.js');
 require('../../Text-_YhyTsQ1.js');
 require('../../Title-zwP6c2U2.js');
 require('../../Loader-fA11tUEJ.js');

package/dist/cjs/components/Cell.js

@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-DTwrijaa.js');
-var Label = require('../../Label-BT_PpHjb.js');
+var Icon = require('../../Icon-BeHO7N79.js');
+var Label = require('../../Label-B0O9q0E4.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.js');
 require('../../Title-zwP6c2U2.js');
 
 function Cell(props) {

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-DTwrijaa.js');
+var Icon = require('../../Icon-BeHO7N79.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.js');
 require('../../Title-zwP6c2U2.js');
 
 var choiceConfig = {

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-DTwrijaa.js');
+var Icon = require('../../Icon-BeHO7N79.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.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-CDc_-QmL.js');
+var Button = require('../../Button-DawNa85U.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-DTwrijaa.js');
+require('../../Icon-BeHO7N79.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.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-CDc_-QmL.js');
-var Icon = require('../../Icon-DTwrijaa.js');
+var Button = require('../../Button-DawNa85U.js');
+var Icon = require('../../Icon-BeHO7N79.js');
 var Input = require('../../Input-BSpFMsrf.js');
-var Label = require('../../Label-BT_PpHjb.js');
+var Label = require('../../Label-B0O9q0E4.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.js');
 require('../../Title-zwP6c2U2.js');
 
 function buildFormatLongFn(args) {

package/dist/cjs/components/Icon.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Icon = require('../../Icon-DTwrijaa.js');
+var Icon = require('../../Icon-BeHO7N79.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.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-DTwrijaa.js');
+var Icon = require('../../Icon-BeHO7N79.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.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-BT_PpHjb.js');
+var Label = require('../../Label-B0O9q0E4.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.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-DTwrijaa.js');
+var Icon = require('../../Icon-BeHO7N79.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.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-DTwrijaa.js');
+var Icon = require('../../Icon-BeHO7N79.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.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-CDc_-QmL.js');
+var Button = require('../../Button-DawNa85U.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-DTwrijaa.js');
+require('../../Icon-BeHO7N79.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.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-DTwrijaa.js');
+var Icon = require('../../Icon-BeHO7N79.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.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-DTwrijaa.js');
+var Icon = require('../../Icon-BeHO7N79.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.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-DTwrijaa.js');
+var Icon = require('../../Icon-BeHO7N79.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-BygRHezt.js');
+require('../../Tooltip-xGmgUzGr.js');
 require('../../Title-zwP6c2U2.js');
 
 function SiteMenu(props) {

package/dist/cjs/components/Tooltip.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Tooltip = require('../../Tooltip-BygRHezt.js');
+var Tooltip = require('../../Tooltip-xGmgUzGr.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-DfVed6hR.js';
+import { I as Icon } from '../Icon-DQWyj5EO.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-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.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-DfVed6hR.js';
+import { I as Icon } from '../Icon-DQWyj5EO.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-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 
 function Avatar(props) {

package/dist/components/Breadcrumbs.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import camelCase from 'lodash/camelCase';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-DfVed6hR.js';
+import { I as Icon } from '../Icon-DQWyj5EO.js';
 import { a as LinkWrapper } from '../Link-CeQuavin.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
@@ -17,7 +17,7 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 
 function BreadcrumbsItem(props) {

package/dist/components/Button.js

@@ -1,4 +1,4 @@
-export { B as Button, b as buttonConfig } from '../Button-CxJYh-_G.js';
+export { B as Button, b as buttonConfig } from '../Button-BLcVDStV.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -13,11 +13,11 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-DfVed6hR.js';
+import '../Icon-DQWyj5EO.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Text-CG3xPG27.js';
 import '../Title-BfSFPJtJ.js';
 import '../Loader-CJ8ZCdwy.js';

package/dist/components/Cell.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-DfVed6hR.js';
-import { L as Label } from '../Label-B7HJUf4x.js';
+import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { L as Label } from '../Label-D8DRdqad.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'react';
 import 'lodash/castArray';
@@ -18,7 +18,7 @@ import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 
 function Cell(props) {

package/dist/components/Choice.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-DfVed6hR.js';
+import { I as Icon } from '../Icon-DQWyj5EO.js';
 import { L as Loader } from '../Loader-CJ8ZCdwy.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-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 
 var choiceConfig = {

package/dist/components/ContextMenu.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { D as Divider } from '../Divider-U5UdY-ef.js';
-import { I as Icon } from '../Icon-DfVed6hR.js';
+import { I as Icon } from '../Icon-DQWyj5EO.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'react';
 import 'lodash/castArray';
@@ -18,7 +18,7 @@ import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 
 function ContextMenu(props) {

package/dist/components/CookiesWarning.js

@@ -3,7 +3,7 @@ import { useRef, useMemo, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { B as Button } from '../Button-CxJYh-_G.js';
+import { B as Button } from '../Button-BLcVDStV.js';
 import { G as Group } from '../Group-CVUfaHaS.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
@@ -16,11 +16,11 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-DfVed6hR.js';
+import '../Icon-DQWyj5EO.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 import '../Loader-CJ8ZCdwy.js';
 

package/dist/components/DatePicker.js

@@ -5,10 +5,10 @@ import clsx from 'clsx';
 import DatePicker from 'react-datepicker';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Button } from '../Button-CxJYh-_G.js';
-import { I as Icon } from '../Icon-DfVed6hR.js';
+import { B as Button } from '../Button-BLcVDStV.js';
+import { I as Icon } from '../Icon-DQWyj5EO.js';
 import { I as Input } from '../Input-UkM-ag48.js';
-import { L as Label } from '../Label-B7HJUf4x.js';
+import { L as Label } from '../Label-D8DRdqad.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -22,7 +22,7 @@ import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../Loader-CJ8ZCdwy.js';
 import 'react-inlinesvg';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 
 function buildFormatLongFn(args) {

package/dist/components/Icon.js

@@ -1,4 +1,4 @@
-export { I as Icon, i as iconConfig } from '../Icon-DfVed6hR.js';
+export { I as Icon, i as iconConfig } from '../Icon-DQWyj5EO.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -16,6 +16,6 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Text-CG3xPG27.js';
 import '../Title-BfSFPJtJ.js';

package/dist/components/InputPassword.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-DfVed6hR.js';
+import { I as Icon } from '../Icon-DQWyj5EO.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -16,7 +16,7 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Text-CG3xPG27.js';
 import '../Title-BfSFPJtJ.js';
 

package/dist/components/Label.js

@@ -1,4 +1,4 @@
-export { L as Label, l as labelConfig } from '../Label-B7HJUf4x.js';
+export { L as Label, l as labelConfig } from '../Label-D8DRdqad.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -14,5 +14,5 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Text-CG3xPG27.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';

package/dist/components/LanguageSelector.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon-DfVed6hR.js';
+import { I as Icon } from '../Icon-DQWyj5EO.js';
 import 'react';
 import 'react-inlinesvg';
 import '../hooks/useDeviceTargetClass.js';
@@ -16,7 +16,7 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Text-CG3xPG27.js';
 import '../Title-BfSFPJtJ.js';
 

package/dist/components/Pagination.js

@@ -5,7 +5,7 @@ import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { D as Dropdown, a as DropdownItem } from '../DropdownItem-D0dOP4NL.js';
-import { I as Icon } from '../Icon-DfVed6hR.js';
+import { I as Icon } from '../Icon-DQWyj5EO.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -21,7 +21,7 @@ import '../Divider-U5UdY-ef.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 
 function Pagination(props) {

package/dist/components/Response.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Button } from '../Button-CxJYh-_G.js';
+import { B as Button } from '../Button-BLcVDStV.js';
 import { G as Group } from '../Group-CVUfaHaS.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import { T as Title } from '../Title-BfSFPJtJ.js';
@@ -17,10 +17,10 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-DfVed6hR.js';
+import '../Icon-DQWyj5EO.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Loader-CJ8ZCdwy.js';
 
 var responseConfig = {

package/dist/components/Search.js

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-DfVed6hR.js';
+import { I as Icon } from '../Icon-DQWyj5EO.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import { S as Scrollbar } from '../Scrollbar-CrGXCZ_F.js';
 import 'lodash/castArray';
@@ -18,7 +18,7 @@ import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 import 'react-scrollbars-custom';
 

package/dist/components/Select.js

@@ -1,7 +1,7 @@
 import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon } from '../Icon-DfVed6hR.js';
+import { I as Icon } from '../Icon-DQWyj5EO.js';
 import React, { useMemo, useRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
@@ -21,7 +21,7 @@ import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 import 'lodash/castArray';
 

package/dist/components/SiteMenu.js

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { useSiteMenuContext } from '../context/UIContext.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-DfVed6hR.js';
+import { I as Icon } from '../Icon-DQWyj5EO.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
@@ -17,7 +17,7 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 
 function SiteMenu(props) {

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, t as tooltipConfig } from '../Tooltip-CK7SVawj.js';
+export { T as Tooltip, t as tooltipConfig } from '../Tooltip-aaDRYNWY.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/types/components/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IIconConfig, IIconProps } from '../Icon/Icon.interface';
-declare const iconConfig: IIconConfig;
-declare const Icon: React.ForwardRefExoticComponent<IIconProps & React.RefAttributes<HTMLDivElement>>;
+import type { iIconConfig, iIconProps } from '../Icon/Icon.interface';
+declare const iconConfig: iIconConfig;
+declare const Icon: React.ForwardRefExoticComponent<iIconProps & React.RefAttributes<HTMLDivElement>>;
 export { Icon, iconConfig };

package/dist/types/components/Icon/Icon.interface.d.ts

@@ -1,8 +1,8 @@
-import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
-import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { alignmentPropsType, borderColorHoverPropsType, borderTypePropsType, iconFillSizePropsType, iconSizePropsType, tBorderColorProps, tBorderWidthProps, tFillHoverProps, tFillProps, tItemColorProps, titleSizePropsType, tShapeProps, tTextColorHoverProps, tTextColorProps, tTextSizeProps } from '../../types';
-import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
-export interface IIconThemeColor {
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import type { iStyleAttributes } from '../../hooks/styleAttributes.interface';
+import type { alignmentPropsType, borderColorHoverPropsType, borderTypePropsType, iconFillSizePropsType, iconSizePropsType, tBorderColorProps, tBorderWidthProps, tFillHoverProps, tFillProps, tItemColorProps, titleSizePropsType, tShapeProps, tTextColorHoverProps, tTextColorProps, tTextSizeProps } from '../../types';
+import type { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
+interface iIconThemeColor {
     alignment?: alignmentPropsType;
     bgFill?: tFillProps;
     borderColor?: tBorderColorProps;
@@ -35,15 +35,14 @@ export interface IIconThemeColor {
     shape?: tShapeProps;
     size?: iconSizePropsType;
 }
-type appearanceKeysType = {} & tAppearanceKeysDefault;
-export type iconAppearanceType = {
-    [key in appearanceKeysType]?: IIconThemeColor;
+type tIconAppearance = {
+    [key in tAppearanceKeysDefault]?: iIconThemeColor;
 };
-export interface IIconConfig {
-    appearance: iconAppearanceType | undefined;
-    setAppearance: (newComponent: iconAppearanceType) => void;
+interface iIconConfig {
+    appearance: tIconAppearance | undefined;
+    setAppearance: (newComponent: tIconAppearance) => void;
 }
-export interface IIconProps extends IIconThemeColor, iStyleAttributes {
+interface iIconProps extends iIconThemeColor, iStyleAttributes {
     id?: number | string;
     after?: ReactNode;
     Badge?: ReactNode;
@@ -80,7 +79,7 @@ export interface IIconProps extends IIconThemeColor, iStyleAttributes {
     style?: CSSProperties;
     SvgImage?: any;
     target?: string;
-    tooltipAppearance?: appearanceKeysType;
+    tooltipAppearance?: tAppearanceKeysDefault;
     tooltipContent?: ReactNode;
     tooltipText?: string;
     tooltipTextSize?: tTextSizeProps;
@@ -90,5 +89,7 @@ export interface IIconProps extends IIconThemeColor, iStyleAttributes {
     width?: string;
     isDisabled?: boolean;
     onClick?: MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
 }
-export {};
+export type { iIconThemeColor, tIconAppearance, iIconConfig, iIconProps };

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ITooltipConfig, ITooltipProps } from './Tooltip.interface';
 declare const tooltipConfig: ITooltipConfig;
-declare const Tooltip: React.ForwardRefExoticComponent<ITooltipProps & React.RefAttributes<HTMLDivElement>>;
+declare const Tooltip: React.ForwardRefExoticComponent<ITooltipProps & React.RefAttributes<any>>;
 export { Tooltip, tooltipConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.2.22",
+  "version": "1.2.23",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -113,17 +113,17 @@
     "react-responsive": "^10.0.0",
     "react-scroll": "^1.9.0",
     "react-scrollbars-custom": "^4.1.1",
-    "react-select": "^5.8.1",
+    "react-select": "^5.8.2",
     "swiper": "^11.1.14",
-    "uuid": "^10.0.0"
+    "uuid": "^11.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.9",
+    "@babel/core": "^7.26.0",
     "@babel/eslint-parser": "^7.25.9",
     "@babel/eslint-plugin": "^7.25.9",
-    "@babel/preset-env": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
-    "@chromatic-com/storybook": "^3.1.0",
+    "@chromatic-com/storybook": "^3.2.2",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@itcase/lint": "^1.0.14",
@@ -136,19 +136,19 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.0.1",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-onboarding": "^8.3.6",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-themes": "^8.3.6",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-themes": "^8.4.2",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-webpack5": "^8.3.6",
-    "@storybook/test": "^8.3.6",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-webpack5": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.12",
+    "@types/lodash": "^4.17.13",
     "@types/react": "^18",
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^18.3.1",
@@ -159,8 +159,8 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "9.13.0",
-    "eslint-plugin-storybook": "^0.10.1",
+    "eslint": "9.14.0",
+    "eslint-plugin-storybook": "^0.11.0",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
     "npm": "^10.9.0",
@@ -178,22 +178,22 @@
     "postcss-import-ext-glob": "^2.1.1",
     "postcss-loader": "^8.1.1",
     "postcss-mixins": "^11.0.3",
-    "postcss-nested": "^6.2.0",
+    "postcss-nested": "^7.0.2",
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^13.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^10.0.8",
+    "postcss-preset-env": "^10.0.9",
     "postcss-pxtorem": "^6.1.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.3.3",
-    "rollup": "^4.24.0",
+    "rollup": "^4.24.4",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.2",
-    "semantic-release": "^24.1.3",
-    "storybook": "^8.3.6",
+    "semantic-release": "^24.2.0",
+    "storybook": "^8.4.2",
     "stylelint": "^16.10.0",
     "typescript": "^5.6.3"
   }