@itcase/ui 1.9.36 → 1.9.38

package/dist/{SelectContainer_cjs_B2fgWgCE.js → SelectContainer_cjs_Bd9llsQa.js}

@@ -7,17 +7,14 @@ var Select = require('react-select');
 var CreatableSelect = require('react-select/creatable');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Group = require('./Group_cjs_CcDdC0Ua.js');
-var Text = require('./Text_cjs_Co2XdYF-.js');
+var Group = require('./Group_cjs_xCUYKUcc.js');
+var Text = require('./Text_cjs_erTy2pUN.js');
 var _default = require('@itcase/icons/default');
-var Icon = require('./Icon_cjs_CQxDPPGY.js');
-var Loader = require('./Loader_cjs_CP1xKwb-.js');
-var Divider = require('./Divider_cjs_1fwsCxEb.js');
+var Icon = require('./Icon_cjs_D20B2YBo.js');
+var Loader = require('./Loader_cjs_DMIUN6_q.js');
+var mergeAppearanceKeys = require('./cjs/utils/mergeAppearanceKeys.js');
+var Divider = require('./Divider_cjs_C5Ou2Kqa.js');
 
-// interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
-//   extends DefaultClearIndicatorProps<Option, IsMulti, Group> {}
-// For use memo need to check "ClearIndicator" props
-// const SelectClearIndicator = React.memo(
 const SelectClearIndicator = (props) => {
     const { children } = props;
     const { clearIcon, clearIconFill } = props.selectProps;
@@ -51,7 +48,6 @@ const selectAppearanceDefault = {
         multipleItemFillHover: 'accentSecondary',
         multipleItemIconFill: 'accentItemPrimary',
         multipleItemTextColor: 'accentTextPrimary',
-        multipleTextColor: 'accentTextPrimary',
         noOptionsTextColor: 'surfaceTextPrimary',
         optionBorder: 'none',
         optionFill: 'surfacePrimary',
@@ -64,7 +60,6 @@ const selectAppearanceDefault = {
         optionTextColorActive: 'accentTextPrimary',
         optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
-        requiredInputBorderColor: 'warningBorderPrimary',
     },
 };
 
@@ -72,21 +67,20 @@ const selectAppearanceDisabled = {
     disabledPrimary: {
         elevation: 8,
         badgeAppearance: 'accentPrimary solid circular',
-        clearIconFill: 'surfaceItemDisabled',
-        dropdownIconFill: 'surfaceItemDisabled',
+        clearIconFill: 'surfaceItemQuaternary',
+        dropdownIconFill: 'surfaceItemQuaternary',
         headingFill: 'surfaceSecondary',
         headingTextColor: 'surfaceTextPrimary',
         inputBorderColor: 'surfaceBorderTertiary',
         inputBorderColorHover: 'surfaceBorderQuaternary',
-        inputCaretColor: 'secondaryItemPrimary',
+        inputCaretColor: 'extraPrimary',
         inputFill: 'surfaceDisabled',
         inputShape: 'rounded',
         inputTextColor: 'surfaceTextPrimary',
         multipleItemFill: 'accentPrimary',
-        multipleItemFillHover: 'surfaceHover',
+        multipleItemFillHover: 'surfaceHoverPrimary',
         multipleItemIconFill: 'accentItemPrimary',
         multipleItemTextColor: 'accentTextPrimary',
-        multipleTextColor: 'accentTextPrimary',
         noOptionsTextColor: 'surfaceTextPrimary',
         optionBorder: 'none',
         optionFill: 'surfacePrimary',
@@ -94,7 +88,6 @@ const selectAppearanceDisabled = {
         optionShape: 'rounded',
         optionTextColor: 'surfaceTextPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
-        requiredInputBorderColor: 'warningBorderPrimary',
     },
 };
 
@@ -120,7 +113,6 @@ const selectAppearanceError = {
         multipleItemFillHover: 'accentSecondary',
         multipleItemIconFill: 'accentItemPrimary',
         multipleItemTextColor: 'accentTextPrimary',
-        multipleTextColor: 'accentTextPrimary',
         noOptionsTextColor: 'surfaceTextPrimary',
         optionBorder: 'none',
         optionFill: 'surfacePrimary',
@@ -133,7 +125,6 @@ const selectAppearanceError = {
         optionTextColorActive: 'accentTextPrimary',
         optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
-        requiredInputBorderColor: 'warningBorderPrimary',
     },
 };
 
@@ -159,7 +150,6 @@ const selectAppearanceRequire = {
         multipleItemFillHover: 'accentSecondary',
         multipleItemIconFill: 'accentItemPrimary',
         multipleItemTextColor: 'accentTextPrimary',
-        multipleTextColor: 'accentTextPrimary',
         noOptionsTextColor: 'surfaceTextPrimary',
         optionBorder: 'none',
         optionFill: 'surfacePrimary',
@@ -172,7 +162,6 @@ const selectAppearanceRequire = {
         optionTextColorActive: 'accentTextPrimary',
         optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
-        requiredInputBorderColor: 'warningBorderPrimary',
     },
 };
 
@@ -206,7 +195,6 @@ const selectAppearanceShape = {
 const selectAppearanceSize = {
     sizeXL: {
         size: 'xl',
-        textLoadingMessageAppearance: 'sizeM',
         badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -226,7 +214,6 @@ const selectAppearanceSize = {
     },
     sizeL: {
         size: 'l',
-        textLoadingMessageAppearance: 'sizeM',
         badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -246,7 +233,6 @@ const selectAppearanceSize = {
     },
     sizeM: {
         size: 'm',
-        textLoadingMessageAppearance: 'sizeM',
         badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -258,7 +244,7 @@ const selectAppearanceSize = {
         loadingMessageTextSize: 'm',
         menuItemSize: 'l',
         multipleItemIcon: _default.icons14.Action.Close,
-        multipleItemTextSize: 'xs ',
+        multipleItemTextSize: 'xs',
         noOptionsTextSize: 'm',
         optionSelectedIcon: _default.icons14.Form.Check,
         optionTextSize: 'm',
@@ -266,7 +252,6 @@ const selectAppearanceSize = {
     },
     sizeS: {
         size: 's',
-        textLoadingMessageAppearance: 'sizeS',
         badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -278,7 +263,7 @@ const selectAppearanceSize = {
         inputTextSize: 's',
         menuItemSize: 'l',
         multipleItemIcon: _default.icons14.Action.Close,
-        multipleItemTextSize: 'xs ',
+        multipleItemTextSize: 'xs',
         noOptionsTextSize: 's',
         optionSelectedIcon: _default.icons14.Form.Check,
         optionTextSize: 's',
@@ -286,7 +271,6 @@ const selectAppearanceSize = {
     },
     sizeXS: {
         size: 'xs',
-        textLoadingMessageAppearance: 'sizeXS',
         badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -295,18 +279,16 @@ const selectAppearanceSize = {
         dropdownIcon: _default.icons16.Arrow.ChevronDownSmall,
         groupTextSize: 'm',
         headingTextWeight: '600',
-        inputTextSize: 'xs ',
+        inputTextSize: 'xs',
         menuItemSize: 'l',
         multipleItemIcon: _default.icons12.Action.Close,
         multipleItemTextSize: 'xxs',
         noOptionsTextSize: 'xs',
-        // optionSelectedIcon: icons12.Form.Check,
         optionTextSize: 'xs',
         placeholderTextSize: 'xs',
     },
     sizeXXS: {
         size: 'xxs',
-        textLoadingMessageAppearance: 'sizeXS',
         badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -318,7 +300,6 @@ const selectAppearanceSize = {
         inputTextSize: 'xs',
         menuItemSize: 'l',
         multipleItemIcon: _default.icons12.Action.Close,
-        // optionSelectedIcon: icons12.Form.Check,
         multipleItemTextSize: 'xxs',
         noOptionsTextSize: 'xs',
         optionTextSize: 'xs',
@@ -365,7 +346,6 @@ const selectAppearanceSuccess = {
         multipleItemFillHover: 'accentSecondary',
         multipleItemIconFill: 'accentItemPrimary',
         multipleItemTextColor: 'accentTextPrimary',
-        multipleTextColor: 'accentTextPrimary',
         noOptionsTextColor: 'surfaceTextPrimary',
         optionBorder: 'none',
         optionFill: 'surfacePrimary',
@@ -378,7 +358,6 @@ const selectAppearanceSuccess = {
         optionTextColorActive: 'accentTextPrimary',
         optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
-        requiredInputBorderColor: 'warningBorderPrimary',
     },
 };
 
@@ -398,8 +377,6 @@ const SelectControl = (props) => {
     return (jsxRuntime.jsxs(React.Fragment, { children: [before, jsxRuntime.jsx(Select.components.Control, { ...props, className: clsx('select__control') }), after] }));
 };
 
-// For use memo need to check "DropdownIndicator" props
-// const SelectDropdownIndicator = React.memo(
 const SelectDropdownIndicator = (props) => {
     const { children } = props;
     const { dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, } = props.selectProps;
@@ -439,20 +416,20 @@ const SelectMenu = (props) => {
 const SelectOverflowBadge = (props) => {
     const { badgeAppearance, badgeAppearanceSize, overflowItemsList } = props;
     const label = `+${overflowItemsList.length}`;
-    return (jsxRuntime.jsx(Icon.Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: "select__multi-value-badge", value: label }));
+    return (jsxRuntime.jsx(Icon.Badge, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: "select__multi-value-badge", value: label }));
 };
 
 const SelectMultiValue = (props) => {
-    const { index, getValue, ...restProps } = props;
-    const multiValueMaxCount = restProps.selectProps.multiValueMaxCount || 100;
+    const { index, selectProps, getValue } = props;
+    const multiValueMaxCount = selectProps.multiValueMaxCount || 100;
     const overflowItemsList = getValue()
         .slice(multiValueMaxCount)
         .map((x) => x.label);
     if (index < multiValueMaxCount) {
-        return jsxRuntime.jsx(Select.components.MultiValue, { ...restProps });
+        return jsxRuntime.jsx(Select.components.MultiValue, { ...props });
     }
     if (index === multiValueMaxCount) {
-        return (jsxRuntime.jsx(SelectOverflowBadge, { badgeAppearance: restProps.selectProps.badgeAppearance, badgeAppearanceSize: restProps.selectProps.badgeAppearanceSize, overflowItemsList: overflowItemsList }));
+        return (jsxRuntime.jsx(SelectOverflowBadge, { badgeAppearance: selectProps.badgeAppearance, badgeAppearanceSize: selectProps.badgeAppearanceSize, overflowItemsList: overflowItemsList }));
     }
     return null;
 };
@@ -481,7 +458,7 @@ const SelectNoOptions = (props) => {
 
 const SelectOption = (props) => {
     const { label, isSelected } = props;
-    const { optionFillActiveDisabled, optionFillDisabled, optionTextColorDisabled, dividerDirection, dividerFill, dividerSize, menuItemSize, optionAfter, optionBefore, optionBorder, optionBorderType, optionFill, optionFillActive, optionFillActiveHover, optionFillHover, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionShape, optionShapeStrength, optionTextColor, optionTextColorActive, optionTextSize, showDivider, } = props.selectProps;
+    const { dividerDirection, dividerFill, dividerSize, menuItemSize, optionAfter, optionBefore, optionBorder, optionBorderType, optionFill, optionFillActive, optionFillActiveDisabled, optionFillActiveHover, optionFillDisabled, optionFillHover, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionShape, optionShapeStrength, optionTextColor, optionTextColorActive, optionTextColorDisabled, optionTextSize, showDivider, } = props.selectProps;
     return (jsxRuntime.jsxs(Select.components.Option, { ...props, className: clsx('select__menu-list-item', isSelected || props.isSelected
             ? !props.isDisabled
                 ? optionFillActive && `fill_active_${optionFillActive}`
@@ -496,7 +473,7 @@ const SelectOption = (props) => {
             !props.isSelected &&
             !props.isDisabled &&
             optionFillHover &&
-            `fill_hover_${optionFillHover}`, isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionBorder && `border-color_${optionBorder}`, optionBorderType && `border_type_${optionBorderType}`, optionShape && `shape_${optionShape}`, optionShapeStrength && `shape-strength_${optionShapeStrength}`), children: [optionBefore, jsxRuntime.jsx(Text.Text, { className: "select__menu-list-item_option", size: optionTextSize, textColor: optionTextColor, textColorActive: optionTextColorActive, textColorDisabled: optionTextColorDisabled, isDisabled: props.isDisabled, isActive: props.isSelected || isSelected, children: label }), (isSelected || props.isSelected) && (jsxRuntime.jsx("div", { className: "select__menu-list-item_selected", children: jsxRuntime.jsx(Icon.Icon, { iconFill: optionSelectedIconFillIcon, iconSize: optionSelectedIconSize, imageSrc: optionSelectedIconSrc, SvgImage: optionSelectedIcon }) })), optionAfter, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+            `fill_hover_${optionFillHover}`, isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionBorder && `border-color_${optionBorder}`, optionBorderType && `border_type_${optionBorderType}`, optionShape && `shape_${optionShape}`, optionShapeStrength && `shape-strength_${optionShapeStrength}`), children: [optionBefore, jsxRuntime.jsx(Text.Text, { className: "select__menu-list-item_option", size: optionTextSize, textColor: optionTextColor, textColorActive: optionTextColorActive, textColorDisabled: optionTextColorDisabled, isActive: props.isSelected || isSelected, isDisabled: props.isDisabled, children: label }), (isSelected || props.isSelected) && (jsxRuntime.jsx("div", { className: "select__menu-list-item_selected", children: jsxRuntime.jsx(Icon.Icon, { iconFill: optionSelectedIconFillIcon, iconSize: optionSelectedIconSize, imageSrc: optionSelectedIconSrc, SvgImage: optionSelectedIcon }) })), optionAfter, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
 };
 
 const SelectPlaceholder = (props) => {
@@ -505,9 +482,11 @@ const SelectPlaceholder = (props) => {
 };
 
 const SelectSingleValue = (props) => {
-    const { data } = props;
+    const { data, children } = props;
     const { inputTextColor, inputTextSize } = props.selectProps;
-    return (jsxRuntime.jsxs(Select.components.SingleValue, { ...props, children: [data && data.optionBefore, jsxRuntime.jsx(Text.Text, { size: inputTextSize, textColor: inputTextColor, children: props.children }), data && data.optionAfter] }));
+    const optionBefore = data.optionBefore;
+    const optionAfter = data.optionBefore;
+    return (jsxRuntime.jsxs(Select.components.SingleValue, { ...props, children: [data && optionBefore, jsxRuntime.jsx(Text.Text, { size: inputTextSize, textColor: inputTextColor, textTruncate: true, children: children }), data && optionAfter] }));
 };
 
 const SelectValueContainer = (props) => {
@@ -529,19 +508,15 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
         ? CreatableSelect
         : Select;
     React.useEffect(() => {
-        // @ts-expect-error
         const onClickOutside = (event) => {
-            const isTargetSelectContainer = 
-            // maybe here ".contains()"?
-            event.target.hasClass &&
+            const isTargetSelectContainer = event.target.hasClass &&
                 event.target.hasClass('select_state_hide-value-container');
             if ('current' in selectRef &&
                 selectRef.current &&
                 selectRef.current.controlRef) {
                 const isTargetInsideController = selectRef.current.controlRef.contains(event.target);
                 if (!isTargetSelectContainer && !isTargetInsideController) {
-                    // @ts-expect-error
-                    selectRef.current?.onInputBlur();
+                    selectRef.current?.onInputBlur(event);
                 }
             }
         };
@@ -570,7 +545,7 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, selectConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, elevation, badgeAppearance, badgeAppearanceSize, badgeTextSize, clearIcon, clearIconFill, dividerFill, dividerSize, dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, groupFillClass, groupTextColorClass, groupTextSizeClass, groupTextWeightClass, inputCaretColorClass, inputTextColorClass, inputTextSizeClass, loaderAppearance, loadingMessageTextColor, loadingMessageTextSize, menuFillClass, multipleItemFill, multipleItemFillHover, multipleItemIcon, multipleItemIconFill, multipleItemShapeRadius, multipleItemTextColorClass, multipleItemTextSizeClass, noOptionsTextColorClass, noOptionsTextSizeClass, optionBorderClass, optionBorderTypeClass, optionFillActiveClass, optionFillActiveDisabledClass, optionFillActiveHoverClass, optionFillClass, optionFillDisabledClass, optionFillHoverClass, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionTextColorActiveClass, optionTextColorClass, optionTextColorDisabled, optionTextSizeClass, placeholderTextColor, placeholderTextSize, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    return (jsxRuntime.jsx(SelectComponent, { className: clsx(className, 'select', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, sizeClass && `select_size_${sizeClass}`, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`, widthClass && `select_width_${widthClass}`), ref: selectRef, elevation: elevation, badgeAppearance: badgeAppearance, badgeAppearanceSize: badgeAppearanceSize, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
+    return (jsxRuntime.jsx(SelectComponent, { className: clsx(className, 'select', isMulti && 'select_multi', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, sizeClass && `select_size_${sizeClass}`, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`, widthClass && `select_width_${widthClass}`), ref: selectRef, elevation: elevation, badgeAppearance: badgeAppearance, badgeAppearanceSize: badgeAppearanceSize, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
             IndicatorSeparator: () => null,
             ClearIndicator: SelectClearIndicator,
             Control: SelectControl,

package/dist/{SelectContainer_es_B5trQDlc.js → SelectContainer_es_Bqek7tN5.js}

@@ -5,17 +5,14 @@ import Select, { components } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { G as Group } from './Group_es_Dml1c8Cz.js';
-import { T as Text } from './Text_es_DaYcLe4H.js';
+import { G as Group } from './Group_es_BVpRj4LR.js';
+import { T as Text } from './Text_es_B85LGfjW.js';
 import { icons12, icons16, icons14, icons24 } from '@itcase/icons/default';
-import { I as Icon, B as Badge } from './Icon_es_Banbw98_.js';
-import { L as Loader } from './Loader_es_Csp5tr40.js';
-import { D as Divider } from './Divider_es_BlOJ77zx.js';
+import { I as Icon, B as Badge } from './Icon_es_DNVHNKFK.js';
+import { L as Loader } from './Loader_es_DFSNJsLL.js';
+import { mergeAppearanceKeys } from './utils/mergeAppearanceKeys.js';
+import { D as Divider } from './Divider_es_BR7ZO8w0.js';
 
-// interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
-//   extends DefaultClearIndicatorProps<Option, IsMulti, Group> {}
-// For use memo need to check "ClearIndicator" props
-// const SelectClearIndicator = React.memo(
 const SelectClearIndicator = (props) => {
     const { children } = props;
     const { clearIcon, clearIconFill } = props.selectProps;
@@ -49,7 +46,6 @@ const selectAppearanceDefault = {
         multipleItemFillHover: 'accentSecondary',
         multipleItemIconFill: 'accentItemPrimary',
         multipleItemTextColor: 'accentTextPrimary',
-        multipleTextColor: 'accentTextPrimary',
         noOptionsTextColor: 'surfaceTextPrimary',
         optionBorder: 'none',
         optionFill: 'surfacePrimary',
@@ -62,7 +58,6 @@ const selectAppearanceDefault = {
         optionTextColorActive: 'accentTextPrimary',
         optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
-        requiredInputBorderColor: 'warningBorderPrimary',
     },
 };
 
@@ -70,21 +65,20 @@ const selectAppearanceDisabled = {
     disabledPrimary: {
         elevation: 8,
         badgeAppearance: 'accentPrimary solid circular',
-        clearIconFill: 'surfaceItemDisabled',
-        dropdownIconFill: 'surfaceItemDisabled',
+        clearIconFill: 'surfaceItemQuaternary',
+        dropdownIconFill: 'surfaceItemQuaternary',
         headingFill: 'surfaceSecondary',
         headingTextColor: 'surfaceTextPrimary',
         inputBorderColor: 'surfaceBorderTertiary',
         inputBorderColorHover: 'surfaceBorderQuaternary',
-        inputCaretColor: 'secondaryItemPrimary',
+        inputCaretColor: 'extraPrimary',
         inputFill: 'surfaceDisabled',
         inputShape: 'rounded',
         inputTextColor: 'surfaceTextPrimary',
         multipleItemFill: 'accentPrimary',
-        multipleItemFillHover: 'surfaceHover',
+        multipleItemFillHover: 'surfaceHoverPrimary',
         multipleItemIconFill: 'accentItemPrimary',
         multipleItemTextColor: 'accentTextPrimary',
-        multipleTextColor: 'accentTextPrimary',
         noOptionsTextColor: 'surfaceTextPrimary',
         optionBorder: 'none',
         optionFill: 'surfacePrimary',
@@ -92,7 +86,6 @@ const selectAppearanceDisabled = {
         optionShape: 'rounded',
         optionTextColor: 'surfaceTextPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
-        requiredInputBorderColor: 'warningBorderPrimary',
     },
 };
 
@@ -118,7 +111,6 @@ const selectAppearanceError = {
         multipleItemFillHover: 'accentSecondary',
         multipleItemIconFill: 'accentItemPrimary',
         multipleItemTextColor: 'accentTextPrimary',
-        multipleTextColor: 'accentTextPrimary',
         noOptionsTextColor: 'surfaceTextPrimary',
         optionBorder: 'none',
         optionFill: 'surfacePrimary',
@@ -131,7 +123,6 @@ const selectAppearanceError = {
         optionTextColorActive: 'accentTextPrimary',
         optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
-        requiredInputBorderColor: 'warningBorderPrimary',
     },
 };
 
@@ -157,7 +148,6 @@ const selectAppearanceRequire = {
         multipleItemFillHover: 'accentSecondary',
         multipleItemIconFill: 'accentItemPrimary',
         multipleItemTextColor: 'accentTextPrimary',
-        multipleTextColor: 'accentTextPrimary',
         noOptionsTextColor: 'surfaceTextPrimary',
         optionBorder: 'none',
         optionFill: 'surfacePrimary',
@@ -170,7 +160,6 @@ const selectAppearanceRequire = {
         optionTextColorActive: 'accentTextPrimary',
         optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
-        requiredInputBorderColor: 'warningBorderPrimary',
     },
 };
 
@@ -204,7 +193,6 @@ const selectAppearanceShape = {
 const selectAppearanceSize = {
     sizeXL: {
         size: 'xl',
-        textLoadingMessageAppearance: 'sizeM',
         badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -224,7 +212,6 @@ const selectAppearanceSize = {
     },
     sizeL: {
         size: 'l',
-        textLoadingMessageAppearance: 'sizeM',
         badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -244,7 +231,6 @@ const selectAppearanceSize = {
     },
     sizeM: {
         size: 'm',
-        textLoadingMessageAppearance: 'sizeM',
         badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -256,7 +242,7 @@ const selectAppearanceSize = {
         loadingMessageTextSize: 'm',
         menuItemSize: 'l',
         multipleItemIcon: icons14.Action.Close,
-        multipleItemTextSize: 'xs ',
+        multipleItemTextSize: 'xs',
         noOptionsTextSize: 'm',
         optionSelectedIcon: icons14.Form.Check,
         optionTextSize: 'm',
@@ -264,7 +250,6 @@ const selectAppearanceSize = {
     },
     sizeS: {
         size: 's',
-        textLoadingMessageAppearance: 'sizeS',
         badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -276,7 +261,7 @@ const selectAppearanceSize = {
         inputTextSize: 's',
         menuItemSize: 'l',
         multipleItemIcon: icons14.Action.Close,
-        multipleItemTextSize: 'xs ',
+        multipleItemTextSize: 'xs',
         noOptionsTextSize: 's',
         optionSelectedIcon: icons14.Form.Check,
         optionTextSize: 's',
@@ -284,7 +269,6 @@ const selectAppearanceSize = {
     },
     sizeXS: {
         size: 'xs',
-        textLoadingMessageAppearance: 'sizeXS',
         badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -293,18 +277,16 @@ const selectAppearanceSize = {
         dropdownIcon: icons16.Arrow.ChevronDownSmall,
         groupTextSize: 'm',
         headingTextWeight: '600',
-        inputTextSize: 'xs ',
+        inputTextSize: 'xs',
         menuItemSize: 'l',
         multipleItemIcon: icons12.Action.Close,
         multipleItemTextSize: 'xxs',
         noOptionsTextSize: 'xs',
-        // optionSelectedIcon: icons12.Form.Check,
         optionTextSize: 'xs',
         placeholderTextSize: 'xs',
     },
     sizeXXS: {
         size: 'xxs',
-        textLoadingMessageAppearance: 'sizeXS',
         badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -316,7 +298,6 @@ const selectAppearanceSize = {
         inputTextSize: 'xs',
         menuItemSize: 'l',
         multipleItemIcon: icons12.Action.Close,
-        // optionSelectedIcon: icons12.Form.Check,
         multipleItemTextSize: 'xxs',
         noOptionsTextSize: 'xs',
         optionTextSize: 'xs',
@@ -363,7 +344,6 @@ const selectAppearanceSuccess = {
         multipleItemFillHover: 'accentSecondary',
         multipleItemIconFill: 'accentItemPrimary',
         multipleItemTextColor: 'accentTextPrimary',
-        multipleTextColor: 'accentTextPrimary',
         noOptionsTextColor: 'surfaceTextPrimary',
         optionBorder: 'none',
         optionFill: 'surfacePrimary',
@@ -376,7 +356,6 @@ const selectAppearanceSuccess = {
         optionTextColorActive: 'accentTextPrimary',
         optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
-        requiredInputBorderColor: 'warningBorderPrimary',
     },
 };
 
@@ -396,8 +375,6 @@ const SelectControl = (props) => {
     return (jsxs(React.Fragment, { children: [before, jsx(components.Control, { ...props, className: clsx('select__control') }), after] }));
 };
 
-// For use memo need to check "DropdownIndicator" props
-// const SelectDropdownIndicator = React.memo(
 const SelectDropdownIndicator = (props) => {
     const { children } = props;
     const { dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, } = props.selectProps;
@@ -437,20 +414,20 @@ const SelectMenu = (props) => {
 const SelectOverflowBadge = (props) => {
     const { badgeAppearance, badgeAppearanceSize, overflowItemsList } = props;
     const label = `+${overflowItemsList.length}`;
-    return (jsx(Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: "select__multi-value-badge", value: label }));
+    return (jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: "select__multi-value-badge", value: label }));
 };
 
 const SelectMultiValue = (props) => {
-    const { index, getValue, ...restProps } = props;
-    const multiValueMaxCount = restProps.selectProps.multiValueMaxCount || 100;
+    const { index, selectProps, getValue } = props;
+    const multiValueMaxCount = selectProps.multiValueMaxCount || 100;
     const overflowItemsList = getValue()
         .slice(multiValueMaxCount)
         .map((x) => x.label);
     if (index < multiValueMaxCount) {
-        return jsx(components.MultiValue, { ...restProps });
+        return jsx(components.MultiValue, { ...props });
     }
     if (index === multiValueMaxCount) {
-        return (jsx(SelectOverflowBadge, { badgeAppearance: restProps.selectProps.badgeAppearance, badgeAppearanceSize: restProps.selectProps.badgeAppearanceSize, overflowItemsList: overflowItemsList }));
+        return (jsx(SelectOverflowBadge, { badgeAppearance: selectProps.badgeAppearance, badgeAppearanceSize: selectProps.badgeAppearanceSize, overflowItemsList: overflowItemsList }));
     }
     return null;
 };
@@ -479,7 +456,7 @@ const SelectNoOptions = (props) => {
 
 const SelectOption = (props) => {
     const { label, isSelected } = props;
-    const { optionFillActiveDisabled, optionFillDisabled, optionTextColorDisabled, dividerDirection, dividerFill, dividerSize, menuItemSize, optionAfter, optionBefore, optionBorder, optionBorderType, optionFill, optionFillActive, optionFillActiveHover, optionFillHover, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionShape, optionShapeStrength, optionTextColor, optionTextColorActive, optionTextSize, showDivider, } = props.selectProps;
+    const { dividerDirection, dividerFill, dividerSize, menuItemSize, optionAfter, optionBefore, optionBorder, optionBorderType, optionFill, optionFillActive, optionFillActiveDisabled, optionFillActiveHover, optionFillDisabled, optionFillHover, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionShape, optionShapeStrength, optionTextColor, optionTextColorActive, optionTextColorDisabled, optionTextSize, showDivider, } = props.selectProps;
     return (jsxs(components.Option, { ...props, className: clsx('select__menu-list-item', isSelected || props.isSelected
             ? !props.isDisabled
                 ? optionFillActive && `fill_active_${optionFillActive}`
@@ -494,7 +471,7 @@ const SelectOption = (props) => {
             !props.isSelected &&
             !props.isDisabled &&
             optionFillHover &&
-            `fill_hover_${optionFillHover}`, isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionBorder && `border-color_${optionBorder}`, optionBorderType && `border_type_${optionBorderType}`, optionShape && `shape_${optionShape}`, optionShapeStrength && `shape-strength_${optionShapeStrength}`), children: [optionBefore, jsx(Text, { className: "select__menu-list-item_option", size: optionTextSize, textColor: optionTextColor, textColorActive: optionTextColorActive, textColorDisabled: optionTextColorDisabled, isDisabled: props.isDisabled, isActive: props.isSelected || isSelected, children: label }), (isSelected || props.isSelected) && (jsx("div", { className: "select__menu-list-item_selected", children: jsx(Icon, { iconFill: optionSelectedIconFillIcon, iconSize: optionSelectedIconSize, imageSrc: optionSelectedIconSrc, SvgImage: optionSelectedIcon }) })), optionAfter, showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+            `fill_hover_${optionFillHover}`, isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionBorder && `border-color_${optionBorder}`, optionBorderType && `border_type_${optionBorderType}`, optionShape && `shape_${optionShape}`, optionShapeStrength && `shape-strength_${optionShapeStrength}`), children: [optionBefore, jsx(Text, { className: "select__menu-list-item_option", size: optionTextSize, textColor: optionTextColor, textColorActive: optionTextColorActive, textColorDisabled: optionTextColorDisabled, isActive: props.isSelected || isSelected, isDisabled: props.isDisabled, children: label }), (isSelected || props.isSelected) && (jsx("div", { className: "select__menu-list-item_selected", children: jsx(Icon, { iconFill: optionSelectedIconFillIcon, iconSize: optionSelectedIconSize, imageSrc: optionSelectedIconSrc, SvgImage: optionSelectedIcon }) })), optionAfter, showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
 };
 
 const SelectPlaceholder = (props) => {
@@ -503,9 +480,11 @@ const SelectPlaceholder = (props) => {
 };
 
 const SelectSingleValue = (props) => {
-    const { data } = props;
+    const { data, children } = props;
     const { inputTextColor, inputTextSize } = props.selectProps;
-    return (jsxs(components.SingleValue, { ...props, children: [data && data.optionBefore, jsx(Text, { size: inputTextSize, textColor: inputTextColor, children: props.children }), data && data.optionAfter] }));
+    const optionBefore = data.optionBefore;
+    const optionAfter = data.optionBefore;
+    return (jsxs(components.SingleValue, { ...props, children: [data && optionBefore, jsx(Text, { size: inputTextSize, textColor: inputTextColor, textTruncate: true, children: children }), data && optionAfter] }));
 };
 
 const SelectValueContainer = (props) => {
@@ -527,19 +506,15 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
         ? CreatableSelect
         : Select;
     useEffect(() => {
-        // @ts-expect-error
         const onClickOutside = (event) => {
-            const isTargetSelectContainer = 
-            // maybe here ".contains()"?
-            event.target.hasClass &&
+            const isTargetSelectContainer = event.target.hasClass &&
                 event.target.hasClass('select_state_hide-value-container');
             if ('current' in selectRef &&
                 selectRef.current &&
                 selectRef.current.controlRef) {
                 const isTargetInsideController = selectRef.current.controlRef.contains(event.target);
                 if (!isTargetSelectContainer && !isTargetInsideController) {
-                    // @ts-expect-error
-                    selectRef.current?.onInputBlur();
+                    selectRef.current?.onInputBlur(event);
                 }
             }
         };
@@ -568,7 +543,7 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
     const appearanceConfig = useAppearanceConfig(appearance, selectConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, elevation, badgeAppearance, badgeAppearanceSize, badgeTextSize, clearIcon, clearIconFill, dividerFill, dividerSize, dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, groupFillClass, groupTextColorClass, groupTextSizeClass, groupTextWeightClass, inputCaretColorClass, inputTextColorClass, inputTextSizeClass, loaderAppearance, loadingMessageTextColor, loadingMessageTextSize, menuFillClass, multipleItemFill, multipleItemFillHover, multipleItemIcon, multipleItemIconFill, multipleItemShapeRadius, multipleItemTextColorClass, multipleItemTextSizeClass, noOptionsTextColorClass, noOptionsTextSizeClass, optionBorderClass, optionBorderTypeClass, optionFillActiveClass, optionFillActiveDisabledClass, optionFillActiveHoverClass, optionFillClass, optionFillDisabledClass, optionFillHoverClass, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionTextColorActiveClass, optionTextColorClass, optionTextColorDisabled, optionTextSizeClass, placeholderTextColor, placeholderTextSize, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    return (jsx(SelectComponent, { className: clsx(className, 'select', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, sizeClass && `select_size_${sizeClass}`, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`, widthClass && `select_width_${widthClass}`), ref: selectRef, elevation: elevation, badgeAppearance: badgeAppearance, badgeAppearanceSize: badgeAppearanceSize, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
+    return (jsx(SelectComponent, { className: clsx(className, 'select', isMulti && 'select_multi', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, sizeClass && `select_size_${sizeClass}`, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`, widthClass && `select_width_${widthClass}`), ref: selectRef, elevation: elevation, badgeAppearance: badgeAppearance, badgeAppearanceSize: badgeAppearanceSize, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
             IndicatorSeparator: () => null,
             ClearIndicator: SelectClearIndicator,
             Control: SelectControl,
@@ -591,4 +566,4 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
         }, "data-testid": dataTestId, "data-tour": dataTour, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions ?? false, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemShapeRadius: multipleItemShapeRadius, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, multiValueMaxCount: multiValueMaxCount, noOptionBorder: optionBorderClass && `border-color_${optionBorderClass}`, noOptionBorderType: optionBorderTypeClass && `border_type_${optionBorderTypeClass}`, noOptionsFill: optionFillClass && `fill_${optionFillClass}`, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillDisabled: optionFillDisabledClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextColorDisabled: optionTextColorDisabled, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect ?? true, isDisabled: isDisabled, isClearable: isClearable ?? false, isLoading: isLoading, isMulti: isMulti ?? false, isSearchable: isSearchable ?? false, set: set, onChange: onChange, onInputChange: onInputChange }));
 });
 
-export { SelectClearIndicator as S, SelectContainer as a, SelectControl as b, SelectDropdownIndicator as c, SelectGroupHeading as d, SelectIndicatorsContainer as e, SelectInput as f, SelectMenu as g, SelectMultiValueContainer as h, SelectMultiValueLabel as i, SelectMultiValueRemove as j, SelectOption as k, SelectPlaceholder as l, SelectSingleValue as m, SelectValueContainer as n, selectConfig as s };
+export { SelectContainer as S, SelectClearIndicator as a, SelectControl as b, SelectDropdownIndicator as c, SelectGroupHeading as d, SelectIndicatorsContainer as e, SelectInput as f, SelectMenu as g, SelectMultiValueContainer as h, SelectMultiValueLabel as i, SelectMultiValueRemove as j, SelectOption as k, SelectPlaceholder as l, SelectSingleValue as m, SelectValueContainer as n, selectConfig as s };

package/dist/{Text_cjs_Co2XdYF-.js → Text_cjs_erTy2pUN.js}

@@ -41,11 +41,10 @@ const textConfig = {
     },
 };
 function Text(props) {
-    const { appearance, className, dataTestId, dataTour, cursor, htmlFor, style, tag: Tag = 'span', before, after, isActive, isDisabled, isSkeleton, onClick, onDoubleClick, children, } = props;
+    const { appearance, className, dataTestId, dataTour, cursor, style, tag: Tag = 'span', before, after, isActive, isDisabled, isSkeleton, onClick, onDoubleClick, children, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, textConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorDisabledClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrapClass, cursorClass, sizeClass, widthClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: textStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'text', sizeClass && `text_size_${sizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, textAlignClass && `text-align_${textAlignClass}`, isDisabled &&
             textColorDisabledClass &&
@@ -61,7 +60,7 @@ function Text(props) {
             `text-color_active_hover_${textColorActiveHoverClass}`, isActive &&
             !isDisabled &&
             textColorActiveClass &&
-            `text-color_active_${textColorActiveClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWrapClass && `word-wrap_${textWrapClass}`, textTruncateClass && `text-truncate_${textTruncateClass}`, isSkeleton && 'text_skeleton', widthClass && `width_${widthClass}`, cursorClass && `cursor_${cursorClass}`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, textStyles, style), onClick: onClick, onDoubleClick: onDoubleClick, children: [before, children, after] }));
+            `text-color_active_${textColorActiveClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWrapClass && `word-wrap_${textWrapClass}`, textTruncateClass && `text-truncate_${textTruncateClass}`, isSkeleton && 'text_skeleton', widthClass && `width_${widthClass}`, cursorClass && `cursor_${cursorClass}`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, textStyles, style), onClick: onClick, onDoubleClick: onDoubleClick, children: [before, children, after] }));
 }
 
 exports.Text = Text;