@itcase/ui 1.8.19 → 1.8.21

package/dist/Link_es_CyJn7NFb.js

@@ -0,0 +1,298 @@
+import { _ as __assign, b as __rest } from './tslib.es6_es_Bwu1Cn-t.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+
+var linkAppearanceAccent = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+    },
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        borderColor: 'accentBorderPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+};
+
+var linkAppearanceDanger = {
+    danger: {
+        fill: 'dangerPrimary',
+        fillHover: 'dangerPrimaryHover',
+    },
+};
+
+var linkAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceFillDisabled',
+        borderColor: 'errorBorderQuaternary',
+        borderHover: 'errorBorderQuaternary',
+        textColor: 'surfaceTextQuaternary',
+        iconBeforeFill: 'errorItemQuaternary',
+        iconClearFill: 'errorItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    disabledSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextSecondary',
+    },
+};
+
+var linkAppearanceError = {
+    error: {
+        fill: 'errorPrimary',
+        fillHover: 'errorPrimaryHover',
+        labelTextColor: 'errorTextPrimary',
+        labelTextColorHover: 'errorTextPrimary',
+        loaderFill: 'errorPrimary',
+        loaderItemFill: 'errorItemPrimary',
+    },
+};
+
+var linkAppearanceInfo = {
+    info: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        borderColor: 'accentBorderPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+    infoSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+};
+
+var linkAppearancePrimary = {
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        labelTextColor: 'primaryTextPrimary',
+    },
+};
+
+var linkAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        borderColor: 'warningBorderQuaternary',
+        borderHover: 'warningBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        iconBeforeFill: 'warningItemQuaternary',
+        iconClearFill: 'warningItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    requireSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextSecondary',
+    },
+};
+
+var linkAppearanceSecondary = {
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        labelTextColor: 'secondaryTextPrimary',
+    },
+};
+
+var linkAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        labelTextSize: 'xxl',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeXL: {
+        size: 'xl',
+        labelTextSize: 'l',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'l',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 'm',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        iconAfterFillSize: '20',
+        iconAfterSize: '20',
+        iconBeforeFillSize: '20',
+        iconBeforeSize: '20',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        iconAfterFillSize: '16',
+        iconAfterSize: '16',
+        iconBeforeFillSize: '16',
+        iconBeforeSize: '16',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        labelTextSize: 'xs',
+        iconAfterFillSize: '14',
+        iconAfterSize: '14',
+        iconBeforeFillSize: '14',
+        iconBeforeSize: '14',
+    },
+};
+
+var linkAppearanceStyle = {
+    full: {
+        borderColor: '0',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: '0',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    solid: {
+        borderColor: '0',
+    },
+};
+
+var linkAppearanceSuccess = {
+    success: {
+        fill: 'successPrimary',
+        fillHover: 'successPrimaryHover',
+        labelTextColor: 'successTextSecondary',
+        labelTextColorHover: 'successTextSecondary',
+        loaderFill: 'successPrimary',
+        loaderItemFill: 'successItemPrimary',
+    },
+};
+
+var linkAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
+
+var linkAppearanceWarning = {
+    warning: {
+        fill: 'warningPrimary',
+        fillHover: 'warningPrimaryHover',
+        labelTextColor: 'warningTextSecondary',
+        labelTextColorHover: 'warningTextSecondary',
+        loaderFill: 'warningPrimary',
+        loaderItemFill: 'warningItemPrimary',
+    },
+};
+
+var linkAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, linkAppearanceSize), linkAppearanceDisabled), linkAppearanceRequire), linkAppearanceStyle), linkAppearanceAccent), linkAppearanceDanger), linkAppearanceError), linkAppearanceInfo), linkAppearancePrimary), linkAppearanceSecondary), linkAppearanceSuccess), linkAppearanceSurface), linkAppearanceWarning);
+
+var linkConfig = {
+    appearance: linkAppearance,
+    LinkComponent: 'a',
+    setAppearance: function (appearanceConfig) {
+        linkConfig.appearance = appearanceConfig;
+    },
+    setLinkComponent: function (newComponent) {
+        linkConfig.LinkComponent = newComponent;
+    },
+};
+function Link(props) {
+    var className = props.className, appearance = props.appearance, text = props.text, href = props.href, link = props.link, LinkComponent = props.LinkComponent, rel = props.rel, style = props.style, target = props.target, _a = props.underline, underline = _a === void 0 ? 'underline' : _a, before = props.before, after = props.after, onClick = props.onClick, onMouseDown = props.onMouseDown, children = props.children;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
+        var _a;
+        return (__assign(__assign({}, resultConfig), (_a = linkConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, textGradientClass = propsGenerator.textGradientClass, textStyleClass = propsGenerator.textStyleClass, textWeightClass = propsGenerator.textWeightClass, heightClass = propsGenerator.heightClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, widthClass = propsGenerator.widthClass;
+    // @ts-expect-error
+    var styles = useStyles(props).styles;
+    return (jsxs(LinkWrapper, { className: clsx(className, 'link', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), directionClass && "link_direction_".concat(directionClass), sizeClass && "text_size_".concat(sizeClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), underline && "link_underline_".concat(underline), 'text', (textColorClass ||
+            textColorHoverClass ||
+            textGradientClass ||
+            textStyleClass ||
+            textWeightClass) &&
+            'text', textColorClass && "text-color_".concat(textColorClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), textGradientClass && "text-gradient_".concat(textGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), shapeClass && "link_shape_".concat(shapeClass)), Component: LinkComponent, href: href || link, rel: rel, style: Object.assign({}, styles, style), target: target, onClick: onClick, onMouseDown: onMouseDown, children: [before, children || text, after] }));
+}
+// Wrapper with "Link" by condition
+function LinkWrapper(props) {
+    var Component = props.Component, DefaultComponent = props.DefaultComponent, href = props.href, rel = props.rel, target = props.target, children = props.children, otherProps = __rest(props, ["Component", "DefaultComponent", "href", "rel", "target", "children"]);
+    if (href) {
+        // If href passed, make link-wrapper
+        var LinkComponent = Component || linkConfig.LinkComponent;
+        if (LinkComponent) {
+            return (jsx(LinkComponent, __assign({ href: href, rel: rel, target: target }, otherProps, { children: children })));
+        }
+    }
+    else if (DefaultComponent) {
+        // If has default "Component" - render it
+        return jsx(DefaultComponent, __assign({}, otherProps, { children: children }));
+    }
+    // Return children and pass current props to
+    return React.Children.toArray(children)
+        .filter(Boolean)
+        .map(function (child) {
+        return React.isValidElement(child)
+            ? React.cloneElement(child, otherProps)
+            : child;
+    });
+}
+
+export { Link as L, LinkWrapper as a, linkAppearance as b, linkConfig as l };

package/dist/{Loader_cjs_DZbIy6Ko.js → Loader_cjs_3VRzFLI2.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 Text = require('./Text_cjs_iL1l_7V1.js');
+var Text = require('./Text_cjs_DPhKj3wf.js');
 
 var loaderAppearanceAccent = {
     accentPrimary: {
@@ -28,6 +28,18 @@ var loaderAppearanceSecondary = {
     },
 };
 
+var loaderAppearanceSize = {
+    sizeL: {
+        size: 'l',
+    },
+    sizeM: {
+        size: 'm',
+    },
+    sizeS: {
+        size: 's',
+    },
+};
+
 var loaderAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
@@ -43,7 +55,7 @@ var loaderAppearanceSurface = {
     },
 };
 
-var loaderAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, loaderAppearanceAccent), loaderAppearancePrimary), loaderAppearanceSecondary), loaderAppearanceSurface);
+var loaderAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, loaderAppearanceAccent), loaderAppearancePrimary), loaderAppearanceSize), loaderAppearanceSecondary), loaderAppearanceSurface);
 
 var loaderConfig = {
     appearance: loaderAppearance,

package/dist/{Loader_es_SHdP0IkA.js → Loader_es_DEYowVdU.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 { T as Text } from './Text_es_D012qJ8s.js';
+import { T as Text } from './Text_es_BRb3qqKM.js';
 
 var loaderAppearanceAccent = {
     accentPrimary: {
@@ -26,6 +26,18 @@ var loaderAppearanceSecondary = {
     },
 };
 
+var loaderAppearanceSize = {
+    sizeL: {
+        size: 'l',
+    },
+    sizeM: {
+        size: 'm',
+    },
+    sizeS: {
+        size: 's',
+    },
+};
+
 var loaderAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
@@ -41,7 +53,7 @@ var loaderAppearanceSurface = {
     },
 };
 
-var loaderAppearance = __assign(__assign(__assign(__assign({}, loaderAppearanceAccent), loaderAppearancePrimary), loaderAppearanceSecondary), loaderAppearanceSurface);
+var loaderAppearance = __assign(__assign(__assign(__assign(__assign({}, loaderAppearanceAccent), loaderAppearancePrimary), loaderAppearanceSize), loaderAppearanceSecondary), loaderAppearanceSurface);
 
 var loaderConfig = {
     appearance: loaderAppearance,

package/dist/Text_cjs_DPhKj3wf.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
+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 textAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        labelTextSize: 'xxl',
+    },
+    sizeXL: {
+        size: 'xl',
+        labelTextSize: 'l',
+    },
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'l',
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 'm',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        labelTextSize: 'xs',
+    },
+};
+
+var textAppearance = tslib_es6.__assign({}, textAppearanceSize);
+
+var textConfig = {
+    appearance: textAppearance,
+    setAppearance: function (appearanceConfig) {
+        textConfig.appearance = appearanceConfig;
+    },
+};
+function Text(props) {
+    var className = props.className; props.type; var appearance = props.appearance, cursor = props.cursor, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, _a = props.tag, Tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, onDoubleClick = props.onDoubleClick, children = props.children, isActive = props.isActive;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = textConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var textAlignClass = propsGenerator.textAlignClass, textColorHoverActiveClass = propsGenerator.textColorHoverActiveClass, 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), !isActive
+            ? textColorClass && "text-color_".concat(textColorClass)
+            : textColorActiveClass && "text-color_active_".concat(textColorActiveClass), !isActive
+            ? textColorHoverClass && "text-color_hover_".concat(textColorHoverClass)
+            : textColorHoverActiveClass &&
+                "text-color_hover_active_".concat(textColorActiveClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWrapClass && "word-wrap_".concat(textWrapClass), textTruncateClass && "text-truncate_".concat(textTruncateClass), isSkeleton && 'text_skeleton', 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] }));
+}
+
+exports.Text = Text;
+exports.textAppearance = textAppearance;
+exports.textConfig = textConfig;

