@itcase/ui 1.2.23 → 1.2.25

package/dist/{Button-BLcVDStV.js → Button-C0M-Ap20.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-DQWyj5EO.js';
+import { I as Icon } from './Icon-CliIEdbp.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-DawNa85U.js → Button-COsywjkv.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-BeHO7N79.js');
+var Icon = require('./Icon-CkynFJm4.js');
 var Link = require('./Link-CqWzwh8V.js');
 var Loader = require('./Loader-fA11tUEJ.js');
 var Text = require('./Text-_YhyTsQ1.js');

package/dist/{Icon-BeHO7N79.js → Icon-CkynFJm4.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-xGmgUzGr.js');
+var Tooltip = require('./Tooltip-DsTCGS6h.js');
 
 var iconConfig = {
     appearance: {},
@@ -45,7 +45,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
         }
         return null;
     }, [SvgImage, width, height, imageSrc]);
-    var cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'cursor_',
         propsKey: 'cursor',
     });
@@ -107,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: 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 }))] }) }));
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
 });
 var removeFillStroke = function (code) {
     return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');

package/dist/{Icon-DQWyj5EO.js → Icon-CliIEdbp.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-aaDRYNWY.js';
+import { T as Tooltip } from './Tooltip-B2vv4OAX.js';
 
 var iconConfig = {
     appearance: {},
@@ -43,7 +43,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
         }
         return null;
     }, [SvgImage, width, height, imageSrc]);
-    var cursorClass = useDeviceTargetClass(props, {
+    useDeviceTargetClass(props, {
         prefix: 'cursor_',
         propsKey: 'cursor',
     });
@@ -105,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: 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 }))] }) }));
+    return (jsxs("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
 });
 var removeFillStroke = function (code) {
     return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');

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

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

package/dist/{Title-zwP6c2U2.js → Title-B-N0qkn3.js}

@@ -72,6 +72,14 @@ function Title(props) {
         prefix: 'text-truncate_',
         propsKey: 'textTruncate',
     });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
     // @ts-expect-error
     var _c = useStyles.useStyles(props), titleStyles = _c.styles, titleWrapperStyles = _c.wrapper;
     var appearanceConfig = appearance && titleConfig.appearance && titleConfig.appearance[appearance];
@@ -91,7 +99,7 @@ function Title(props) {
         }
         return size ? size : 'span';
     }, [isMobile, isTablet, isDesktop]);
-    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'title', fillColorClass, svgFillClass, svgFillHoverClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass, 'text', textColorClass ||
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'title', fillColorClass, svgFillClass, svgFillHoverClass, widthClass, heightClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass, 'text', textColorClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
                 "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, onClick: onClick, style: titleStyles, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass, directionWrapperClass, 'title__wrapper', textTruncateClass), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
 }

package/dist/{Title-BfSFPJtJ.js → Title-CqwqEtm7.js}

@@ -70,6 +70,14 @@ function Title(props) {
         prefix: 'text-truncate_',
         propsKey: 'textTruncate',
     });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
     // @ts-expect-error
     var _c = useStyles(props), titleStyles = _c.styles, titleWrapperStyles = _c.wrapper;
     var appearanceConfig = appearance && titleConfig.appearance && titleConfig.appearance[appearance];
@@ -89,7 +97,7 @@ function Title(props) {
         }
         return size ? size : 'span';
     }, [isMobile, isTablet, isDesktop]);
