@itcase/ui 1.3.30 → 1.3.32

package/dist/Loader-CsPvc-9g.js

@@ -0,0 +1,65 @@
+import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
+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 { T as Text } from './Text-C6NSmetx.js';
+
+var loaderAppearanceAccent = {
+    accent: {
+        fill: 'accentPrimary',
+        itemFill: 'accentItemPrimary',
+    },
+};
+
+var loaderAppearancePrimary = {
+    primary: {
+        fill: 'primaryPrimary',
+        itemFill: 'primaryItemPrimary',
+    },
+};
+
+var loaderAppearanceSecondary = {
+    secondary: {
+        fill: 'secondaryPrimary',
+        itemFill: 'secondaryItemPrimary',
+    },
+};
+
+var loaderAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        itemFill: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        itemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        itemFill: 'surfaceItemPrimary',
+    },
+};
+
+var loaderAppearance = __assign(__assign(__assign(__assign({}, loaderAppearanceAccent), loaderAppearancePrimary), loaderAppearanceSecondary), loaderAppearanceSurface);
+
+var loaderConfig = {
+    appearance: loaderAppearance,
+    setAppearance: function (appearanceConfig) {
+        loaderConfig.appearance = appearanceConfig;
+    },
+};
+function Loader(props) {
+    var className = props.className, type = props.type, appearance = props.appearance, children = props.children, text = props.text;
+    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, positionClass = propsGenerator.positionClass, widthClass = propsGenerator.widthClass;
+    // @ts-expect-error
+    var loader = useStyles(props).styles;
+    return (jsxs("div", { className: clsx('loader', positionClass && "position_".concat(positionClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), className, 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 }))] }));
+}
+
+export { Loader as L, loaderAppearance as a, loaderConfig as l };

package/dist/{MenuItem-CLDNk2l8.js → MenuItem-Cjlnmfwh.js}

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from './hooks/useStyles.js';
-import { a as Link } from './Link-DN2LhPjD.js';
-import { T as Text } from './Text-JayJa3hj.js';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+import { a as Link } from './Link-BhJ5BdyS.js';
+import { T as Text } from './Text-C6NSmetx.js';
 
 var menuItemAppearance = {
     any: {
@@ -25,8 +25,8 @@ function MenuItem(props) {
     var children = props.children, isActive = props.isActive, isHover = props.isHover, after = props.after, appearance = props.appearance, before = props.before, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, href = props.href, label = props.label, link = props.link, linkFill = props.linkFill, rel = props.rel, set = props.set, target = props.target, textColor = props.textColor, textColorActive = props.textColorActive, textColorHover = props.textColorHover, textGradient = props.textGradient, textSize = props.textSize, textStyle = props.textStyle, textWeight = props.textWeight, textWrap = props.textWrap, underline = props.underline, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
     // @ts-expect-error
     var appearanceConfig = menuItemConfig.appearance && menuItemConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, directionClass = classGenerator.directionClass, fillActiveClass = classGenerator.fillActiveClass, fillActiveHoverClass = classGenerator.fillActiveHoverClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, justifyContentClass = classGenerator.justifyContentClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, typeClass = classGenerator.typeClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, justifyContentClass = propsGenerator.justifyContentClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var menuItem = useStyles(props).styles;
     return (jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass && "menu-item_direction_".concat(directionClass), className, sizeClass && "menu-item_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "menu-item_shape_".concat(shapeClass), typeClass && "menu-item_type_".concat(typeClass), widthClass && "width_".concat(widthClass), set && "menu-item_set_".concat(set), justifyContentClass && "menu-item_justify-content_".concat(justifyContentClass)), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('menu-item__label', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "menu-item__label", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textColorGradient: textGradient, textColorHover: textColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorHover), textStyle: textStyle, textWeight: textWeight, textWrap: textWrap, textColorActive: isActive && (textColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorActive)), children: label })), desc && (jsx(Text, { className: "menu-item__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColorHover), textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }));

package/dist/{MenuItem-amqx61Y0.js → MenuItem-PJkuGghn.js}