package/dist/{Text_es_D012qJ8s.js → Text_es_BRb3qqKM.js}

@@ -44,16 +44,21 @@ var textConfig = {
     },
 };
 function Text(props) {
-    var className = props.className, type = props.type, appearance = props.appearance, cursor = props.cursor, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, _a = props.tag, Tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, onDoubleClick = props.onDoubleClick, children = props.children;
+    var className = props.className; props.type; var appearance = props.appearance, cursor = props.cursor, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, _a = props.tag, Tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, onDoubleClick = props.onDoubleClick, children = props.children, isActive = props.isActive;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
         return (__assign(__assign({}, resultConfig), (_a = textConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     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;
+    var textAlignClass = propsGenerator.textAlignClass, textColorHoverActiveClass = propsGenerator.textColorHoverActiveClass, 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), isSkeleton && 'text_skeleton', 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] }));
+    return (jsxs(Tag, { className: clsx(className, 'text', sizeClass && "text_size_".concat(sizeClass), textWeightClass && "text-weight_".concat(textWeightClass), textAlignClass && "text-align_".concat(textAlignClass), !isActive
+            ? textColorClass && "text-color_".concat(textColorClass)
+            : textColorActiveClass && "text-color_active_".concat(textColorActiveClass), !isActive
+            ? textColorHoverClass && "text-color_hover_".concat(textColorHoverClass)
+            : textColorHoverActiveClass &&
+                "text-color_hover_active_".concat(textColorActiveClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWrapClass && "word-wrap_".concat(textWrapClass), textTruncateClass && "text-truncate_".concat(textTruncateClass), isSkeleton && 'text_skeleton', 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] }));
 }
 
 export { Text as T, textAppearance as a, textConfig as t };