-    return (jsxs(Tag, { className: clsx(className, 'title', fillColorClass, svgFillClass, svgFillHoverClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass, 'text', textColorClass ||
+    return (jsxs(Tag, { className: clsx(className, 'title', fillColorClass, svgFillClass, svgFillHoverClass, widthClass, heightClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass, 'text', textColorClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
                 "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, onClick: onClick, style: titleStyles, children: [before, jsxs("span", { className: clsx(textAlignClass, directionWrapperClass, 'title__wrapper', textTruncateClass), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
 }

package/dist/{Tooltip-aaDRYNWY.js → Tooltip-B2vv4OAX.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 Title } from './Title-BfSFPJtJ.js';
+import { T as Title } from './Title-CqwqEtm7.js';
 
 var tooltipConfig = {
     appearance: undefined,

package/dist/{Tooltip-xGmgUzGr.js → Tooltip-DsTCGS6h.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 Title = require('./Title-zwP6c2U2.js');
+var Title = require('./Title-B-N0qkn3.js');
 
 var tooltipConfig = {
     appearance: undefined,

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-BeHO7N79.js');
+var Icon = require('../../Icon-CkynFJm4.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -20,8 +20,8 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.js');
 
 var ChevronDown16 = function ChevronDown16(props) {
   return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {

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-BeHO7N79.js');
+var Icon = require('../../Icon-CkynFJm4.js');
 var Image = require('../../Image-DrUlRMHa.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
@@ -20,8 +20,8 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.js');
 
 function Avatar(props) {
     var className = props.className, Dot = props.Dot, icon = props.icon, _a = props.size, size = _a === void 0 ? '96' : _a, after = props.after, before = props.before, src = props.src, type = props.type, mode = props.mode, onClick = props.onClick, _b = props.textSize, textSize = _b === void 0 ? 'l' : _b, _c = props.textColor, textColor = _c === void 0 ? 'surfaceTextTertiary' : _c, _d = props.textWeight, textWeight = _d === void 0 ? '600' : _d, iconSrc = props.iconSrc, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, _e = props.firstName, firstName = _e === void 0 ? '' : _e, _f = props.secondName, secondName = _f === void 0 ? '' : _f;

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-BeHO7N79.js');
+var Icon = require('../../Icon-CkynFJm4.js');
 var Link = require('../../Link-CqWzwh8V.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
@@ -19,8 +19,8 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.js');
 
 function BreadcrumbsItem(props) {
     var children = props.children, className = props.className, cursor = props.cursor, _a = props.set, set = _a === void 0 ? 'default' : _a, text = props.text, textSize = props.textSize, textColor = props.textColor, textColorHover = props.textColorHover, href = props.href, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, onClick = props.onClick;

package/dist/cjs/components/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button-DawNa85U.js');
+var Button = require('../../Button-COsywjkv.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -15,13 +15,13 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-BeHO7N79.js');
+require('../../Icon-CkynFJm4.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-xGmgUzGr.js');
+require('../../Tooltip-DsTCGS6h.js');
 require('../../Text-_YhyTsQ1.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Title-B-N0qkn3.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-BeHO7N79.js');
-var Label = require('../../Label-B0O9q0E4.js');
+var Icon = require('../../Icon-CkynFJm4.js');
+var Label = require('../../Label-BPP0om7_.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('react');
 require('lodash/castArray');
@@ -20,8 +20,8 @@ require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.js');
 
 function Cell(props) {
     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;

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-BeHO7N79.js');
+var Icon = require('../../Icon-CkynFJm4.js');
 var Loader = require('../../Loader-fA11tUEJ.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
@@ -20,8 +20,8 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.js');
 
 var choiceConfig = {
     appearance: {},

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-BeHO7N79.js');
+var Icon = require('../../Icon-CkynFJm4.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('react');
 require('lodash/castArray');
@@ -20,8 +20,8 @@ require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.js');
 
 function ContextMenu(props) {
     var id = props.id, children = props.children, className = props.className, set = props.set, onClick = props.onClick;

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-DawNa85U.js');
+var Button = require('../../Button-COsywjkv.js');
 var Group = require('../../Group-B2oTJg0t.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
@@ -18,12 +18,12 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-BeHO7N79.js');
+require('../../Icon-CkynFJm4.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.js');
 require('../../Loader-fA11tUEJ.js');
 
 function CookiesWarning(props) {

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-DawNa85U.js');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Button = require('../../Button-COsywjkv.js');
+var Icon = require('../../Icon-CkynFJm4.js');
 var Input = require('../../Input-BSpFMsrf.js');
-var Label = require('../../Label-B0O9q0E4.js');
+var Label = require('../../Label-BPP0om7_.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -24,8 +24,8 @@ require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../Loader-fA11tUEJ.js');
 require('react-inlinesvg');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.js');
 
 function buildFormatLongFn(args) {
   return (options = {}) => {

package/dist/cjs/components/Icon.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-CkynFJm4.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -18,9 +18,9 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-xGmgUzGr.js');
+require('../../Tooltip-DsTCGS6h.js');
 require('../../Text-_YhyTsQ1.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Title-B-N0qkn3.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-BeHO7N79.js');
+var Icon = require('../../Icon-CkynFJm4.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -18,9 +18,9 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-xGmgUzGr.js');
+require('../../Tooltip-DsTCGS6h.js');
 require('../../Text-_YhyTsQ1.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Title-B-N0qkn3.js');
 
 var inputPasswordConfig = {
     appearance: undefined,

package/dist/cjs/components/Label.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Label = require('../../Label-B0O9q0E4.js');
+var Label = require('../../Label-BPP0om7_.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -16,8 +16,8 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Text-_YhyTsQ1.js');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.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-BeHO7N79.js');
+var Icon = require('../../Icon-CkynFJm4.js');
 require('react');
 require('react-inlinesvg');
 require('../hooks/useDeviceTargetClass.js');
@@ -18,9 +18,9 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-xGmgUzGr.js');
+require('../../Tooltip-DsTCGS6h.js');
 require('../../Text-_YhyTsQ1.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Title-B-N0qkn3.js');
 
 function LanguageSelectorItem(props) {
     var label = props.label, iconSize = props.iconSize, SvgImage = props.SvgImage, isActive = props.isActive, onClick = props.onClick;

package/dist/cjs/components/Notification.js

@@ -2,21 +2,21 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var Text = require('../../Text-_YhyTsQ1.js');
-var Title = require('../../Title-zwP6c2U2.js');
+var Title = require('../../Title-B-N0qkn3.js');
 var Notifications = require('../context/Notifications.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../hooks/useStyles.js');
-require('lodash/maxBy');
-require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('lodash/castArray');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('uuid');
 
@@ -32,18 +32,17 @@ function NotificationItem(props) {
         prefix: 'fill_',
         propsKey: 'fill',
     });
-    var appearanceConfig = appearance &&
-        notificationItemConfig.appearance &&
-        notificationItemConfig.appearance[appearance];
-    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), set && "notification__item_set_".concat(set), size && "notification__item_set_".concat(size), closeButton && 'notification__item_type_close-button', fillClass ||
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var appearanceConfig = appearance && notificationItemConfig.appearance && notificationItemConfig.appearance[appearance];
+    var notificationStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), set && "notification__item_set_".concat(set), size && "notification__item_set_".concat(size), closeButton && 'notification__item_type_close-button', widthClass, fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())), "data-tour": dataTour, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Title.Title, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor ||
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())), style: notificationStyles, "data-tour": dataTour, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Title.Title, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor ||
                             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor) && appearanceConfig.titleTextColor), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: textSize, textColor: textColor || ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) && appearanceConfig.textColor), children: text })), closeButton && (jsxRuntime.jsx("div", { className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'), onClick: function () { return onClickClose && onClickClose(id); }, children: closeButton }))] }), after] }));
 }
-NotificationItem.defaultProps = {
-    titleTextSize: 'h5',
-    textSize: 's',
-};
 
 function NotificationList(props) {
     var notifications = Notifications.useNotifications();