@itcase/ui 1.9.27 → 1.9.29

package/dist/components/InputNumber.js

@@ -0,0 +1,178 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { B as Button } from '../Button_es_D74OMP6r.js';
+import { icons24 } from '@itcase/icons/default';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/upperFirst';
+import '../context/Notifications.js';
+import 'uuid';
+import '@itcase/common';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries/useMediaQueries.js';
+import 'react-responsive';
+import '../utils/setViewportProperty.js';
+import '../hooks.js';
+import '../hooks/useStyles/styleAttributes.js';
+import '../hooks/useStyles/useStyles.js';
+import 'lodash/maxBy';
+import '../Icon_es_BstDGBF3.js';
+import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Text_es_DaYcLe4H.js';
+import '../Loader_es_wjTqawH6.js';
+
+const inputNumberAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfacePrimary',
+        labelTextWeight: '400',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconFill: 'accentItemPrimary',
+        iconFillHover: 'surfaceSecondary',
+        iconFillIcon: 'surfaceItemPrimary',
+        iconMinus: icons24.Form.Minus,
+        iconPlus: icons24.Form.Plus,
+        inputNumberTextColor: 'surfaceTextPrimary',
+    },
+};
+
+const inputNumberAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+
+const inputNumberAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        iconFillSize: '24',
+        iconSize: '24',
+        inputNumberTextSize: 'xxl',
+    },
+    sizeXL: {
+        size: 'xl',
+        iconFillSize: '24',
+        iconSize: '24',
+        inputNumberTextSize: 'xl',
+    },
+    sizeL: {
+        size: 'l',
+        iconFillSize: '24',
+        iconSize: '24',
+        inputNumberTextSize: 'l',
+    },
+    sizeM: {
+        size: 'm',
+        iconFillSize: '24',
+        iconSize: '24',
+        inputNumberTextSize: 'm',
+    },
+    sizeS: {
+        size: 's',
+        iconFillSize: '24',
+        iconSize: '24',
+        inputNumberTextSize: 's',
+    },
+};
+
+const inputNumberAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {
+        borderColor: 'none',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+
+const inputNumberAppearanceSurface = {
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        labelTextWeight: '400',
+        borderColor: 'surfaceBorderQuaternary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconFill: 'surfaceSecondary',
+        iconFillHover: 'surfaceSecondary',
+        iconFillIcon: 'surfaceItemQuaternary',
+        iconMinus: icons24.Form.Minus,
+        iconPlus: icons24.Form.Plus,
+        inputNumberTextColor: 'surfaceTextQuaternary',
+    },
+};
+
+const inputNumberAppearance = {
+    ...inputNumberAppearanceDefault,
+    ...inputNumberAppearanceSurface,
+    ...inputNumberAppearanceShape,
+    ...inputNumberAppearanceSize,
+    ...inputNumberAppearanceStyle,
+};
+
+const inputNumberConfig = {
+    appearance: inputNumberAppearance};
+const InputNumber = (props) => {
+    const { id, appearance, className, type = 'custom', min = 0, max = Infinity, step = 1, value = 0, onChange, } = props;
+    const [number, setNumber] = useState(value);
+    useEffect(() => {
+        setNumber(value);
+    }, [value]);
+    const handleChangeValue = useCallback((operation) => {
+        const operationType = operation === 'minus' ? -step : step;
+        const nextValue = number + operationType;
+        if (nextValue < min || nextValue > max) {
+            return null;
+        }
+        setNumber(nextValue);
+        onChange?.(nextValue);
+    }, [max, min, number, onChange, step]);
+    const handleInputValue = (event) => {
+        const value = Number(event.target.value);
+        if (value < min || value > max) {
+            return null;
+        }
+        setNumber(value);
+        onChange?.(value);
+    };
+    const appearanceConfig = useAppearanceConfig(appearance, inputNumberConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, iconFill, iconFillHover, iconFillIcon, iconMinus, iconPlus, iconShape, iconSize, inputNumberTextColorClass, inputNumberTextSizeClass, inputNumberTextWeightClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    if (type === 'number') {
+        return (jsx("input", { id: String(id), type: "number", min: min, max: max, step: step, value: number, onChange: (event) => handleInputValue(event) }));
+    }
+    return (jsxs("div", { id: String(id), className: clsx(className, 'input-number', 'input-number__custom', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input-number_size_${sizeClass}`, widthClass && `width_${widthClass}`), children: [jsx(Button, { className: "input-number__icon", icon: iconMinus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => handleChangeValue('minus') }), jsx("input", { className: clsx(inputNumberTextColorClass &&
+                    `text-color_${inputNumberTextColorClass}`, inputNumberTextSizeClass && `text_size_${inputNumberTextSizeClass}`, inputNumberTextWeightClass &&
+                    `text-weight_${inputNumberTextWeightClass}`), type: "number", min: min, max: max, step: step, value: number, onChange: (event) => handleInputValue(event) }), jsx(Button, { className: "input-number__icon", icon: iconPlus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => handleChangeValue('plus') })] }));
+};
+
+export { InputNumber, inputNumberAppearance };

package/dist/components/InputPassword.js

@@ -4,7 +4,7 @@ import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon } from '../Icon_es_CtZHchZc.js';
+import { I as Icon } from '../Icon_es_BstDGBF3.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -23,7 +23,7 @@ import '../context/UrlAssetPrefix.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../Link_es_P2b6ya7P.js';
-import '../Text_es_CU9KR5AE.js';
+import '../Text_es_DaYcLe4H.js';
 
 const inputPasswordAppearanceDefault = {
     defaultPrimary: {

package/dist/components/Label.js

@@ -1,4 +1,4 @@
-export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_CI2mt2wH.js';
+export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_qnCgQX52.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -18,9 +18,9 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Icon_es_CtZHchZc.js';
+import '../Icon_es_BstDGBF3.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
-import '../Text_es_CU9KR5AE.js';
+import '../Text_es_DaYcLe4H.js';

package/dist/components/Loader.js

@@ -1,4 +1,4 @@
-export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader_es_BvTBRuay.js';
+export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader_es_wjTqawH6.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
@@ -18,4 +18,4 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Text_es_CU9KR5AE.js';
+import '../Text_es_DaYcLe4H.js';

package/dist/components/MenuItem.js

@@ -4,9 +4,9 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon, T as Tooltip } from '../Icon_es_CtZHchZc.js';
+import { I as Icon, T as Tooltip } from '../Icon_es_BstDGBF3.js';
 import { L as Link } from '../Link_es_P2b6ya7P.js';
-import { T as Text } from '../Text_es_CU9KR5AE.js';
+import { T as Text } from '../Text_es_DaYcLe4H.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -217,7 +217,7 @@ const menuItemConfig = {
     },
 };
 function MenuItem(props) {
-    const { appearance, className, label, easing, href, link, LinkComponent, rel, showTooltip, target, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
+    const { appearance, className, dataTestId, dataTour, label, easing, href, link, LinkComponent, rel, showTooltip, target, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
     const tooltipRef = useRef(null);
     const onMouseEnter = useCallback(() => {
         if (showTooltip) {
@@ -242,7 +242,7 @@ function MenuItem(props) {
             : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass
             ? `shape-strength_${shapeStrengthClass}`
             : shapeClass === 'rounded' && 'shape-strength_default', typeClass && `menu-item_type_${typeClass}`, widthClass && `width_${widthClass}`, justifyContentClass &&
-            `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsx(Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", alignment: "right-center", size: tooltipSize, fill: tooltipFill, zIndex: "100", title: tooltipTitle, titleColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize, 
+            `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsx(Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", alignment: "right-center", size: tooltipSize, fill: tooltipFill, zIndex: "100", title: tooltipTitle, titleColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize, 
                 // centering="vertical"
                 shape: tooltipShape, shapeStrength: tooltipShapeStrength, isTooltipDisableState: true }))] }));
 }

package/dist/components/Modal.js

@@ -6,9 +6,9 @@ import { icons24, icons32, icons40 } from '@itcase/icons/default';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title, I as Icon } from '../Icon_es_CtZHchZc.js';
-import { O as Overlay } from '../Overlay_es_BS7OTFoy.js';
-import { L as Loader } from '../Loader_es_BvTBRuay.js';
+import { b as Title, I as Icon } from '../Icon_es_BstDGBF3.js';
+import { O as Overlay } from '../Overlay_es_dNz3djDB.js';
+import { L as Loader } from '../Loader_es_wjTqawH6.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -26,7 +26,7 @@ import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
-import '../Text_es_CU9KR5AE.js';
+import '../Text_es_DaYcLe4H.js';
 
 const modalAppearanceShape = {
     circular: {
@@ -258,7 +258,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     return (modalElement &&
         ReactDOM.createPortal(
         // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [(title || closeIcon) && (jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsx(Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
+        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-testid": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [(title || closeIcon) && (jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsx(Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: handleClickOverlay })] })) : null, 
         // A DOM element

package/dist/components/ModalSheetBottom.js

@@ -5,7 +5,7 @@ import { Sheet } from 'react-modal-sheet';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title } from '../Icon_es_CtZHchZc.js';
+import { b as Title } from '../Icon_es_BstDGBF3.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -23,7 +23,7 @@ import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
-import '../Text_es_CU9KR5AE.js';
+import '../Text_es_DaYcLe4H.js';
 
 const modalSheetBottomAppearanceSize = {
     sizeL: {

package/dist/components/Notification.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { L as Loader } from '../Loader_es_BvTBRuay.js';
+import { L as Loader } from '../Loader_es_wjTqawH6.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_ljlle2Pu.js';
-import { I as Icon } from '../Icon_es_CtZHchZc.js';
-import { T as Text } from '../Text_es_CU9KR5AE.js';
+import { B as Button } from '../Button_es_D74OMP6r.js';
+import { I as Icon } from '../Icon_es_BstDGBF3.js';
+import { T as Text } from '../Text_es_DaYcLe4H.js';
 import { icons24 } from '@itcase/icons/default';
 import { useNotifications, useNotificationsAPI } from '../context/Notifications.js';
 import '../context/UIContext.js';
@@ -184,7 +184,7 @@ function Notification(props) {
     const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'hug', shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, closeIconAppearanceSize, closeIconSrc, } = propsGenerator;
     // @ts-expect-error
     const { styles: notificationStyles } = useStyles(props);
-    return (jsxs("div", { className: clsx('notification__item', `notification__item_${type}`, widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (jsx(Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsx(Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
+    return (jsxs("div", { className: clsx('notification__item', `notification__item_${type}`, widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (jsx(Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsx(Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
 }
 
 function NotificationWrapper(props) {

package/dist/components/Overlay.js

@@ -1,4 +1,4 @@
-export { O as Overlay, a as overlayAppearance, o as overlayConfig } from '../Overlay_es_BS7OTFoy.js';
+export { O as Overlay, a as overlayAppearance, o as overlayConfig } from '../Overlay_es_dNz3djDB.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';

package/dist/components/Pagination.js

@@ -6,9 +6,9 @@ import ReactPaginate from 'react-paginate';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_CTw07zF3.js';
-import { I as Icon } from '../Icon_es_CtZHchZc.js';
-import { T as Text } from '../Text_es_CU9KR5AE.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_B36TJ2oI.js';
+import { I as Icon } from '../Icon_es_BstDGBF3.js';
+import { T as Text } from '../Text_es_DaYcLe4H.js';
 import { icons14, icons24, icons16 } from '@itcase/icons/default';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -310,7 +310,7 @@ function Pagination(props) {
     const minPageSize = Math.min(perPageCount, ...pageCountList);
     // If there are fewer items than the minimum page size - pagination wont work.
     const isPaginationDisplayed = allItemsCount > minPageSize;
-    return (isPaginationDisplayed && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
+    return (isPaginationDisplayed && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
                     `fill fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass &&
                     `text text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
                     `text text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&

package/dist/components/Radio.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { T as Text } from '../Text_es_CU9KR5AE.js';
+import { T as Text } from '../Text_es_DaYcLe4H.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/RangeSlider.js

@@ -19,7 +19,7 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
 function RangeSlider(props) {
-    const { className, min, max, disabled, pushable, range, value, vertical, before, after, set, onChangeSlider, children, } = props;
+    const { className, min, max, disabled, pushable, range, step, value, vertical, before, after, set, onChangeSlider, children, } = props;
     const propsGenerator = useDevicePropsGenerator(props);
     const { fillClass, fillHandleClass, fillHandleDraggingClass, fillHandleDraggingHoverClass, fillHandleHoverClass, fillRailClass, fillTrackClass, shapeClass, widthClass, } = propsGenerator;
     // @ts-expect-error
@@ -27,7 +27,7 @@ function RangeSlider(props) {
     return (jsxs("div", { className: clsx(className, 'range-slider', set && `range-slider_set_${set}`, fillClass && `fill_${fillClass}`, fillTrackClass && `range-slider-track-fill_${fillTrackClass}`, fillRailClass && `range-slider-rail-fill_${fillRailClass}`, fillHandleClass && `range-slider-handle-fill_${fillHandleClass}`, fillHandleHoverClass &&
             `range-slider-handle-fill-hover_${fillHandleHoverClass}`, fillHandleDraggingClass &&
             `range-slider-handle-dragging-fill_${fillHandleDraggingClass}`, fillHandleDraggingHoverClass &&
-            `range-slider-handle-dragging-fill-hover_${fillHandleDraggingHoverClass}`, shapeClass && `range-slider_shape_${shapeClass}`, widthClass && `width_${widthClass}`), style: rangeSliderStyles, children: [before && jsx("div", { className: "range-slider__before", children: before }), jsx(Slider, { className: "range-slider__wrapper", min: min, max: max, disabled: disabled, pushable: pushable, range: range, value: value, vertical: vertical, onChange: onChangeSlider }), children, after && jsx("div", { className: "range-slider__after", children: after })] }));
+            `range-slider-handle-dragging-fill-hover_${fillHandleDraggingHoverClass}`, shapeClass && `range-slider_shape_${shapeClass}`, widthClass && `width_${widthClass}`), style: rangeSliderStyles, children: [before && jsx("div", { className: "range-slider__before", children: before }), jsx(Slider, { className: "range-slider__wrapper", min: min, max: max, disabled: disabled, pushable: pushable, range: range, step: step, value: value, vertical: vertical, onChange: onChangeSlider }), children, after && jsx("div", { className: "range-slider__after", children: after })] }));
 }
 
 export { RangeSlider };

package/dist/components/Response.js

@@ -6,9 +6,9 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_ljlle2Pu.js';
-import { G as Group } from '../Group_es_nBtACpoG.js';
-import { T as Text } from '../Text_es_CU9KR5AE.js';
+import { B as Button } from '../Button_es_D74OMP6r.js';
+import { G as Group } from '../Group_es_C69f2Dom.js';
+import { T as Text } from '../Text_es_DaYcLe4H.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';
 import 'lodash/camelCase';
@@ -23,10 +23,10 @@ import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
-import '../Icon_es_CtZHchZc.js';
+import '../Icon_es_BstDGBF3.js';
 import 'react-inlinesvg';
 import '../Link_es_P2b6ya7P.js';
-import '../Loader_es_BvTBRuay.js';
+import '../Loader_es_wjTqawH6.js';
 
 const responseAppearanceConfirm = {
     confirm: {
@@ -245,7 +245,7 @@ const Response = urlWithAssetPrefix(function Response(props) {
     }, [imageSrc, svgSrc, SvgImage, width, height, svgFillClass]);
     // @ts-expect-error
     const { styles: responseStyles, wrapper: wrapperStyles } = useStyles(props);
-    return (jsxs("div", { className: clsx(className, 'response', bottomButton && `response_bottom-button`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, heightClass && `height_${heightClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, isSkeleton && `response_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: responseStyles, children: [before, jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [ImageComponent && (jsx("div", { className: clsx('response__image', svgFillClass && `svg_fill_${svgFillClass}`, svgPathFillClass && `svg_path_fill_${svgPathFillClass}`), children: ImageComponent })), jsxs("div", { className: "response__wrapper-inner", children: [title && (jsx(Text, { className: "response__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title })), desc && (jsx(Text, { className: "response__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] })] }), (primaryButtonLabel ||
+    return (jsxs("div", { className: clsx(className, 'response', bottomButton && `response_bottom-button`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, heightClass && `height_${heightClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, isSkeleton && `response_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: responseStyles, children: [before, jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [ImageComponent && (jsx("div", { className: clsx('response__image', svgFillClass && `svg_fill_${svgFillClass}`, svgPathFillClass && `svg_path_fill_${svgPathFillClass}`), children: ImageComponent })), jsxs("div", { className: "response__wrapper-inner", children: [title && (jsx(Text, { className: "response__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title })), desc && (jsx(Text, { className: "response__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] })] }), (primaryButtonLabel ||
                 primaryButton ||
                 secondaryButtonLabel ||
                 secondaryButton ||

package/dist/components/Search.js

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_CtZHchZc.js';
-import { T as Text } from '../Text_es_CU9KR5AE.js';
+import { I as Icon } from '../Icon_es_BstDGBF3.js';
+import { T as Text } from '../Text_es_DaYcLe4H.js';
 import { S as Scrollbar } from '../Scrollbar_es_CcMgNvGi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Segmented.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon_es_CtZHchZc.js';
+import { I as Icon } from '../Icon_es_BstDGBF3.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { T as Text } from '../Text_es_CU9KR5AE.js';
+import { T as Text } from '../Text_es_DaYcLe4H.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '@itcase/common';

package/dist/components/Select.js

@@ -1,4 +1,4 @@
-export { a as Select, S as SelectClearIndicator, b as SelectControl, c as SelectDropdownIndicator, d as SelectGroupHeading, e as SelectIndicatorsContainer, f as SelectInput, g as SelectMenu, h as SelectMultiValueContainer, i as SelectMultiValueLabel, j as SelectMultiValueRemove, k as SelectOption, l as SelectPlaceholder, m as SelectSingleValue, n as SelectValueContainer, s as selectConfig } from '../SelectContainer_es_2ZX3VSMS.js';
+export { a as Select, S as SelectClearIndicator, b as SelectControl, c as SelectDropdownIndicator, d as SelectGroupHeading, e as SelectIndicatorsContainer, f as SelectInput, g as SelectMenu, h as SelectMultiValueContainer, i as SelectMultiValueLabel, j as SelectMultiValueRemove, k as SelectOption, l as SelectPlaceholder, m as SelectSingleValue, n as SelectValueContainer, s as selectConfig } from '../SelectContainer_es_CcYDHcBP.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -18,15 +18,15 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Group_es_nBtACpoG.js';
+import '../Group_es_C69f2Dom.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Text_es_CU9KR5AE.js';
+import '../Text_es_DaYcLe4H.js';
 import '@itcase/icons/default';
-import '../Icon_es_CtZHchZc.js';
+import '../Icon_es_BstDGBF3.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
-import '../Loader_es_BvTBRuay.js';
+import '../Loader_es_wjTqawH6.js';
 import '../Divider_es_DNJg0mQR.js';

package/dist/components/Swiper.js

@@ -2,11 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useRef, useCallback, useImperativeHandle, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
-import { G as Group } from '../Group_es_nBtACpoG.js';
-import { T as Text } from '../Text_es_CU9KR5AE.js';
+import { G as Group } from '../Group_es_C69f2Dom.js';
+import { T as Text } from '../Text_es_DaYcLe4H.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title } from '../Icon_es_CtZHchZc.js';
+import { b as Title } from '../Icon_es_BstDGBF3.js';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Switch.js

@@ -3,7 +3,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { T as Text } from '../Text_es_CU9KR5AE.js';
+import { T as Text } from '../Text_es_DaYcLe4H.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';

package/dist/components/Tab.js

@@ -5,10 +5,10 @@ import { useActiveClasses } from '../hooks/useActiveClasses/useActiveClasses.js'
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge, I as Icon } from '../Icon_es_CtZHchZc.js';
+import { B as Badge, I as Icon } from '../Icon_es_BstDGBF3.js';
 import { D as Divider } from '../Divider_es_DNJg0mQR.js';
 import { L as Link } from '../Link_es_P2b6ya7P.js';
-import { T as Text } from '../Text_es_CU9KR5AE.js';
+import { T as Text } from '../Text_es_DaYcLe4H.js';
 import '../hooks/useActiveClasses/useActiveClasses.helpers.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -217,16 +217,16 @@ function Tab(props) {
     const { justifyContentClass, alignClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerFill, dividerFillActive, dividerFillActiveHover, dividerFillDisabled, dividerFillHover, dividerSize, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, linkFill, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: tab } = useStyles(props);
-    return (jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && `tab_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, justifyContentClass && `tab_justify-content_${justifyContentClass}`, isSkeleton && `tab_skeleton`, onClick && 'cursor_type_pointer'), "data-test-id": dataTestId && `${dataTestId}Tab`, "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxs(Link, { className: clsx('tab__link', !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: clsx('tab__wrapper', alignClass && `align_${alignClass}`), children: [label && (jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textColorHoverActive: labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (jsx(Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: clsx('tab__icon_after'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), jsx(Divider, { className: clsx('tab__divider'), width: "fill", direction: "horizontal", size: dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
+    return (jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && `tab_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, justifyContentClass && `tab_justify-content_${justifyContentClass}`, isSkeleton && `tab_skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId && `${dataTestId}Tab`, "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxs(Link, { className: clsx('tab__link', !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: clsx('tab__wrapper', alignClass && `align_${alignClass}`), children: [label && (jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textColorHoverActive: labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (jsx(Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: clsx('tab__icon_after'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), jsx(Divider, { className: clsx('tab__divider'), width: "fill", direction: "horizontal", size: dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
 }
 
 function TabGroup(props) {
-    const { dataTestId, dataTour, className, horizontalScroll, style, tabAppearance, tabList, children, } = props;
+    const { className, dataTestId, dataTour, horizontalScroll, style, tabAppearance, tabList, children, } = props;
     const propsGenerator = useDevicePropsGenerator(props);
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles(props);
-    return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxs(React.Fragment, { children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive }, item.key))), children] })) }));
+    return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxs(React.Fragment, { children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive, onClick: item.onClick }, item.key))), children] })) }));
 }
 
 export { Tab, TabGroup, tabAppearance, tabConfig };

package/dist/components/Text.js

@@ -1,4 +1,4 @@
-export { T as Text, a as textAppearance, t as textConfig } from '../Text_es_CU9KR5AE.js';
+export { T as Text, a as textAppearance, t as textConfig } from '../Text_es_DaYcLe4H.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';