@itcase/ui 1.2.27 → 1.2.29

package/dist/{Badge-CrhdvxY6.js → Badge-BZYBmgBK.js}

@@ -1,18 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { badgeAppearance } from './appearance/Badge.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { T as Text } from './Text-CG3xPG27.js';
+import { T as Text } from './Text-kxGZButz.js';
 
 var badgeConfig = {
-    appearance: undefined,
+    appearance: badgeAppearance,
     setAppearance: function (newComponent) {
         badgeConfig.appearance = newComponent;
     },
 };
 function Badge(props) {
     var _a, _b;
-    var appearance = props.appearance, children = props.children, className = props.className, mode = props.mode; props.shape; props.size; var textColor = props.textColor, textSize = props.textSize, value = props.value;
+    var children = props.children, appearance = props.appearance, className = props.className, mode = props.mode; props.shape; props.size; var textColor = props.textColor, textSize = props.textSize, value = props.value;
     var borderColorClass = useDeviceTargetClass(props, {
         prefix: 'border-color_',
         propsKey: 'borderColor',
@@ -59,9 +60,5 @@ function Badge(props) {
                 ((_b = "fill_hover_".concat(appearanceConfig.fillHover)) === null || _b === void 0 ? void 0 : _b.replace(/([A-Z])/g, '-$1').toLowerCase())), positionClass, sizeClass, shapeClass), style: badgeStyles, children: children ||
             (value && (jsx(Text, { size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: value }))) }));
 }
-Badge.defaultProps = {
-    size: 'm',
-    shape: 'circular',
-};
 
 export { Badge as B, badgeConfig as b };

package/dist/{Badge-2JkquAEb.js → Badge-TyPbVqR_.js}

@@ -2,19 +2,20 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var index = require('./cjs/appearance/Badge.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Text = require('./Text-_YhyTsQ1.js');
+var Text = require('./Text-CC0xnhmx.js');
 
 var badgeConfig = {
-    appearance: undefined,
+    appearance: index.badgeAppearance,
     setAppearance: function (newComponent) {
         badgeConfig.appearance = newComponent;
     },
 };
 function Badge(props) {
     var _a, _b;
-    var appearance = props.appearance, children = props.children, className = props.className, mode = props.mode; props.shape; props.size; var textColor = props.textColor, textSize = props.textSize, value = props.value;
+    var children = props.children, appearance = props.appearance, className = props.className, mode = props.mode; props.shape; props.size; var textColor = props.textColor, textSize = props.textSize, value = props.value;
     var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'border-color_',
         propsKey: 'borderColor',
@@ -61,10 +62,6 @@ function Badge(props) {
                 ((_b = "fill_hover_".concat(appearanceConfig.fillHover)) === null || _b === void 0 ? void 0 : _b.replace(/([A-Z])/g, '-$1').toLowerCase())), positionClass, sizeClass, shapeClass), style: badgeStyles, children: children ||
             (value && (jsxRuntime.jsx(Text.Text, { size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: value }))) }));
 }
-Badge.defaultProps = {
-    size: 'm',
-    shape: 'circular',
-};
 
 exports.Badge = Badge;
 exports.badgeConfig = badgeConfig;

package/dist/{Button-COsywjkv.js → Button-BcOsYgoT.js}

