@itcase/ui 1.8.122 → 1.8.124

package/dist/Image_cjs_CBDMUzv_.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var urlWithAssetPrefix = require('./cjs/hoc/urlWithAssetPrefix.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+
+const Image = urlWithAssetPrefix.urlWithAssetPrefix(function Image(props) {
+    const { className, type, src, title, alt, caption, imageClassName, imageWrapperClassName, mode, overlay, placeholderUrl, before, after, isSkeleton, onClick, onError, children, } = props;
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorImageClass, borderTypeClass, borderWidthClass, cursorClass, heightClass, horizontalAlignClass, imageHeightClass, imageWidthClass, resizeModeClass, shapeClass, verticalAlignClass, widthClass, } = propsGenerator;
+    const { image: imageStyles, styles, wrapper: wrapperStyles, } = useStyles.useStyles(props);
+    console.log(styles);
+    const onErrorImage = React.useCallback((event) => {
+        if (onError) {
+            onError(event);
+        }
+        else if (placeholderUrl && !event.target.src.endsWith(placeholderUrl)) {
+            event.target.src = placeholderUrl;
+        }
+    }, [onError, placeholderUrl]);
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'image', mode && `image_mode_${mode}`, type && `image_type_${type}`, cursorClass && `cursor_${cursorClass}`, horizontalAlignClass &&
+            `image_horizontal-align_${horizontalAlignClass}`, verticalAlignClass && `image_vertical-align_${verticalAlignClass}`, shapeClass && `image_shape_${shapeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, resizeModeClass && `image_resize-mode_${resizeModeClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, isSkeleton && 'image_skeleton'), style: styles, onClick: onClick, children: [before, jsxRuntime.jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsxRuntime.jsx("img", { className: clsx('image__item', imageWidthClass && `width_${imageWidthClass}`, imageHeightClass && `height_${imageHeightClass}`, imageClassName, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderColorImageClass &&
+                            `border-color-image_${borderColorImageClass}`), src: src, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
+});
+
+exports.Image = Image;

package/dist/Image_es_BHec4iVN.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import clsx from 'clsx';
+import { urlWithAssetPrefix } from './hoc/urlWithAssetPrefix.js';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+
+const Image = urlWithAssetPrefix(function Image(props) {
+    const { className, type, src, title, alt, caption, imageClassName, imageWrapperClassName, mode, overlay, placeholderUrl, before, after, isSkeleton, onClick, onError, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorImageClass, borderTypeClass, borderWidthClass, cursorClass, heightClass, horizontalAlignClass, imageHeightClass, imageWidthClass, resizeModeClass, shapeClass, verticalAlignClass, widthClass, } = propsGenerator;
+    const { image: imageStyles, styles, wrapper: wrapperStyles, } = useStyles(props);
+    console.log(styles);
+    const onErrorImage = useCallback((event) => {
+        if (onError) {
+            onError(event);
+        }
+        else if (placeholderUrl && !event.target.src.endsWith(placeholderUrl)) {
+            event.target.src = placeholderUrl;
+        }
+    }, [onError, placeholderUrl]);
+    return (jsxs("div", { className: clsx(className, 'image', mode && `image_mode_${mode}`, type && `image_type_${type}`, cursorClass && `cursor_${cursorClass}`, horizontalAlignClass &&
+            `image_horizontal-align_${horizontalAlignClass}`, verticalAlignClass && `image_vertical-align_${verticalAlignClass}`, shapeClass && `image_shape_${shapeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, resizeModeClass && `image_resize-mode_${resizeModeClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, isSkeleton && 'image_skeleton'), style: styles, onClick: onClick, children: [before, jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsx("img", { className: clsx('image__item', imageWidthClass && `width_${imageWidthClass}`, imageHeightClass && `height_${imageHeightClass}`, imageClassName, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderColorImageClass &&
+                            `border-color-image_${borderColorImageClass}`), src: src, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
+});
+
+export { Image as I };

package/dist/{Input_cjs_Du73R-wm.js → Input_cjs_DDi5JVAV.js}

@@ -5,9 +5,8 @@ var React = require('react');
 var clsx = require('clsx');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
 
-var inputAppearanceDefault = {
+const inputAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceTertiary',
@@ -32,7 +31,7 @@ var inputAppearanceDefault = {
     },
 };
 
-var inputAppearanceDisabled = {
+const inputAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         fillHover: 'surfaceDisabled',
@@ -53,7 +52,7 @@ var inputAppearanceDisabled = {
     },
 };
 
-var inputAppearanceError = {
+const inputAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         borderColor: 'errorBorderQuaternary',
@@ -75,7 +74,7 @@ var inputAppearanceError = {
     },
 };
 
-var inputAppearanceRequire = {
+const inputAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         fillHover: 'warningSecondary',
@@ -98,7 +97,7 @@ var inputAppearanceRequire = {
     },
 };
 
-var inputAppearanceShape = {
+const inputAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -123,7 +122,7 @@ var inputAppearanceShape = {
     },
 };
 
-var inputAppearanceSize = {
+const inputAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         textSize: 'l',
@@ -154,7 +153,7 @@ var inputAppearanceSize = {
     },
 };
 
-var inputAppearanceStyle = {
+const inputAppearanceStyle = {
     solid: {
         borderColor: 'none',
         borderColorHover: 'none',
@@ -170,7 +169,7 @@ var inputAppearanceStyle = {
     },
 };
 
-var inputAppearanceSuccess = {
+const inputAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         borderColor: 'successBorderQuaternary',
@@ -192,21 +191,30 @@ var inputAppearanceSuccess = {
     },
 };
 
-var inputAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, inputAppearanceDefault), inputAppearanceError), inputAppearanceShape), inputAppearanceSuccess), inputAppearanceRequire), inputAppearanceDisabled), inputAppearanceSize), inputAppearanceStyle);
+const inputAppearance = {
+    ...inputAppearanceDefault,
+    ...inputAppearanceError,
+    ...inputAppearanceShape,
+    ...inputAppearanceSuccess,
+    ...inputAppearanceRequire,
+    ...inputAppearanceDisabled,
+    ...inputAppearanceSize,
+    ...inputAppearanceStyle,
+};
 
-var inputConfig = {
+const inputConfig = {
     appearance: inputAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         inputConfig.appearance = appearanceConfig;
     },
 };
-var Input = React.forwardRef(function Input(props, ref) {
-    var id = props.id, dataTestId = props.dataTestId, className = props.className, _a = props.type, type = _a === void 0 ? 'text' : _a, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, autocomplete = props.autocomplete, index = props.index, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
-    var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, inputConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
-    return (jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', isDisabled && 'input_state_disabled', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), textColorClass && "text-color_".concat(textColorClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderColorClass && "border-color_".concat(borderColorClass), placeholderTextColorClass &&
-            "placeholder-text-color_".concat(placeholderTextColorClass), textColorClass && "text-color_".concat(textColorClass)), type: type, ref: ref, disabled: isDisabled, autoComplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), index: index, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+const Input = React.forwardRef(function Input(props, ref) {
+    const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, inputConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', isDisabled && 'input_state_disabled', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
+            `placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: type, ref: ref, disabled: isDisabled, autoComplete: autocomplete, "data-test-id": dataTestId || (name ? `${name}Input` : 'input'), index: index, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
 });
 
 exports.Input = Input;

package/dist/{Input_es_CiDHjDqJ.js → Input_es_BnCXATnh.js}

@@ -3,9 +3,8 @@ import React from 'react';
 import clsx from 'clsx';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
 
-var inputAppearanceDefault = {
+const inputAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceTertiary',
@@ -30,7 +29,7 @@ var inputAppearanceDefault = {
     },
 };
 
-var inputAppearanceDisabled = {
+const inputAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         fillHover: 'surfaceDisabled',
@@ -51,7 +50,7 @@ var inputAppearanceDisabled = {
     },
 };
 
-var inputAppearanceError = {
+const inputAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         borderColor: 'errorBorderQuaternary',
@@ -73,7 +72,7 @@ var inputAppearanceError = {
     },
 };
 
-var inputAppearanceRequire = {
+const inputAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         fillHover: 'warningSecondary',
@@ -96,7 +95,7 @@ var inputAppearanceRequire = {
     },
 };
 
-var inputAppearanceShape = {
+const inputAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -121,7 +120,7 @@ var inputAppearanceShape = {
     },
 };
 
-var inputAppearanceSize = {
+const inputAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         textSize: 'l',
@@ -152,7 +151,7 @@ var inputAppearanceSize = {
     },
 };
 
-var inputAppearanceStyle = {
+const inputAppearanceStyle = {
     solid: {
         borderColor: 'none',
         borderColorHover: 'none',
@@ -168,7 +167,7 @@ var inputAppearanceStyle = {
     },
 };
 
-var inputAppearanceSuccess = {
+const inputAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         borderColor: 'successBorderQuaternary',
@@ -190,21 +189,30 @@ var inputAppearanceSuccess = {
     },
 };
 
-var inputAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, inputAppearanceDefault), inputAppearanceError), inputAppearanceShape), inputAppearanceSuccess), inputAppearanceRequire), inputAppearanceDisabled), inputAppearanceSize), inputAppearanceStyle);
+const inputAppearance = {
+    ...inputAppearanceDefault,
+    ...inputAppearanceError,
+    ...inputAppearanceShape,
+    ...inputAppearanceSuccess,
+    ...inputAppearanceRequire,
+    ...inputAppearanceDisabled,
+    ...inputAppearanceSize,
+    ...inputAppearanceStyle,
+};
 
-var inputConfig = {
+const inputConfig = {
     appearance: inputAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         inputConfig.appearance = appearanceConfig;
     },
 };
-var Input = React.forwardRef(function Input(props, ref) {
-    var id = props.id, dataTestId = props.dataTestId, className = props.className, _a = props.type, type = _a === void 0 ? 'text' : _a, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, autocomplete = props.autocomplete, index = props.index, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
-    var appearanceConfig = useAppearanceConfig(appearance, inputConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
-    return (jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', isDisabled && 'input_state_disabled', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), textColorClass && "text-color_".concat(textColorClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderColorClass && "border-color_".concat(borderColorClass), placeholderTextColorClass &&
-            "placeholder-text-color_".concat(placeholderTextColorClass), textColorClass && "text-color_".concat(textColorClass)), type: type, ref: ref, disabled: isDisabled, autoComplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), index: index, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+const Input = React.forwardRef(function Input(props, ref) {
+    const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, inputConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', isDisabled && 'input_state_disabled', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
+            `placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: type, ref: ref, disabled: isDisabled, autoComplete: autocomplete, "data-test-id": dataTestId || (name ? `${name}Input` : 'input'), index: index, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
 });
 
 export { Input as I, inputAppearance as a, inputConfig as i };

package/dist/{Label_cjs_DMoaOoHi.js → Label_cjs_C-x9blCL.js}

@@ -6,11 +6,10 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon_cjs_Cz6IyOkb.js');
-var Text = require('./Text_cjs_0EINiUq4.js');
-var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
+var Icon = require('./Icon_cjs_DpFxIFv5.js');
+var Text = require('./Text_cjs_BDTjOTVB.js');
 
-var labelAppearanceAccent = {
+const labelAppearanceAccent = {
     accentMutedPrimary: {
         fill: 'accentTertiary',
         borderColor: 'accentBorderSecondary',
@@ -31,7 +30,7 @@ var labelAppearanceAccent = {
     },
 };
 
-var labelAppearanceDanger = {
+const labelAppearanceDanger = {
     dangerMutedPrimary: {
         fill: 'dangerTertiary',
         labelTextColor: 'dangerTextQuaternary',
@@ -48,7 +47,7 @@ var labelAppearanceDanger = {
     },
 };
 
-var labelAppearanceDisabled = {
+const labelAppearanceDisabled = {
     disabledMutedPrimary: {
         fill: 'disabledMuted',
         labelTextColor: 'disabledMutedTextPrimary',
@@ -65,7 +64,7 @@ var labelAppearanceDisabled = {
     },
 };
 
-var labelAppearanceError = {
+const labelAppearanceError = {
     errorMutedPrimary: {
         fill: 'errorDisabled',
         labelTextColor: 'errorTextQuaternary',
@@ -82,7 +81,7 @@ var labelAppearanceError = {
     },
 };
 
-var labelAppearanceGradient = {
+const labelAppearanceGradient = {
     gradientPrimary: {
         fill: 'gradientPrimaryDiagonal',
         labelTextColor: 'white',
@@ -92,7 +91,7 @@ var labelAppearanceGradient = {
     },
 };
 
-var labelAppearanceInfo = {
+const labelAppearanceInfo = {
     infoMutedPrimary: {
         fill: 'infoMuted',
         labelTextColor: 'infoMutedTextPrimary',
@@ -116,7 +115,7 @@ var labelAppearanceInfo = {
     },
 };
 
-var labelAppearancePrimary = {
+const labelAppearancePrimary = {
     primaryMutedPrimary: {
         fill: 'primaryDisabled',
         labelTextColor: 'primaryTextSecondary',
@@ -133,7 +132,7 @@ var labelAppearancePrimary = {
     },
 };
 
-var labelAppearanceSecondary = {
+const labelAppearanceSecondary = {
     secondaryMutedPrimary: {
         fill: 'secondaryDisabled',
         labelTextColor: 'secondaryTextQuaternary',
@@ -150,7 +149,7 @@ var labelAppearanceSecondary = {
     },
 };
 
-var labelAppearanceShape = {
+const labelAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -175,7 +174,7 @@ var labelAppearanceShape = {
     },
 };
 
-var labelAppearanceSize = {
+const labelAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         labelTextSize: 'xxl',
@@ -234,7 +233,7 @@ var labelAppearanceSize = {
     },
 };
 
-var labelAppearanceStyle = {
+const labelAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -248,7 +247,7 @@ var labelAppearanceStyle = {
     },
 };
 
-var labelAppearanceSuccess = {
+const labelAppearanceSuccess = {
     successMutedPrimary: {
         fill: 'successTertiary',
         labelTextColor: 'successTextQuaternary',
@@ -265,7 +264,7 @@ var labelAppearanceSuccess = {
     },
 };
 
-var labelAppearanceSurface = {
+const labelAppearanceSurface = {
     surfaceMutedPrimary: {
         fill: 'surfaceSecondary',
         labelTextColor: 'surfaceTextQuaternary',
@@ -294,7 +293,7 @@ var labelAppearanceSurface = {
     },
 };
 
-var labelAppearanceWarning = {
+const labelAppearanceWarning = {
     warningMutedPrimary: {
         fill: 'warningTertiary',
         labelTextColor: 'warningTextSecondary',
@@ -311,31 +310,44 @@ var labelAppearanceWarning = {
     },
 };
 
-var labelAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, labelAppearanceDisabled), labelAppearanceShape), labelAppearanceSize), labelAppearanceStyle), labelAppearanceGradient), labelAppearanceAccent), labelAppearanceDanger), labelAppearanceError), labelAppearanceInfo), labelAppearancePrimary), labelAppearanceSecondary), labelAppearanceSuccess), labelAppearanceSurface), labelAppearanceWarning);
+const labelAppearance = {
+    ...labelAppearanceDisabled,
+    ...labelAppearanceShape,
+    ...labelAppearanceSize,
+    ...labelAppearanceStyle,
+    ...labelAppearanceGradient,
+    ...labelAppearanceAccent,
+    ...labelAppearanceDanger,
+    ...labelAppearanceError,
+    ...labelAppearanceInfo,
+    ...labelAppearancePrimary,
+    ...labelAppearanceSecondary,
+    ...labelAppearanceSuccess,
+    ...labelAppearanceSurface,
+    ...labelAppearanceWarning,
+};
 
-var labelConfig = {
+const labelConfig = {
     appearance: labelAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         labelConfig.appearance = appearanceConfig;
     },
 };
 function Label(props) {
-    var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, label = props.label, isDisabled = props.isDisabled, cursor = props.cursor, tooltipContent = props.tooltipContent, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
-    var tooltipRef = React.useRef(null);
-    var onMouseEnterLabel = React.useCallback(function () {
-        var _a;
-        (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.openTooltip();
+    const { dataTestId, dataTour, className, appearance, label, isDisabled, cursor, tooltipContent, before, after, isSkeleton, onClick, children, } = props;
+    const tooltipRef = React.useRef(null);
+    const onMouseEnterLabel = React.useCallback(() => {
+        tooltipRef.current?.openTooltip();
     }, []);
-    var onMouseLeaveLabel = React.useCallback(function () {
-        var _a;
-        (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.closeTooltip();
+    const onMouseLeaveLabel = React.useCallback(() => {
+        tooltipRef.current?.closeTooltip();
     }, []);
-    var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, labelConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, labelTextColor = propsGenerator.labelTextColor, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, tooltipAlignment = propsGenerator.tooltipAlignment, tooltipAppearance = propsGenerator.tooltipAppearance, tooltipArrowPosition = propsGenerator.tooltipArrowPosition, tooltipText = propsGenerator.tooltipText, tooltipTextSize = propsGenerator.tooltipTextSize, tooltipTextWeight = propsGenerator.tooltipTextWeight, tooltipTitle = propsGenerator.tooltipTitle, tooltipTitleSize = propsGenerator.tooltipTitleSize, tooltipTitleWeight = propsGenerator.tooltipTitleWeight, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, labelConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const { alignClass, fillClass, fillHoverClass, borderColorClass, borderTypeClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, tooltipAlignment, tooltipAppearance, tooltipArrowPosition, tooltipText, tooltipTextSize, tooltipTextWeight, tooltipTitle, tooltipTitleSize, tooltipTitleWeight, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
-    var labelStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'label', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "label_size_".concat(sizeClass), wrapClass && "word-wrap_".concat(wrapClass), widthClass && "label_width_".concat(widthClass), alignClass && "align_".concat(alignClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), isSkeleton && "label_skeleton", onClick && (cursor || 'cursor_type_pointer')), "data-test-id": dataTestId, "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('label__icon_before'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "label__text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsxRuntime.jsx("div", { className: "label__text", children: label })), children, tooltipContent && (jsxRuntime.jsx(Icon.Tooltip, { className: "label__tooltip", ref: tooltipRef, appearance: tooltipAppearance, alignment: tooltipAlignment, title: tooltipTitle, titleSize: tooltipTitleSize, titleWeight: tooltipTitleWeight, text: tooltipText, textSize: tooltipTextSize, textWeight: tooltipTextWeight, arrowPosition: tooltipArrowPosition, children: tooltipContent }))] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('label__icon_after'), fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), after] }));
+    const { styles: labelStyles } = useStyles.useStyles(props);
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'label', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `label_size_${sizeClass}`, wrapClass && `word-wrap_${wrapClass}`, widthClass && `label_width_${widthClass}`, alignClass && `align_${alignClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `label_skeleton`, onClick && (cursor || 'cursor_type_pointer')), "data-test-id": dataTestId, "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('label__icon_before'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "label__text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsxRuntime.jsx("div", { className: "label__text", children: label })), children, tooltipContent && (jsxRuntime.jsx(Icon.Tooltip, { className: "label__tooltip", ref: tooltipRef, appearance: tooltipAppearance, alignment: tooltipAlignment, title: tooltipTitle, titleSize: tooltipTitleSize, titleWeight: tooltipTitleWeight, text: tooltipText, textSize: tooltipTextSize, textWeight: tooltipTextWeight, arrowPosition: tooltipArrowPosition, children: tooltipContent }))] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('label__icon_after'), fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), after] }));
 }
 
 exports.Label = Label;