@@ -3,10 +3,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
-var Link = require('./Link-CxWmYMyL.js');
-var Text = require('./Text-Beslj4Ns.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+var Link = require('./Link-B38Hn4G2.js');
+var Text = require('./Text-C49zj3jO.js');
 
 var menuItemAppearance = {
     any: {
@@ -27,8 +27,8 @@ function MenuItem(props) {
     var children = props.children, isActive = props.isActive, isHover = props.isHover, after = props.after, appearance = props.appearance, before = props.before, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, href = props.href, label = props.label, link = props.link, linkFill = props.linkFill, rel = props.rel, set = props.set, target = props.target, textColor = props.textColor, textColorActive = props.textColorActive, textColorHover = props.textColorHover, textGradient = props.textGradient, textSize = props.textSize, textStyle = props.textStyle, textWeight = props.textWeight, textWrap = props.textWrap, underline = props.underline, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
     // @ts-expect-error
     var appearanceConfig = menuItemConfig.appearance && menuItemConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, directionClass = classGenerator.directionClass, fillActiveClass = classGenerator.fillActiveClass, fillActiveHoverClass = classGenerator.fillActiveHoverClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, justifyContentClass = classGenerator.justifyContentClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, typeClass = classGenerator.typeClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, justifyContentClass = propsGenerator.justifyContentClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var menuItem = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass && "menu-item_direction_".concat(directionClass), className, sizeClass && "menu-item_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "menu-item_shape_".concat(shapeClass), typeClass && "menu-item_type_".concat(typeClass), widthClass && "width_".concat(widthClass), set && "menu-item_set_".concat(set), justifyContentClass && "menu-item_justify-content_".concat(justifyContentClass)), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('menu-item__label', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "menu-item__label", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textColorGradient: textGradient, textColorHover: textColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorHover), textStyle: textStyle, textWeight: textWeight, textWrap: textWrap, textColorActive: isActive && (textColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorActive)), children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "menu-item__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColorHover), textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }));

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from './hooks/useStyles.js';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
 
 var overlayAppearance = {
     dev: {},
@@ -17,8 +17,8 @@ function Overlay(props) {
     var isOverlay = props.isOverlay, appearance = props.appearance, className = props.className, type = props.type, onClick = props.onClick, dataTestId = props.dataTestId, dataTour = props.dataTour;
     // @ts-expect-error
     var appearanceConfig = overlayConfig.appearance && overlayConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var fillClass = classGenerator.fillClass, fillGradientClass = classGenerator.fillGradientClass, opacityClass = classGenerator.opacityClass;
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var fillClass = propsGenerator.fillClass, fillGradientClass = propsGenerator.fillGradientClass, opacityClass = propsGenerator.opacityClass;
     // @ts-expect-error
     var overlayStyles = useStyles(props).styles;
     return (jsx("div", { className: clsx(className, 'overlay', opacityClass && "opacity_".concat(opacityClass), isOverlay && 'overlay_state_visible', type && "".concat(className, "_type_").concat(type), fillClass && "fill_".concat(fillClass), fillGradientClass && "fill-gradient_".concat(fillGradientClass)), "data-testid": dataTestId, "data-tour": dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));

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

@@ -2,8 +2,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 
 var overlayAppearance = {
     dev: {},
@@ -19,8 +19,8 @@ function Overlay(props) {
     var isOverlay = props.isOverlay, appearance = props.appearance, className = props.className, type = props.type, onClick = props.onClick, dataTestId = props.dataTestId, dataTour = props.dataTour;
     // @ts-expect-error
     var appearanceConfig = overlayConfig.appearance && overlayConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var fillClass = classGenerator.fillClass, fillGradientClass = classGenerator.fillGradientClass, opacityClass = classGenerator.opacityClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var fillClass = propsGenerator.fillClass, fillGradientClass = propsGenerator.fillGradientClass, opacityClass = propsGenerator.opacityClass;
     // @ts-expect-error
     var overlayStyles = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsx("div", { className: clsx(className, 'overlay', opacityClass && "opacity_".concat(opacityClass), isOverlay && 'overlay_state_visible', type && "".concat(className, "_type_").concat(type), fillClass && "fill_".concat(fillClass), fillGradientClass && "fill-gradient_".concat(fillGradientClass)), "data-testid": dataTestId, "data-tour": dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));

package/dist/{Text-Beslj4Ns.js → Text-C49zj3jO.js}

@@ -2,8 +2,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 
 var textAppearance = {
     dev: {
@@ -14,16 +14,16 @@ var textAppearance = {
 
 var textConfig = {
     appearance: textAppearance,
-    setAppearance: function (newComponent) {
-        textConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        textConfig.appearance = appearanceConfig;
     },
 };
 function Text(props) {
-    var children = props.children, cursor = props.cursor, after = props.after, appearance = props.appearance, before = props.before, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, mode = props.mode, _a = props.tag, Tag = _a === void 0 ? 'span' : _a, type = props.type, onClick = props.onClick, onDoubleClick = props.onDoubleClick;
+    var className = props.className, type = props.type, appearance = props.appearance, children = props.children, cursor = props.cursor, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, mode = props.mode, _a = props.tag, Tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, onClick = props.onClick, onDoubleClick = props.onDoubleClick;
     // @ts-expect-error
     var appearanceConfig = textConfig.appearance && textConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var cursorClass = classGenerator.cursorClass, sizeClass = classGenerator.sizeClass, textAlignClass = classGenerator.textAlignClass, textColorActiveClass = classGenerator.textColorActiveClass, textColorClass = classGenerator.textColorClass, textColorHoverClass = classGenerator.textColorHoverClass, textColorGradientClass = classGenerator.textColorGradientClass, textStyleClass = classGenerator.textStyleClass, textTruncateClass = classGenerator.textTruncateClass, textWeightClass = classGenerator.textWeightClass, textWrapClass = classGenerator.textWrapClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, textWrapClass = propsGenerator.textWrapClass, cursorClass = propsGenerator.cursorClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var textStyles = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'text', sizeClass && "text_size_".concat(sizeClass), textWeightClass && "text-weight_".concat(textWeightClass), textAlignClass && "text-align_".concat(textAlignClass), textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWrapClass && "word-wrap_".concat(textWrapClass), textTruncateClass && "text-truncate_".concat(textTruncateClass), type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass && "width_".concat(widthClass), cursorClass && "cursor_".concat(cursorClass), onClick && (cursor || 'cursor_type_pointer')), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: textStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before, children, after] }));

package/dist/{Text-JayJa3hj.js → Text-C6NSmetx.js}

@@ -1,7 +1,7 @@
 import { jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from './hooks/useStyles.js';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
 
 var textAppearance = {
     dev: {
@@ -12,16 +12,16 @@ var textAppearance = {
 
 var textConfig = {
     appearance: textAppearance,
-    setAppearance: function (newComponent) {
-        textConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        textConfig.appearance = appearanceConfig;
     },
 };
 function Text(props) {
-    var children = props.children, cursor = props.cursor, after = props.after, appearance = props.appearance, before = props.before, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, mode = props.mode, _a = props.tag, Tag = _a === void 0 ? 'span' : _a, type = props.type, onClick = props.onClick, onDoubleClick = props.onDoubleClick;
+    var className = props.className, type = props.type, appearance = props.appearance, children = props.children, cursor = props.cursor, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, mode = props.mode, _a = props.tag, Tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, onClick = props.onClick, onDoubleClick = props.onDoubleClick;
     // @ts-expect-error
     var appearanceConfig = textConfig.appearance && textConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var cursorClass = classGenerator.cursorClass, sizeClass = classGenerator.sizeClass, textAlignClass = classGenerator.textAlignClass, textColorActiveClass = classGenerator.textColorActiveClass, textColorClass = classGenerator.textColorClass, textColorHoverClass = classGenerator.textColorHoverClass, textColorGradientClass = classGenerator.textColorGradientClass, textStyleClass = classGenerator.textStyleClass, textTruncateClass = classGenerator.textTruncateClass, textWeightClass = classGenerator.textWeightClass, textWrapClass = classGenerator.textWrapClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, textWrapClass = propsGenerator.textWrapClass, cursorClass = propsGenerator.cursorClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var textStyles = useStyles(props).styles;
     return (jsxs(Tag, { className: clsx(className, 'text', sizeClass && "text_size_".concat(sizeClass), textWeightClass && "text-weight_".concat(textWeightClass), textAlignClass && "text-align_".concat(textAlignClass), textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWrapClass && "word-wrap_".concat(textWrapClass), textTruncateClass && "text-truncate_".concat(textTruncateClass), type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass && "width_".concat(widthClass), cursorClass && "cursor_".concat(cursorClass), onClick && (cursor || 'cursor_type_pointer')), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: textStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before, children, after] }));

package/dist/{Title-BfKF5WvZ.js → Title-BWWyRwLY.js}

@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var UIContext = require('./cjs/context/UIContext.js');
-var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 
 var titleAppearance = {
     dev: {
@@ -24,8 +24,8 @@ function Title(props) {
     var _c = UIContext.useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
     // @ts-expect-error
     var appearanceConfig = titleConfig.appearance && titleConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, dataTestId = classGenerator.dataTestId, heightClass = classGenerator.heightClass, svgFillClass = classGenerator.svgFillClass, svgFillHoverClass = classGenerator.svgFillHoverClass, textAlignClass = classGenerator.textAlignClass, textColorActiveClass = classGenerator.textColorActiveClass, textColorClass = classGenerator.textColorClass, textColorGradientClass = classGenerator.textColorGradientClass, textColorHoverClass = classGenerator.textColorHoverClass, textStyleClass = classGenerator.textStyleClass, textTruncateClass = classGenerator.textTruncateClass, textWeightClass = classGenerator.textWeightClass, typeClass = classGenerator.typeClass, widthClass = classGenerator.widthClass, wrapperDirectionClass = classGenerator.wrapperDirectionClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, dataTestId = propsGenerator.dataTestId, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, 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)

package/dist/{Title-C7Qv9WfS.js → Title-Dck3eHNM.js}

@@ -2,8 +2,8 @@ import { jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useUserDeviceContext } from './context/UIContext.js';
-import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from './hooks/useStyles.js';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
 
 var titleAppearance = {
     dev: {
@@ -22,8 +22,8 @@ function Title(props) {
     var _c = useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
     // @ts-expect-error
     var appearanceConfig = titleConfig.appearance && titleConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, dataTestId = classGenerator.dataTestId, heightClass = classGenerator.heightClass, svgFillClass = classGenerator.svgFillClass, svgFillHoverClass = classGenerator.svgFillHoverClass, textAlignClass = classGenerator.textAlignClass, textColorActiveClass = classGenerator.textColorActiveClass, textColorClass = classGenerator.textColorClass, textColorGradientClass = classGenerator.textColorGradientClass, textColorHoverClass = classGenerator.textColorHoverClass, textStyleClass = classGenerator.textStyleClass, textTruncateClass = classGenerator.textTruncateClass, textWeightClass = classGenerator.textWeightClass, typeClass = classGenerator.typeClass, widthClass = classGenerator.widthClass, wrapperDirectionClass = classGenerator.wrapperDirectionClass;
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, dataTestId = propsGenerator.dataTestId, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, 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)

package/dist/{Tooltip-AodzD-7D.js → Tooltip-BYgzNVYI.js}

@@ -1,10 +1,11 @@
+import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useRef, useState, useCallback, useImperativeHandle } from 'react';
 import clsx from 'clsx';
-import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from './hooks/useStyles.js';
-import { T as Text } from './Text-JayJa3hj.js';
-import { T as Title } from './Title-C7Qv9WfS.js';
+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';
 
 var tooltipAppearance = {
     surfacePrimary: {
@@ -26,12 +27,12 @@ var tooltipAppearance = {
 
 var tooltipConfig = {
     appearance: tooltipAppearance,
-    setAppearance: function (newComponent) {
-        tooltipConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        tooltipConfig.appearance = appearanceConfig;
     },
 };
 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, _a = props.openTimeoutDelay, openTimeoutDelay = _a === void 0 ? 500 : _a, _b = props.closeTimeoutDelay, closeTimeoutDelay = _b === void 0 ? 250 : _b;
+    var className = props.className, type = props.type, appearance = props.appearance, alignPosition = props.alignPosition, initialIsVisible = props.initialIsVisible, children = props.children, text = props.text, title = props.title, arrowPosition = props.arrowPosition, before = props.before, after = props.after, _a = props.openTimeoutDelay, openTimeoutDelay = _a === void 0 ? 500 : _a, _b = props.closeTimeoutDelay, closeTimeoutDelay = _b === void 0 ? 250 : _b, set = props.set;
     var tooltipElementRef = useRef(null);
     var tooltipTimeoutHideRef = useRef(null);
     var tooltipTimeoutShowRef = useRef(null);
@@ -73,17 +74,20 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
         get tooltipElement() {
             return tooltipElementRef.current;
         },
-        isTooltipVisible: isTooltipVisible,
-        closeTooltip: closeTooltip,
         openTooltip: openTooltip,
+        closeTooltip: closeTooltip,
+        isTooltipVisible: isTooltipVisible,
     }); }, [isTooltipVisible, openTooltip, closeTooltip]);
-    // @ts-expect-error
-    var appearanceConfig = tooltipConfig.appearance && tooltipConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderWidthClass = classGenerator.borderWidthClass, borderTypeClass = classGenerator.borderTypeClass, widthClass = classGenerator.widthClass, fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass, alignDirectionClass = classGenerator.alignDirectionClass, alignClass = classGenerator.alignClass, alignmentClass = classGenerator.alignmentClass, borderColorClass = classGenerator.borderColorClass, elevationClass = classGenerator.elevationClass, sizeClass = classGenerator.sizeClass;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultApperance, appearance) {
+        var _a;
+        return (__assign(__assign({}, resultApperance), (_a = tooltipConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, alignmentClass = propsGenerator.alignmentClass, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, titleSize = propsGenerator.titleSize, titleTextColor = propsGenerator.titleTextColor, titleTextWeight = propsGenerator.titleTextWeight, elevationClass = propsGenerator.elevationClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var tooltipStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass && "fill_".concat(fillClass), shapeClass && "tooltip_shape_".concat(shapeClass), alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), alignmentClass && "alignment_".concat(alignmentClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), sizeClass && "tooltip_size_".concat(sizeClass), arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass && "width_".concat(widthClass)), ref: tooltipElementRef, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxs("div", { className: "tooltip__inner", children: [title && (jsx(Title, { className: "tooltip__title", size: titleSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.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 || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
+    return (jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass && "fill_".concat(fillClass), shapeClass && "tooltip_shape_".concat(shapeClass), alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), alignmentClass && "alignment_".concat(alignmentClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), sizeClass && "tooltip_size_".concat(sizeClass), arrowPosition &&
+            "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass && "width_".concat(widthClass)), ref: tooltipElementRef, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxs("div", { className: "tooltip__inner", children: [title && (jsx(Title, { className: "tooltip__title", textColor: titleTextColor, textWeight: titleTextWeight, size: titleSize, children: title })), text && (jsx(Text, { className: "tooltip__text", textColor: textColor, size: textSize, children: text })), children] }), after] }));
 });
 
 export { Tooltip as T, tooltipAppearance as a, tooltipConfig as t };

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

@@ -1,12 +1,13 @@
 '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 useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
-var Text = require('./Text-Beslj4Ns.js');
-var Title = require('./Title-BfKF5WvZ.js');
+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 tooltipAppearance = {
     surfacePrimary: {
@@ -28,12 +29,12 @@ var tooltipAppearance = {
 
 var tooltipConfig = {
     appearance: tooltipAppearance,
-    setAppearance: function (newComponent) {
-        tooltipConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        tooltipConfig.appearance = appearanceConfig;
     },
 };
 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, _a = props.openTimeoutDelay, openTimeoutDelay = _a === void 0 ? 500 : _a, _b = props.closeTimeoutDelay, closeTimeoutDelay = _b === void 0 ? 250 : _b;
+    var className = props.className, type = props.type, appearance = props.appearance, alignPosition = props.alignPosition, initialIsVisible = props.initialIsVisible, children = props.children, text = props.text, title = props.title, arrowPosition = props.arrowPosition, before = props.before, after = props.after, _a = props.openTimeoutDelay, openTimeoutDelay = _a === void 0 ? 500 : _a, _b = props.closeTimeoutDelay, closeTimeoutDelay = _b === void 0 ? 250 : _b, set = props.set;
     var tooltipElementRef = React.useRef(null);
     var tooltipTimeoutHideRef = React.useRef(null);
     var tooltipTimeoutShowRef = React.useRef(null);
@@ -75,17 +76,20 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
         get tooltipElement() {
             return tooltipElementRef.current;
         },
-        isTooltipVisible: isTooltipVisible,
-        closeTooltip: closeTooltip,
         openTooltip: openTooltip,
+        closeTooltip: closeTooltip,
+        isTooltipVisible: isTooltipVisible,
     }); }, [isTooltipVisible, openTooltip, closeTooltip]);
-    // @ts-expect-error
-    var appearanceConfig = tooltipConfig.appearance && tooltipConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderWidthClass = classGenerator.borderWidthClass, borderTypeClass = classGenerator.borderTypeClass, widthClass = classGenerator.widthClass, fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass, alignDirectionClass = classGenerator.alignDirectionClass, alignClass = classGenerator.alignClass, alignmentClass = classGenerator.alignmentClass, borderColorClass = classGenerator.borderColorClass, elevationClass = classGenerator.elevationClass, sizeClass = classGenerator.sizeClass;
+    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 = tooltipConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, alignmentClass = propsGenerator.alignmentClass, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, titleSize = propsGenerator.titleSize, titleTextColor = propsGenerator.titleTextColor, titleTextWeight = propsGenerator.titleTextWeight, elevationClass = propsGenerator.elevationClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var tooltipStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass && "fill_".concat(fillClass), shapeClass && "tooltip_shape_".concat(shapeClass), alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), alignmentClass && "alignment_".concat(alignmentClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), sizeClass && "tooltip_size_".concat(sizeClass), arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass && "width_".concat(widthClass)), ref: tooltipElementRef, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxRuntime.jsxs("div", { className: "tooltip__inner", children: [title && (jsxRuntime.jsx(Title.Title, { className: "tooltip__title", size: titleSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.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 || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass && "fill_".concat(fillClass), shapeClass && "tooltip_shape_".concat(shapeClass), alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), alignmentClass && "alignment_".concat(alignmentClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), sizeClass && "tooltip_size_".concat(sizeClass), arrowPosition &&
+            "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass && "width_".concat(widthClass)), ref: tooltipElementRef, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxRuntime.jsxs("div", { className: "tooltip__inner", children: [title && (jsxRuntime.jsx(Title.Title, { className: "tooltip__title", textColor: titleTextColor, textWeight: titleTextWeight, size: titleSize, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "tooltip__text", textColor: textColor, size: textSize, children: text })), children] }), after] }));
 });
 
 exports.Tooltip = Tooltip;

package/dist/cjs/components/Accordion.js

@@ -5,24 +5,24 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var castArray = require('lodash/castArray');
-var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('../hooks/useStyles.js');
+var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('../hooks/useStyles/useStyles.js');
 var _default = require('@itcase/icons/default');
-var Divider = require('../../Divider-Goh6mpPK.js');
-var Icon = require('../../Icon-pUvizy3W.js');
-var Text = require('../../Text-Beslj4Ns.js');
+var Divider = require('../../Divider-ImOOytuN.js');
+var Icon = require('../../Icon-GVGrUu_Z.js');
+var Text = require('../../Text-C49zj3jO.js');
 require('lodash/camelCase');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
+require('../hooks/useStyles/styleAttributes.js');
 require('react-inlinesvg');
-require('../../Link-CxWmYMyL.js');
-require('../../Tooltip-BDEyAnd-.js');
-require('../../Title-BfKF5WvZ.js');
+require('../../Link-B38Hn4G2.js');
+require('../../Tooltip-DpBQQoNo.js');
+require('../../Title-BWWyRwLY.js');
 
 var accordionAppearance = {
     dev: {},
@@ -51,8 +51,8 @@ function AccordionItem(props) {
     }, [id, title, content, isExpanded, onClick]);
     // @ts-expect-error
     var appearanceConfig = accordionItemConfig.appearance && accordionItemConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderColorClass = classGenerator.borderColorClass, contentBorderColorClass = classGenerator.contentBorderColorClass, contentFillClass = classGenerator.contentFillClass, contentFillHoverClass = classGenerator.contentFillHoverClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass, titleBorderColorClass = classGenerator.titleBorderColorClass, titleFillClass = classGenerator.titleFillClass, titleFillHoverClass = classGenerator.titleFillHoverClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var borderColorClass = propsGenerator.borderColorClass, contentBorderColorClass = propsGenerator.contentBorderColorClass, contentFillClass = propsGenerator.contentFillClass, contentFillHoverClass = propsGenerator.contentFillHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, shapeClass = propsGenerator.shapeClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass;
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, borderColorClass && "border-color_".concat(borderColorClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "accordion-item_shape_".concat(shapeClass), size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || jsxRuntime.jsx(Icon.Icon, { iconFill: iconFill, size: "16", SvgImage: _default.icon16.ChevronDown }) }), beforeContent && beforeContent, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize })), isExpanded && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass && "border-color_".concat(contentBorderColorClass), contentFillClass && "fill_".concat(contentFillClass), contentFillHoverClass && "fill_hover_".concat(contentFillHoverClass)), children: children ||
@@ -114,8 +114,8 @@ function Accordion(props) {
     }, [children, items, expandedItems, onClickAccordionItem]);
     // @ts-expect-error
     var appearanceConfig = accordionConfig.appearance && accordionConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderColorClass = classGenerator.borderColorClass, directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var borderColorClass = propsGenerator.borderColorClass, directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
     /*
      * paddingHorizontalWrapper="16px"
      * paddingHorizontal - styles  (horizontal will be parsed to left/right)

package/dist/cjs/components/Avatar.js

@@ -1,27 +1,27 @@
 '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 useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var Icon = require('../../Icon-pUvizy3W.js');
-var Image = require('../../Image-BbBG_UGI.js');
-var Text = require('../../Text-Beslj4Ns.js');
-require('../../tslib.es6-CCZ3TN_7.js');
+var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var Icon = require('../../Icon-GVGrUu_Z.js');
+var Image = require('../../Image-BEGwuGBM.js');
+var Text = require('../../Text-C49zj3jO.js');
 require('lodash/camelCase');
 require('lodash/castArray');
+require('lodash/upperFirst');
 require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('react-inlinesvg');
-require('../hooks/useStyles.js');
+require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('../../Link-CxWmYMyL.js');
-require('../../Tooltip-BDEyAnd-.js');
-require('../../Title-BfKF5WvZ.js');
+require('../hooks/useStyles/styleAttributes.js');
+require('../../Link-B38Hn4G2.js');
+require('../../Tooltip-DpBQQoNo.js');
+require('../../Title-BWWyRwLY.js');
 
 var avatarAppearance = {
     dev: {},
@@ -29,22 +29,24 @@ var avatarAppearance = {
 
 var avatarConfig = {
     appearance: avatarAppearance,
-    setAppearance: function (newComponent) {
-        avatarConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        avatarConfig.appearance = appearanceConfig;
     },
 };
 function Avatar(props) {
-    var after = props.after, appearance = props.appearance, before = props.before, className = props.className, Dot = props.Dot, _a = props.firstName, firstName = _a === void 0 ? '' : _a, icon = props.icon, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconSrc = props.iconSrc, mode = props.mode, _b = props.secondName, secondName = _b === void 0 ? '' : _b, _c = props.size, size = _c === void 0 ? '96' : _c, src = props.src, _d = props.textColor, textColor = _d === void 0 ? 'surfaceTextTertiary' : _d, _e = props.textSize, textSize = _e === void 0 ? 'l' : _e, _f = props.textWeight, textWeight = _f === void 0 ? '600' : _f, type = props.type, onClick = props.onClick;
+    var className = props.className, type = props.type, appearance = props.appearance, Dot = props.Dot, _a = props.firstName, firstName = _a === void 0 ? '' : _a, icon = props.icon, mode = props.mode, _b = props.secondName, secondName = _b === void 0 ? '' : _b, _c = props.size, size = _c === void 0 ? '96' : _c, src = props.src, before = props.before, after = props.after, onClick = props.onClick;
     var avatarChars = React.useMemo(function () {
         var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
         var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
         return "".concat(firstChar).concat(secondChar);
     }, [firstName, secondName]);
-    // @ts-expect-error
-    var appearanceConfig = avatarConfig.appearance && avatarConfig.appearance[appearance];
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__name", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textWeight: textWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textWeight), children: avatarChars })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "avatar__icon", fill: iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFill), fillHover: iconFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFillHover), fillSize: iconFillSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFillSize), iconFill: iconItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconItemFill), iconSize: iconSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconSize), imageSrc: iconSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconSrc), shape: iconShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconShape), SvgImage: icon || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.icon) })), Dot, after] }) }));
+    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 = avatarConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, _d = propsGenerator.textColor, textColor = _d === void 0 ? 'surfaceTextTertiary' : _d, _e = propsGenerator.textSize, textSize = _e === void 0 ? 'l' : _e, _f = propsGenerator.textWeight, textWeight = _f === void 0 ? '600' : _f, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass;
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__name", textColor: textColor, textWeight: textWeight, size: textSize, children: avatarChars })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
 }
 
 exports.Avatar = Avatar;