@itcase/ui 1.4.6 → 1.4.7

package/dist/{Badge-C68XnlcL.js → Badge-BxT2_kz_.js}

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon } from './Icon-htF_V35Y.js';
+import { I as Icon } from './Icon-OJ_3E3eM.js';
 import { T as Text } from './Text-C6NSmetx.js';
 
 var defaultAppearance = {

package/dist/{Badge-C6SNRExV.js → Badge-DnWTbwXq.js}

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon-GVGrUu_Z.js');
+var Icon = require('./Icon-BcBOnVKH.js');
 var Text = require('./Text-C49zj3jO.js');
 
 var defaultAppearance = {

package/dist/{Button-WZZpsxTk.js → Button-BiJZz4Bx.js}

@@ -4,12 +4,12 @@ var tslib_es6 = require('./tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var Icon = require('./Icon-BcBOnVKH.js');
+var Link = require('./Link-BnqN6ysn.js');
+var Loader = require('./Loader-DdKHrLnw.js');
+var Text = require('./Text-C49zj3jO.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon-GVGrUu_Z.js');
-var Link = require('./Link-B38Hn4G2.js');
-var Loader = require('./Loader-DpYaDhe9.js');
-var Text = require('./Text-C49zj3jO.js');
 
 var buttonAppearanceAccent = {
     accent: {
@@ -87,18 +87,18 @@ var buttonAppearanceInfo = {
     info: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
         labelTextColor: 'accentTextPrimary',
         labelTextColorHover: 'accentTextPrimary',
+        borderColor: 'accentBorderPrimary',
         loaderFill: 'accentPrimary',
         loaderItemFill: 'accentItemPrimary',
     },
     infoSecondary: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
         labelTextColor: 'accentTextSecondary',
         labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
         loaderFill: 'accentPrimary',
         loaderItemFill: 'accentItemPrimary',
     },
@@ -251,7 +251,7 @@ var buttonConfig = {
     },
 };
 var Button = React.forwardRef(function Button(props, ref) {
-    var className = props.className, appearance = props.appearance, children = props.children, label = props.label, Badge = props.Badge, dataTestId = props.dataTestId, dataTour = props.dataTour, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, icon = props.icon, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, link = props.link, _b = props.loadertype, loadertype = _b === void 0 ? 'simple' : _b, loading = props.loading, rel = props.rel, target = props.target, before = props.before, after = props.after, isDisabled = props.isDisabled, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, onClick = props.onClick, onMouseDown = props.onMouseDown;
+    var className = props.className, appearance = props.appearance, label = props.label, Badge = props.Badge, dataTestId = props.dataTestId, dataTour = props.dataTour, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, icon = props.icon, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, link = props.link, _b = props.loadertype, loadertype = _b === void 0 ? 'simple' : _b, loading = props.loading, rel = props.rel, target = props.target, before = props.before, after = props.after, isDisabled = props.isDisabled, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, onClick = props.onClick, onMouseDown = props.onMouseDown, children = props.children;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
         var _a;
         return (tslib_es6.__assign(tslib_es6.__assign({}, resultAppearance), (_a = buttonConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
@@ -261,7 +261,7 @@ var Button = React.forwardRef(function Button(props, ref) {
     }
     var _isLoading = isLoading !== null && isLoading !== void 0 ? isLoading : loading;
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, labelTextColor = propsGenerator.labelTextColor, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextSizeMobile = propsGenerator.labelTextSizeMobile, labelTextTruncate = propsGenerator.labelTextTruncate, labelTextWeight = propsGenerator.labelTextWeight, labelTextWidth = propsGenerator.labelTextWidth, labelTextWrap = propsGenerator.labelTextWrap, elevationClass = propsGenerator.elevationClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, loaderFill = propsGenerator.loaderFill, loaderItemFill = propsGenerator.loaderItemFill, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextSizeMobile = propsGenerator.labelTextSizeMobile, labelTextTruncate = propsGenerator.labelTextTruncate, labelTextWeight = propsGenerator.labelTextWeight, labelTextWidth = propsGenerator.labelTextWidth, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, elevationClass = propsGenerator.elevationClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, loaderFill = propsGenerator.loaderFill, loaderItemFill = propsGenerator.loaderItemFill, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
     var shapeStrengthClass = propsGenerator.getClassName('shapeStrength', {
         replace: [/\./, '-'],
     });
@@ -283,7 +283,7 @@ var Button = React.forwardRef(function Button(props, ref) {
                     ? 'button_type_icon'
                     : '', borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass
             ? "shape-strength_".concat(shapeStrengthClass)
-            : shapeClass === 'rounded' && 'shape-strength_default', sizeClass && "button_size_".concat(sizeClass), widthClass && "button_width_".concat(widthClass), elevationClass && "elevation_".concat(elevationClass), onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', _isLoading && 'button_state_loading', isSkeleton && "button_skeleton"), type: htmlType, disabled: isDisabled, "data-testid": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, DefaultComponent: "button", href: link || href, rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [_isLoading && (jsxRuntime.jsx(Loader.Loader, { className: clsx(className, 'button__loader', shapeClass), type: loadertype, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, size: iconBeforeSize, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, imageSrc: iconSrc, shape: iconShape, size: iconSize, SvgImage: icon })), (children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, size: labelTextSize, sizeMobile: labelTextSizeMobile, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, size: iconAfterSize, SvgImage: iconAfter })), Badge, after] }) }));
+            : shapeClass === 'rounded' && 'shape-strength_default', sizeClass && "button_size_".concat(sizeClass), widthClass && "button_width_".concat(widthClass), elevationClass && "elevation_".concat(elevationClass), onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', _isLoading && 'button_state_loading', isSkeleton && "button_skeleton"), type: htmlType, disabled: isDisabled, "data-testid": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, DefaultComponent: "button", href: link || href, rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [_isLoading && (jsxRuntime.jsx(Loader.Loader, { className: clsx(className, 'button__loader', shapeClass), type: loadertype, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon", size: iconSize, fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, sizeMobile: labelTextSizeMobile, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
 });
 
 exports.Button = Button;

package/dist/{Button-Bsrw4D7p.js → Button-xYLCmT3D.js}

@@ -2,12 +2,12 @@ import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
+import { I as Icon } from './Icon-OJ_3E3eM.js';
+import { L as LinkWrapper } from './Link-DaKqf1pb.js';
+import { L as Loader } from './Loader-VK3q7PBN.js';
+import { T as Text } from './Text-C6NSmetx.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon } from './Icon-htF_V35Y.js';
-import { L as LinkWrapper } from './Link-BhJ5BdyS.js';
-import { L as Loader } from './Loader-D4_r7LML.js';
-import { T as Text } from './Text-C6NSmetx.js';
 
 var buttonAppearanceAccent = {
     accent: {
@@ -85,18 +85,18 @@ var buttonAppearanceInfo = {
     info: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
         labelTextColor: 'accentTextPrimary',
         labelTextColorHover: 'accentTextPrimary',
+        borderColor: 'accentBorderPrimary',
         loaderFill: 'accentPrimary',
         loaderItemFill: 'accentItemPrimary',
     },
     infoSecondary: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
         labelTextColor: 'accentTextSecondary',
         labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
         loaderFill: 'accentPrimary',
         loaderItemFill: 'accentItemPrimary',
     },
@@ -249,7 +249,7 @@ var buttonConfig = {
     },
 };
 var Button = React.forwardRef(function Button(props, ref) {
-    var className = props.className, appearance = props.appearance, children = props.children, label = props.label, Badge = props.Badge, dataTestId = props.dataTestId, dataTour = props.dataTour, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, icon = props.icon, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, link = props.link, _b = props.loadertype, loadertype = _b === void 0 ? 'simple' : _b, loading = props.loading, rel = props.rel, target = props.target, before = props.before, after = props.after, isDisabled = props.isDisabled, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, onClick = props.onClick, onMouseDown = props.onMouseDown;
+    var className = props.className, appearance = props.appearance, label = props.label, Badge = props.Badge, dataTestId = props.dataTestId, dataTour = props.dataTour, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, icon = props.icon, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, link = props.link, _b = props.loadertype, loadertype = _b === void 0 ? 'simple' : _b, loading = props.loading, rel = props.rel, target = props.target, before = props.before, after = props.after, isDisabled = props.isDisabled, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, onClick = props.onClick, onMouseDown = props.onMouseDown, children = props.children;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
         var _a;
         return (__assign(__assign({}, resultAppearance), (_a = buttonConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
@@ -259,7 +259,7 @@ var Button = React.forwardRef(function Button(props, ref) {
     }
     var _isLoading = isLoading !== null && isLoading !== void 0 ? isLoading : loading;
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, labelTextColor = propsGenerator.labelTextColor, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextSizeMobile = propsGenerator.labelTextSizeMobile, labelTextTruncate = propsGenerator.labelTextTruncate, labelTextWeight = propsGenerator.labelTextWeight, labelTextWidth = propsGenerator.labelTextWidth, labelTextWrap = propsGenerator.labelTextWrap, elevationClass = propsGenerator.elevationClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, loaderFill = propsGenerator.loaderFill, loaderItemFill = propsGenerator.loaderItemFill, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextSizeMobile = propsGenerator.labelTextSizeMobile, labelTextTruncate = propsGenerator.labelTextTruncate, labelTextWeight = propsGenerator.labelTextWeight, labelTextWidth = propsGenerator.labelTextWidth, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, elevationClass = propsGenerator.elevationClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, loaderFill = propsGenerator.loaderFill, loaderItemFill = propsGenerator.loaderItemFill, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
     var shapeStrengthClass = propsGenerator.getClassName('shapeStrength', {
         replace: [/\./, '-'],
     });
@@ -281,7 +281,7 @@ var Button = React.forwardRef(function Button(props, ref) {
                     ? 'button_type_icon'
                     : '', borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass
             ? "shape-strength_".concat(shapeStrengthClass)
-            : shapeClass === 'rounded' && 'shape-strength_default', sizeClass && "button_size_".concat(sizeClass), widthClass && "button_width_".concat(widthClass), elevationClass && "elevation_".concat(elevationClass), onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', _isLoading && 'button_state_loading', isSkeleton && "button_skeleton"), type: htmlType, disabled: isDisabled, "data-testid": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, DefaultComponent: "button", href: link || href, rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [_isLoading && (jsx(Loader, { className: clsx(className, 'button__loader', shapeClass), type: loadertype, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, size: iconBeforeSize, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, imageSrc: iconSrc, shape: iconShape, size: iconSize, SvgImage: icon })), (children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsx(Text, { className: "button__label", width: labelTextWidth, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, size: labelTextSize, sizeMobile: labelTextSizeMobile, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, size: iconAfterSize, SvgImage: iconAfter })), Badge, after] }) }));
+            : shapeClass === 'rounded' && 'shape-strength_default', sizeClass && "button_size_".concat(sizeClass), widthClass && "button_width_".concat(widthClass), elevationClass && "elevation_".concat(elevationClass), onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', _isLoading && 'button_state_loading', isSkeleton && "button_skeleton"), type: htmlType, disabled: isDisabled, "data-testid": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, DefaultComponent: "button", href: link || href, rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [_isLoading && (jsx(Loader, { className: clsx(className, 'button__loader', shapeClass), type: loadertype, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "button__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { className: "button__icon", size: iconSize, fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, sizeMobile: labelTextSizeMobile, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "button__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
 });
 
 export { Button as B, buttonAppearance as a, buttonConfig as b };

package/dist/{DropdownItem-BiiEhR49.js → DropdownItem-NllzSt5M.js}

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var Divider = require('./Divider-ImOOytuN.js');
-var Link = require('./Link-B38Hn4G2.js');
+var Link = require('./Link-BnqN6ysn.js');
 var Text = require('./Text-C49zj3jO.js');
 
 function Dropdown(props) {
@@ -71,8 +71,8 @@ var dropdownItemAppearance = {
 
 var dropdownItemConfig = {
     appearance: dropdownItemAppearance,
-    setAppearance: function (newComponent) {
-        dropdownItemConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        dropdownItemConfig.appearance = appearanceConfig;
     },
 };
 function DropdownItem(props) {

package/dist/{DropdownItem-g5jWbyJy.js → DropdownItem-mr__S8vt.js}

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { D as Divider } from './Divider-BQcBkzt1.js';
-import { a as Link } from './Link-BhJ5BdyS.js';
+import { a as Link } from './Link-DaKqf1pb.js';
 import { T as Text } from './Text-C6NSmetx.js';
 
 function Dropdown(props) {
@@ -69,8 +69,8 @@ var dropdownItemAppearance = {
 
 var dropdownItemConfig = {
     appearance: dropdownItemAppearance,
-    setAppearance: function (newComponent) {
-        dropdownItemConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        dropdownItemConfig.appearance = appearanceConfig;
     },
 };
 function DropdownItem(props) {

package/dist/{Group-Dz8xytje.js → Group-BICb8bYQ.js}

@@ -16,8 +16,8 @@ var groupAppearance = {
 
 var groupConfig = {
     appearance: groupAppearance,
-    setAppearance: function (newComponent) {
-        groupConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        groupConfig.appearance = appearanceConfig;
     },
 };
 var Group = React.forwardRef(function Group(props, ref) {

package/dist/{Group-Cq4AQPqb.js → Group-qq4Iisll.js}

@@ -18,8 +18,8 @@ var groupAppearance = {
 
 var groupConfig = {
     appearance: groupAppearance,
-    setAppearance: function (newComponent) {
-        groupConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        groupConfig.appearance = appearanceConfig;
     },
 };
 var Group = React.forwardRef(function Group(props, ref) {

package/dist/{Icon-GVGrUu_Z.js → Icon-BcBOnVKH.js}

@@ -7,8 +7,8 @@ var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Link = require('./Link-B38Hn4G2.js');
-var Tooltip = require('./Tooltip-DpBQQoNo.js');
+var Link = require('./Link-BnqN6ysn.js');
+var Tooltip = require('./Tooltip-DRta8lK_.js');
 
 var iconAppearance = {
     accent: {
@@ -23,8 +23,8 @@ var iconAppearance = {
 
 var iconConfig = {
     appearance: iconAppearance,
-    setAppearance: function (newComponent) {
-        iconConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        iconConfig.appearance = appearanceConfig;
     },
 };
 var Icon = React.forwardRef(function Icon(props, ref) {

package/dist/{Icon-htF_V35Y.js → Icon-OJ_3E3eM.js}

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { L as LinkWrapper } from './Link-BhJ5BdyS.js';
-import { T as Tooltip } from './Tooltip-BYgzNVYI.js';
+import { L as LinkWrapper } from './Link-DaKqf1pb.js';
+import { T as Tooltip } from './Tooltip-5lQyt5-Y.js';
 
 var iconAppearance = {
     accent: {
@@ -21,8 +21,8 @@ var iconAppearance = {
 
 var iconConfig = {
     appearance: iconAppearance,
-    setAppearance: function (newComponent) {
-        iconConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        iconConfig.appearance = appearanceConfig;
     },
 };
 var Icon = React.forwardRef(function Icon(props, ref) {

package/dist/{Input-COFdaiTe.js → Input-DHJIVk1z.js}

@@ -60,8 +60,8 @@ var inputState = {
 
 var inputConfig = {
     appearance: inputAppearance,
-    setAppearance: function (newComponent) {
-        inputConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        inputConfig.appearance = appearanceConfig;
     },
     state: inputState,
     // eslint-disable-next-line perfectionist/sort-objects

package/dist/{Input-Dwvk-poq.js → Input-DiFnIFT7.js}

@@ -62,8 +62,8 @@ var inputState = {
 
 var inputConfig = {
     appearance: inputAppearance,
-    setAppearance: function (newComponent) {
-        inputConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        inputConfig.appearance = appearanceConfig;
     },
     state: inputState,
     // eslint-disable-next-line perfectionist/sort-objects

package/dist/{Label-DF2a2Mlx.js → Label-D-LcvthP.js}

@@ -7,7 +7,7 @@ var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var Text = require('./Text-C49zj3jO.js');
-var Tooltip = require('./Tooltip-DpBQQoNo.js');
+var Tooltip = require('./Tooltip-DRta8lK_.js');
 
 var labelAppearanceAccent = {
     accent: {

package/dist/{Label-I9WNpCXa.js → Label-y2hx5Q81.js}

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { T as Text } from './Text-C6NSmetx.js';
-import { T as Tooltip } from './Tooltip-BYgzNVYI.js';
+import { T as Tooltip } from './Tooltip-5lQyt5-Y.js';
 
 var labelAppearanceAccent = {
     accent: {

package/dist/{Link-B38Hn4G2.js → Link-BnqN6ysn.js}

@@ -15,8 +15,8 @@ var linkConfig = {
 };
 // const linkConfig: iLinkConfig = {
 //   appearance: linkAppearance,
-//   setAppearance: (newComponent) => {
-//     linkConfig.appearance = newComponent
+//   setAppearance: (appearanceConfig) => {
+//     linkConfig.appearance = appearanceConfig
 //   },
 // }
 function Link(props) {

package/dist/{Link-BhJ5BdyS.js → Link-DaKqf1pb.js}

@@ -13,8 +13,8 @@ var linkConfig = {
 };
 // const linkConfig: iLinkConfig = {
 //   appearance: linkAppearance,
-//   setAppearance: (newComponent) => {
-//     linkConfig.appearance = newComponent
+//   setAppearance: (appearanceConfig) => {
+//     linkConfig.appearance = appearanceConfig
 //   },
 // }
 function Link(props) {

package/dist/{Loader-DpYaDhe9.js → Loader-DdKHrLnw.js}

@@ -52,16 +52,16 @@ var loaderConfig = {
     },
 };
 function Loader(props) {
-    var className = props.className, type = props.type, appearance = props.appearance, children = props.children, text = props.text, isSkeleton = props.isSkeleton;
+    var className = props.className, type = props.type, appearance = props.appearance, text = props.text, isSkeleton = props.isSkeleton, children = props.children;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultApperance, appearance) {
         var _a;
         return (tslib_es6.__assign(tslib_es6.__assign({}, resultApperance), (_a = loaderConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, heightClass = propsGenerator.heightClass, itemFillClass = propsGenerator.itemFillClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    var fillClass = propsGenerator.fillClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, heightClass = propsGenerator.heightClass, itemFillClass = propsGenerator.itemFillClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var loader = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx('loader', className, widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), sizeClass && "loader_size_".concat(sizeClass), isSkeleton && "loader_skeleton", type && "loader_type_".concat(type)), style: loader, children: [children || (jsxRuntime.jsxs("div", { className: "loader__inner", children: [jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) })] })), text && (jsxRuntime.jsx(Text.Text, { className: "loader__text", textColor: textColor, size: textSize, children: text }))] }));
+    return (jsxRuntime.jsxs("div", { className: clsx('loader', className, widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), sizeClass && "loader_size_".concat(sizeClass), isSkeleton && "loader_skeleton", type && "loader_type_".concat(type), shapeClass && "loader_shape_".concat(shapeClass)), style: loader, children: [children || (jsxRuntime.jsxs("div", { className: "loader__inner", children: [jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) })] })), text && (jsxRuntime.jsx(Text.Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
 }
 
 exports.Loader = Loader;

package/dist/{Loader-D4_r7LML.js → Loader-VK3q7PBN.js}

@@ -50,16 +50,16 @@ var loaderConfig = {
     },
 };
 function Loader(props) {
-    var className = props.className, type = props.type, appearance = props.appearance, children = props.children, text = props.text, isSkeleton = props.isSkeleton;
+    var className = props.className, type = props.type, appearance = props.appearance, text = props.text, isSkeleton = props.isSkeleton, children = props.children;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultApperance, appearance) {
         var _a;
         return (__assign(__assign({}, resultApperance), (_a = loaderConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, heightClass = propsGenerator.heightClass, itemFillClass = propsGenerator.itemFillClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    var fillClass = propsGenerator.fillClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, heightClass = propsGenerator.heightClass, itemFillClass = propsGenerator.itemFillClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var loader = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('loader', className, widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), sizeClass && "loader_size_".concat(sizeClass), isSkeleton && "loader_skeleton", type && "loader_type_".concat(type)), style: loader, children: [children || (jsxs("div", { className: "loader__inner", children: [jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) })] })), text && (jsx(Text, { className: "loader__text", textColor: textColor, size: textSize, children: text }))] }));
+    return (jsxs("div", { className: clsx('loader', className, widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), sizeClass && "loader_size_".concat(sizeClass), isSkeleton && "loader_skeleton", type && "loader_type_".concat(type), shapeClass && "loader_shape_".concat(shapeClass)), style: loader, children: [children || (jsxs("div", { className: "loader__inner", children: [jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) })] })), text && (jsx(Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
 }
 
 export { Loader as L, loaderAppearance as a, loaderConfig as l };

package/dist/{Overlay-BKh07Vb2.js → Overlay-CZixnXZ6.js}

@@ -9,8 +9,8 @@ var overlayAppearance = {
 
 var overlayConfig = {
     appearance: overlayAppearance,
-    setAppearance: function (newComponent) {
-        overlayConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        overlayConfig.appearance = appearanceConfig;
     },
 };
 function Overlay(props) {

package/dist/{Overlay-DiCjwUv4.js → Overlay-Myen2mqz.js}

@@ -11,8 +11,8 @@ var overlayAppearance = {
 
 var overlayConfig = {
     appearance: overlayAppearance,
-    setAppearance: function (newComponent) {
-        overlayConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        overlayConfig.appearance = appearanceConfig;
     },
 };
 function Overlay(props) {

package/dist/Title-BLGDdlnX.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var UIContext = require('./cjs/context/UIContext.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+
+var titleAppearance = {
+    dev: {
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+var titleConfig = {
+    appearance: titleAppearance,
+    setAppearance: function (appearanceConfig) {
+        titleConfig.appearance = appearanceConfig;
+    },
+};
+function Title(props) {
+    var className = props.className, appearance = props.appearance, _a = props.size, size = _a === void 0 ? 'h3' : _a, text = props.text, textWrap = props.textWrap, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, dataTour = props.dataTour, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === void 0 ? 'span' : _b, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
+    var _c = UIContext.useUserDeviceContext(), isDesktop = _c.isDesktop, isMobile = _c.isMobile, isTablet = _c.isTablet;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultAppearance), (_a = titleConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, dataTestId = propsGenerator.dataTestId, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
+    // @ts-expect-error
+    var _d = useStyles.useStyles(props), titleStyles = _d.styles, titleWrapperStyles = _d.wrapper;
+    // Element type (h1, h2, ..., h6)
+    var Tag = React.useMemo(function () {
+        if (tag) {
+            return tag;
+        }
+        if (isMobile && sizeMobile) {
+            return sizeMobile;
+        }
+        if (isTablet && sizeTablet) {
+            return sizeTablet;
+        }
+        if (isDesktop && sizeDesktop) {
+            return sizeDesktop;
+        }
+        return size ? size : 'span';
+    }, [isMobile, isTablet, isDesktop]);
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'title', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "title_size_".concat(size), directionClass && "title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap), isSkeleton && 'title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "title-direction_".concat(wrapperDirectionClass), 'title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
+}
+
+exports.Title = Title;
+exports.titleAppearance = titleAppearance;
+exports.titleConfig = titleConfig;

package/dist/Title-Byi9vhDt.js

@@ -0,0 +1,51 @@
+import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
+import { jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useUserDeviceContext } from './context/UIContext.js';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+
+var titleAppearance = {
+    dev: {
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+var titleConfig = {
+    appearance: titleAppearance,
+    setAppearance: function (appearanceConfig) {
+        titleConfig.appearance = appearanceConfig;
+    },
+};
+function Title(props) {
+    var className = props.className, appearance = props.appearance, _a = props.size, size = _a === void 0 ? 'h3' : _a, text = props.text, textWrap = props.textWrap, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, dataTour = props.dataTour, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === void 0 ? 'span' : _b, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
+    var _c = useUserDeviceContext(), isDesktop = _c.isDesktop, isMobile = _c.isMobile, isTablet = _c.isTablet;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (__assign(__assign({}, resultAppearance), (_a = titleConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, dataTestId = propsGenerator.dataTestId, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
+    // @ts-expect-error
+    var _d = useStyles(props), titleStyles = _d.styles, titleWrapperStyles = _d.wrapper;
+    // Element type (h1, h2, ..., h6)
+    var Tag = useMemo(function () {
+        if (tag) {
+            return tag;
+        }
+        if (isMobile && sizeMobile) {
+            return sizeMobile;
+        }
+        if (isTablet && sizeTablet) {
+            return sizeTablet;
+        }
+        if (isDesktop && sizeDesktop) {
+            return sizeDesktop;
+        }
+        return size ? size : 'span';
+    }, [isMobile, isTablet, isDesktop]);
+    return (jsxs(Tag, { className: clsx(className, 'title', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "title_size_".concat(size), directionClass && "title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap), isSkeleton && 'title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "title-direction_".concat(wrapperDirectionClass), 'title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
+}
+
+export { Title as T, titleAppearance as a, titleConfig as t };

package/dist/{Tooltip-BYgzNVYI.js → Tooltip-5lQyt5-Y.js}

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { T as Text } from './Text-C6NSmetx.js';
-import { T as Title } from './Title-Dck3eHNM.js';
+import { T as Title } from './Title-Byi9vhDt.js';
 
 var tooltipAppearance = {
     surfacePrimary: {

package/dist/{Tooltip-DpBQQoNo.js → Tooltip-DRta8lK_.js}

@@ -7,7 +7,7 @@ var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var Text = require('./Text-C49zj3jO.js');
-var Title = require('./Title-BWWyRwLY.js');
+var Title = require('./Title-BLGDdlnX.js');
 
 var tooltipAppearance = {
     surfacePrimary: {

package/dist/cjs/components/Accordion.js

@@ -9,7 +9,7 @@ var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevic
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var _default = require('@itcase/icons/default');
 var Divider = require('../../Divider-ImOOytuN.js');
-var Icon = require('../../Icon-GVGrUu_Z.js');
+var Icon = require('../../Icon-BcBOnVKH.js');
 var Text = require('../../Text-C49zj3jO.js');
 require('lodash/camelCase');
 require('lodash/upperFirst');
@@ -20,9 +20,9 @@ require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('react-inlinesvg');
-require('../../Link-B38Hn4G2.js');
-require('../../Tooltip-DpBQQoNo.js');
-require('../../Title-BWWyRwLY.js');
+require('../../Link-BnqN6ysn.js');
+require('../../Tooltip-DRta8lK_.js');
+require('../../Title-BLGDdlnX.js');
 
 var accordionAppearance = {
     dev: {},
@@ -33,8 +33,8 @@ var accordionItemAppearance = {
 
 var accordionItemConfig = {
     appearance: accordionItemAppearance,
-    setAppearance: function (newComponent) {
-        accordionItemConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        accordionItemConfig.appearance = appearanceConfig;
     },
 };
 function AccordionItem(props) {
@@ -63,8 +63,8 @@ function AccordionItem(props) {
 
 var accordionConfig = {
     appearance: accordionAppearance,
-    setAppearance: function (newComponent) {
-        accordionConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        accordionConfig.appearance = appearanceConfig;
     },
 };
 function Accordion(props) {