@@ -3,15 +3,16 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var index = require('./cjs/appearance/Button.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Icon = require('./Icon-CkynFJm4.js');
+var Icon = require('./Icon-B2BwTQnP.js');
 var Link = require('./Link-CqWzwh8V.js');
-var Loader = require('./Loader-fA11tUEJ.js');
-var Text = require('./Text-_YhyTsQ1.js');
+var Loader = require('./Loader-Ck59IXGG.js');
+var Text = require('./Text-CC0xnhmx.js');
 
 var buttonConfig = {
-    appearance: undefined,
+    appearance: index.buttonAppearance,
     setAppearance: function (newComponent) {
         buttonConfig.appearance = newComponent;
     },

package/dist/{Button-C0M-Ap20.js → Button-avhviao1.js}

@@ -1,15 +1,16 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
+import { buttonAppearance } from './appearance/Button.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { I as Icon } from './Icon-CliIEdbp.js';
-import { a as LinkWrapper } from './Link-CeQuavin.js';
-import { L as Loader } from './Loader-CJ8ZCdwy.js';
-import { T as Text } from './Text-CG3xPG27.js';
+import { I as Icon } from './Icon-ClsRaxDk.js';
+import { a as LinkWrapper } from './Link-CzC1kU5C.js';
+import { L as Loader } from './Loader-CU_5Ydmy.js';
+import { T as Text } from './Text-kxGZButz.js';
 
 var buttonConfig = {
-    appearance: undefined,
+    appearance: buttonAppearance,
     setAppearance: function (newComponent) {
         buttonConfig.appearance = newComponent;
     },

package/dist/{DropdownItem-D0dOP4NL.js → DropdownItem-CFkRx8LX.js}

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 import { D as Divider } from './Divider-U5UdY-ef.js';
-import { L as Link } from './Link-CeQuavin.js';
-import { T as Text } from './Text-CG3xPG27.js';
+import { L as Link } from './Link-CzC1kU5C.js';
+import { T as Text } from './Text-kxGZButz.js';
 
 function Dropdown(props) {
     var after = props.after, before = props.before, animationClose = props.animationClose, animationOpen = props.animationOpen, children = props.children, className = props.className, set = props.set, isOpen = props.isOpen, setIsOpen = props.setIsOpen;

package/dist/{DropdownItem-D52wxY6I.js → DropdownItem-toApJyeB.js}

@@ -7,7 +7,7 @@ var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 var Divider = require('./Divider-BjB5MD6u.js');
 var Link = require('./Link-CqWzwh8V.js');
-var Text = require('./Text-_YhyTsQ1.js');
+var Text = require('./Text-CC0xnhmx.js');
 
 function Dropdown(props) {
     var after = props.after, before = props.before, animationClose = props.animationClose, animationOpen = props.animationOpen, children = props.children, className = props.className, set = props.set, isOpen = props.isOpen, setIsOpen = props.setIsOpen;

package/dist/{Group-B2oTJg0t.js → Group-BiN0haVp.js}

@@ -3,11 +3,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var index = require('./cjs/appearance/Group.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 
 var groupConfig = {
-    appearance: undefined,
+    appearance: index.groupAppearance,
     setAppearance: function (newComponent) {
         groupConfig.appearance = newComponent;
     },

package/dist/{Group-CVUfaHaS.js → Group-Dc70Z4_7.js}

@@ -1,11 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
+import { groupAppearance } from './appearance/Group.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 
 var groupConfig = {
-    appearance: undefined,
+    appearance: groupAppearance,
     setAppearance: function (newComponent) {
         groupConfig.appearance = newComponent;
     },

package/dist/{Icon-CkynFJm4.js → Icon-B2BwTQnP.js}

@@ -4,13 +4,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
+var index = require('./cjs/appearance/Icon.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 var Link = require('./Link-CqWzwh8V.js');
-var Tooltip = require('./Tooltip-DsTCGS6h.js');
+var Tooltip = require('./Tooltip-PrwacZFC.js');
 
 var iconConfig = {
-    appearance: {},
+    appearance: index.iconAppearance,
     setAppearance: function (newComponent) {
         iconConfig.appearance = newComponent;
     },

package/dist/{Icon-CliIEdbp.js → Icon-ClsRaxDk.js}

@@ -2,13 +2,14 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useMemo } from 'react';
 import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
+import { iconAppearance } from './appearance/Icon.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { a as LinkWrapper } from './Link-CeQuavin.js';
-import { T as Tooltip } from './Tooltip-B2vv4OAX.js';
+import { a as LinkWrapper } from './Link-CzC1kU5C.js';
+import { T as Tooltip } from './Tooltip-ccRCMYQM.js';
 
 var iconConfig = {
-    appearance: {},
+    appearance: iconAppearance,
     setAppearance: function (newComponent) {
         iconConfig.appearance = newComponent;
     },

package/dist/{Input-BSpFMsrf.js → Input-BaicBuyd.js}

@@ -3,14 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var index = require('./cjs/appearance/Input.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 
 var inputConfig = {
-    appearance: undefined,
+    appearance: index.inputAppearance,
     setAppearance: function (newComponent) {
         inputConfig.appearance = newComponent;
     },
-    state: undefined,
+    state: index.inputState,
     // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         inputConfig.state = newComponent;
@@ -82,8 +83,7 @@ var Input = React.forwardRef(function Input(props, ref) {
         prefix: 'width_',
         propsKey: 'width',
     });
-    // prettier-ignore
-    var appearanceConfig = (appearance && inputConfig.appearance && inputConfig.appearance[appearance]);
+    var appearanceConfig = appearance && inputConfig.appearance && inputConfig.appearance[appearance];
     var stateConfig = state && inputConfig.state && inputConfig.state[state];
     return (jsxRuntime.jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&

package/dist/{Input-UkM-ag48.js → Input-DbzsXvEf.js}

@@ -1,14 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
+import { inputAppearance, inputState } from './appearance/Input.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 
 var inputConfig = {
-    appearance: undefined,
+    appearance: inputAppearance,
     setAppearance: function (newComponent) {
         inputConfig.appearance = newComponent;
     },
-    state: undefined,
+    state: inputState,
     // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         inputConfig.state = newComponent;
@@ -80,8 +81,7 @@ var Input = React.forwardRef(function Input(props, ref) {
         prefix: 'width_',
         propsKey: 'width',
     });
-    // prettier-ignore
-    var appearanceConfig = (appearance && inputConfig.appearance && inputConfig.appearance[appearance]);
+    var appearanceConfig = appearance && inputConfig.appearance && inputConfig.appearance[appearance];
     var stateConfig = state && inputConfig.state && inputConfig.state[state];
     return (jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&

package/dist/{Label-ukXod6pv.js → Label-BfotYOmD.js}

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useCallback } from 'react';
 import clsx from 'clsx';
+import { labelAppearance } from './appearance/Label.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { T as Text } from './Text-CG3xPG27.js';
-import { T as Tooltip } from './Tooltip-B2vv4OAX.js';
+import { T as Text } from './Text-kxGZButz.js';
+import { T as Tooltip } from './Tooltip-ccRCMYQM.js';
 
 var labelConfig = {
-    appearance: undefined,
+    appearance: labelAppearance,
     setAppearance: function (newComponent) {
         labelConfig.appearance = newComponent;
     },
 };
 function Label(props) {
-    var appearance = props.appearance, children = props.children, className = props.className, label = props.label, labelTextSize = props.labelTextSize, labelTextWrap = props.labelTextWrap, labelTextColor = props.labelTextColor, labelTextColorHover = props.labelTextColorHover, labelTextWeight = props.labelTextWeight, mode = props.mode, set = props.set, before = props.before, after = props.after, dataTour = props.dataTour, type = props.type, cursor = props.cursor, showTooltip = props.showTooltip, tooltipAlignment = props.tooltipAlignment, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, tooltipAppearance = props.tooltipAppearance, tooltipContent = props.tooltipContent, tooltipArrowPosition = props.tooltipArrowPosition, onClick = props.onClick;
+    var children = props.children, cursor = props.cursor, after = props.after, appearance = props.appearance, before = props.before, className = props.className, dataTour = props.dataTour, label = props.label, labelTextColor = props.labelTextColor, labelTextColorHover = props.labelTextColorHover, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, mode = props.mode, set = props.set, showTooltip = props.showTooltip, tooltipAlignment = props.tooltipAlignment, tooltipAppearance = props.tooltipAppearance, tooltipArrowPosition = props.tooltipArrowPosition, tooltipContent = props.tooltipContent, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, type = props.type, onClick = props.onClick;
     var tooltipRef = useRef(null);
     var onMouseEnterLabel = useCallback(function () {
         var _a;
@@ -74,9 +75,9 @@ function Label(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
                 "label_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass, borderTypeClass, sizeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
-                "label_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), wrapClass, widthClass, alignDirectionClass, alignClass, type && "label_type_".concat(type), set && "label_set_".concat(set), mode && "label_mode_".concat(mode), onClick && (cursor || 'cursor_type_pointer')), "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsx(Text, { className: "label__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textWeight: labelTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextWeight), textWrap: labelTextWrap, children: label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })) : (jsx("div", { className: "label__label", children: label })), children, showTooltip && (jsx(Tooltip, { alignment: tooltipAlignment, appearance: tooltipAppearance, arrowPosition: tooltipArrowPosition, className: "label__tooltip", 
+                "label_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), wrapClass, widthClass, alignDirectionClass, alignClass, type && "label_type_".concat(type), set && "label_set_".concat(set), mode && "label_mode_".concat(mode), onClick && (cursor || 'cursor_type_pointer')), "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsx(Text, { className: "label__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textWeight: labelTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextWeight), textWrap: labelTextWrap, children: label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })) : (jsx("div", { className: "label__label", children: label })), children, showTooltip && (jsx(Tooltip, { className: "label__tooltip", 
                         // @ts-expect-error
-                        ref: tooltipRef, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize, children: tooltipContent }))] }), after] }));
+                        ref: tooltipRef, alignment: tooltipAlignment, appearance: tooltipAppearance, arrowPosition: tooltipArrowPosition, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize, children: tooltipContent }))] }), after] }));
 }
 Label.defaultProps = {
     label: 'Label',

package/dist/{Label-BPP0om7_.js → Label-fp2Bus_T.js}

@@ -3,19 +3,20 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var index = require('./cjs/appearance/Label.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Text = require('./Text-_YhyTsQ1.js');
-var Tooltip = require('./Tooltip-DsTCGS6h.js');
+var Text = require('./Text-CC0xnhmx.js');
+var Tooltip = require('./Tooltip-PrwacZFC.js');
 
 var labelConfig = {
-    appearance: undefined,
+    appearance: index.labelAppearance,
     setAppearance: function (newComponent) {
         labelConfig.appearance = newComponent;
     },
 };
 function Label(props) {
-    var appearance = props.appearance, children = props.children, className = props.className, label = props.label, labelTextSize = props.labelTextSize, labelTextWrap = props.labelTextWrap, labelTextColor = props.labelTextColor, labelTextColorHover = props.labelTextColorHover, labelTextWeight = props.labelTextWeight, mode = props.mode, set = props.set, before = props.before, after = props.after, dataTour = props.dataTour, type = props.type, cursor = props.cursor, showTooltip = props.showTooltip, tooltipAlignment = props.tooltipAlignment, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, tooltipAppearance = props.tooltipAppearance, tooltipContent = props.tooltipContent, tooltipArrowPosition = props.tooltipArrowPosition, onClick = props.onClick;
+    var children = props.children, cursor = props.cursor, after = props.after, appearance = props.appearance, before = props.before, className = props.className, dataTour = props.dataTour, label = props.label, labelTextColor = props.labelTextColor, labelTextColorHover = props.labelTextColorHover, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, mode = props.mode, set = props.set, showTooltip = props.showTooltip, tooltipAlignment = props.tooltipAlignment, tooltipAppearance = props.tooltipAppearance, tooltipArrowPosition = props.tooltipArrowPosition, tooltipContent = props.tooltipContent, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, type = props.type, onClick = props.onClick;
     var tooltipRef = React.useRef(null);
     var onMouseEnterLabel = React.useCallback(function () {
         var _a;
@@ -76,9 +77,9 @@ function Label(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
                 "label_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass, borderTypeClass, sizeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
-                "label_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), wrapClass, widthClass, alignDirectionClass, alignClass, type && "label_type_".concat(type), set && "label_set_".concat(set), mode && "label_mode_".concat(mode), onClick && (cursor || 'cursor_type_pointer')), "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, jsxRuntime.jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "label__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textWeight: labelTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextWeight), textWrap: labelTextWrap, children: label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })) : (jsxRuntime.jsx("div", { className: "label__label", children: label })), children, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { alignment: tooltipAlignment, appearance: tooltipAppearance, arrowPosition: tooltipArrowPosition, className: "label__tooltip", 
+                "label_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), wrapClass, widthClass, alignDirectionClass, alignClass, type && "label_type_".concat(type), set && "label_set_".concat(set), mode && "label_mode_".concat(mode), onClick && (cursor || 'cursor_type_pointer')), "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, jsxRuntime.jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "label__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textWeight: labelTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextWeight), textWrap: labelTextWrap, children: label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })) : (jsxRuntime.jsx("div", { className: "label__label", children: label })), children, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: "label__tooltip", 
                         // @ts-expect-error
-                        ref: tooltipRef, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize, children: tooltipContent }))] }), after] }));
+                        ref: tooltipRef, alignment: tooltipAlignment, appearance: tooltipAppearance, arrowPosition: tooltipArrowPosition, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize, children: tooltipContent }))] }), after] }));
 }
 Label.defaultProps = {
     label: 'Label',

package/dist/{Link-CeQuavin.js → Link-CzC1kU5C.js}

@@ -1,4 +1,4 @@
-import { a as __rest, _ as __assign } from './tslib.es6-5FtW-kfi.js';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';

package/dist/{Loader-CJ8ZCdwy.js → Loader-CU_5Ydmy.js}

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { loaderAppearance } from './appearance/Loader.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { T as Text } from './Text-CG3xPG27.js';
+import { T as Text } from './Text-kxGZButz.js';
 
 // TODO: is better to use context?
 var loaderConfig = {
-    appearance: undefined,
+    appearance: loaderAppearance,
     setAppearance: function (newComponent) {
         loaderConfig.appearance = newComponent;
     },
 };
 function Loader(props) {
     var _a;
-    var appearance = props.appearance, className = props.className, children = props.children, set = props.set, text = props.text, textSize = props.textSize, textColor = props.textColor;
+    var children = props.children, appearance = props.appearance, className = props.className, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize;
     var itemFillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'itemFill',

package/dist/{Loader-fA11tUEJ.js → Loader-Ck59IXGG.js}

@@ -2,20 +2,21 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var index = require('./cjs/appearance/Loader.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Text = require('./Text-_YhyTsQ1.js');
+var Text = require('./Text-CC0xnhmx.js');
 
 // TODO: is better to use context?
 var loaderConfig = {
-    appearance: undefined,
+    appearance: index.loaderAppearance,
     setAppearance: function (newComponent) {
         loaderConfig.appearance = newComponent;
     },
 };
 function Loader(props) {
     var _a;
-    var appearance = props.appearance, className = props.className, children = props.children, set = props.set, text = props.text, textSize = props.textSize, textColor = props.textColor;
+    var children = props.children, appearance = props.appearance, className = props.className, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize;
     var itemFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'itemFill',

package/dist/{MenuItem-BL6WBNjL.js → MenuItem-BEYVY0Vf.js}

@@ -1,19 +1,20 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
+import { menuItemAppearance } from './appearance/MenuItem.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { L as Link } from './Link-CeQuavin.js';
-import { T as Text } from './Text-CG3xPG27.js';
+import { L as Link } from './Link-CzC1kU5C.js';
+import { T as Text } from './Text-kxGZButz.js';
 
 var menuItemConfig = {
-    appearance: undefined,
+    appearance: menuItemAppearance,
     setAppearance: function (newComponent) {
         menuItemConfig.appearance = newComponent;
     },
 };
 function MenuItem(props) {
-    var isActive = props.isActive, isHover = props.isHover, appearance = props.appearance, after = props.after, before = props.before, children = props.children, className = props.className, href = props.href, link = props.link, set = props.set, rel = props.rel, desc = props.desc, linkFill = props.linkFill, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, descTextColor = props.descTextColor, descTextWrap = props.descTextWrap, descTextColorHover = props.descTextColorHover, descTextStyle = props.descTextStyle, label = props.label, target = props.target, textColor = props.textColor, textColorHover = props.textColorHover, textColorActive = props.textColorActive, textGradient = props.textGradient, textSize = props.textSize, textWrap = props.textWrap, textStyle = props.textStyle, textWeight = props.textWeight, underline = props.underline, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    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;
     var alignDirectionClass = useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -70,12 +71,12 @@ function MenuItem(props) {
     var menuItem = useStyles(props).styles;
     var appearanceConfig = appearance && menuItemConfig.appearance && menuItemConfig.appearance[appearance];
     return (jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass, className, sizeClass, fillClass ||
-            (appearance && "fill_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "menu-item_set_".concat(set), justifyContentClass), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('menu-item__label', alignDirectionClass, 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, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textColorActive: isActive && (textColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorActive)), textColorHover: textColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorHover), textColorGradient: textGradient, textStyle: textStyle, textWeight: textWeight, textWrap: textWrap, children: label })), desc && (jsx(Text, { className: "menu-item__desc", size: descTextSize, textColor: descTextColor, textColorHover: descTextColorHover, textColorGradient: descTextGradient, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }));
+            (appearance && "fill_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "menu-item_set_".concat(set), justifyContentClass), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('menu-item__label', alignDirectionClass, 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, 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, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }));
 }
 MenuItem.defaultProps = {
-    size: 'm',
-    LinkComponent: 'a',
     direction: 'horizontal',
+    LinkComponent: 'a',
+    size: 'm',
 };
 
 export { MenuItem as M, menuItemConfig as m };

package/dist/{MenuItem-B5ypY7Uo.js → MenuItem-BJ3uGKCH.js}

@@ -3,19 +3,20 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var index = require('./cjs/appearance/MenuItem.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 var Link = require('./Link-CqWzwh8V.js');
-var Text = require('./Text-_YhyTsQ1.js');
+var Text = require('./Text-CC0xnhmx.js');
 
 var menuItemConfig = {
-    appearance: undefined,
+    appearance: index.menuItemAppearance,
     setAppearance: function (newComponent) {
         menuItemConfig.appearance = newComponent;
     },
 };
 function MenuItem(props) {
-    var isActive = props.isActive, isHover = props.isHover, appearance = props.appearance, after = props.after, before = props.before, children = props.children, className = props.className, href = props.href, link = props.link, set = props.set, rel = props.rel, desc = props.desc, linkFill = props.linkFill, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, descTextColor = props.descTextColor, descTextWrap = props.descTextWrap, descTextColorHover = props.descTextColorHover, descTextStyle = props.descTextStyle, label = props.label, target = props.target, textColor = props.textColor, textColorHover = props.textColorHover, textColorActive = props.textColorActive, textGradient = props.textGradient, textSize = props.textSize, textWrap = props.textWrap, textStyle = props.textStyle, textWeight = props.textWeight, underline = props.underline, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    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;
     var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -72,12 +73,12 @@ function MenuItem(props) {
     var menuItem = useStyles.useStyles(props).styles;
     var appearanceConfig = appearance && menuItemConfig.appearance && menuItemConfig.appearance[appearance];
     return (jsxRuntime.jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass, className, sizeClass, fillClass ||
-            (appearance && "fill_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "menu-item_set_".concat(set), justifyContentClass), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('menu-item__label', alignDirectionClass, 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, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textColorActive: isActive && (textColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorActive)), textColorHover: textColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorHover), textColorGradient: textGradient, textStyle: textStyle, textWeight: textWeight, textWrap: textWrap, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "menu-item__desc", size: descTextSize, textColor: descTextColor, textColorHover: descTextColorHover, textColorGradient: descTextGradient, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }));
+            (appearance && "fill_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "menu-item_set_".concat(set), justifyContentClass), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('menu-item__label', alignDirectionClass, 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, 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, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }));
 }
 MenuItem.defaultProps = {
-    size: 'm',
-    LinkComponent: 'a',
     direction: 'horizontal',
+    LinkComponent: 'a',
+    size: 'm',
 };
 
 exports.MenuItem = MenuItem;

package/dist/{Text-_YhyTsQ1.js → Text-CC0xnhmx.js}

@@ -2,17 +2,18 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var index = require('./cjs/appearance/Text.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 
 var textConfig = {
-    appearance: undefined,
+    appearance: index.textAppearance,
     setAppearance: function (newComponent) {
         textConfig.appearance = newComponent;
     },
 };
 function Text(props) {
-    var after = props.after, appearance = props.appearance, dataTestId = props.dataTestId, before = props.before, children = props.children, className = props.className, cursor = props.cursor, 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 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 cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'cursor_',
         propsKey: 'cursor',
@@ -68,7 +69,7 @@ function Text(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
                 "text_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, textAlignClass, textColorClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textWrapClass, textTruncateClass, type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')), "data-tour": dataTour, htmlFor: htmlFor, style: textStyles, onClick: onClick, onDoubleClick: onDoubleClick, "data-test-id": dataTestId, children: [before, children, after] }));
+                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textWrapClass, textTruncateClass, type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass, 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] }));
 }
 Text.defaultProps = {
     tag: 'span',

package/dist/{Text-CG3xPG27.js → Text-kxGZButz.js}

@@ -1,16 +1,17 @@
 import { jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { textAppearance } from './appearance/Text.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 
 var textConfig = {
-    appearance: undefined,
+    appearance: textAppearance,
     setAppearance: function (newComponent) {
         textConfig.appearance = newComponent;
     },
 };
 function Text(props) {
-    var after = props.after, appearance = props.appearance, dataTestId = props.dataTestId, before = props.before, children = props.children, className = props.className, cursor = props.cursor, 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 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 cursorClass = useDeviceTargetClass(props, {
         prefix: 'cursor_',
         propsKey: 'cursor',
@@ -66,7 +67,7 @@ function Text(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
                 "text_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, textAlignClass, textColorClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textWrapClass, textTruncateClass, type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')), "data-tour": dataTour, htmlFor: htmlFor, style: textStyles, onClick: onClick, onDoubleClick: onDoubleClick, "data-test-id": dataTestId, children: [before, children, after] }));
+                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textWrapClass, textTruncateClass, type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass, 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] }));
 }
 Text.defaultProps = {
     tag: 'span',