@itcase/ui 1.9.50 → 1.9.52

package/dist/{Avatar_cjs_CZ0XJ6d2.js → Avatar_cjs_CvbURI0f.js}

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var Icon = require('./Icon_cjs_CuqEv1jm.js');
-var Image = require('./Image_cjs_C_FMjUjx.js');
+var Image = require('./Image_cjs_Hvjp2QDB.js');
 var Text = require('./Text_cjs_erTy2pUN.js');
 
 const avatarAppearanceDefault = {

package/dist/{Avatar_es_CVr38U27.js → Avatar_es_CV-ffIJu.js}

@@ -3,9 +3,9 @@ import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon, B as Badge } from './Icon_es_DoAtUvPe.js';
-import { I as Image } from './Image_es_Ca7UQOkj.js';
-import { T as Text } from './Text_es_B85LGfjW.js';
+import { I as Icon, B as Badge } from './Icon_es_BYViOa6l.js';
+import { I as Image } from './Image_es_DpOCNWpn.js';
+import { T as Text } from './Text_es_DVNvU0m0.js';
 
 const avatarAppearanceDefault = {
     surfacePrimary: {
@@ -160,4 +160,4 @@ function Avatar(props) {
     return (jsx("div", { className: clsx(className, 'avatar', size && `avatar_size_${sizeClass}`, (badgeValue || badgeAppearance || badgeSize) && 'avatar_status', isSkeleton && `avatar_skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId, "data-tour": dataTour, onClick: onClick, children: jsxs("div", { className: clsx('avatar__wrapper', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [before, src ? (jsx(Image, { className: clsx('avatar__image', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), src: src, placeholderUrl: placeholderUrl })) : (jsx(Text, { className: "avatar__text", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars || count })), (icon || iconSrc) && (jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (badge || badgeValue) && (jsx(Badge, { appearance: badgeAppearance, className: "avatar__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), after] }) }));
 }
 
-export { Avatar as A, avatarConfig as a, avatarAppearance as b };
+export { Avatar as A, avatarAppearance as a, avatarConfig as b };

package/dist/{Button_es_C2vKuxE7.js → Button_es_Dk6_9N-r.js}

@@ -6,10 +6,10 @@ import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceCo
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useHoldProgress } from './hooks/useHoldProgress.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon } from './Icon_es_DoAtUvPe.js';
-import { a as LinkWrapper } from './Link_es_DPZHTF38.js';
-import { L as Loader } from './Loader_es_DFSNJsLL.js';
-import { T as Text } from './Text_es_B85LGfjW.js';
+import { I as Icon } from './Icon_es_BYViOa6l.js';
+import { a as LinkWrapper } from './Link_es_BDAmhIzd.js';
+import { L as Loader } from './Loader_es_DLb2P-Sk.js';
+import { T as Text } from './Text_es_DVNvU0m0.js';
 
 const buttonAppearanceAccent = {
     accentMutedPrimary: {
@@ -414,4 +414,4 @@ const Button = React.forwardRef(function Button(props, ref) {
                     : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && 'button_skeleton', isHolding && 'button_holding', holdState && `button_state_${holdState}`), type: htmlType, title: tooltip, "data-testid": dataTestId && `${dataTestId}-button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onHoldEnd, onPointerDown: onHoldStart, onPointerLeave: onHoldEnd, onPointerUp: onHoldEnd, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [isHolding && (jsx("div", { className: clsx('button__indication', `button__indication_${holdState}`), children: jsx("div", { className: "button__indication-item", children: "\u00A0" }) })), isLoading && (jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
 });
 
-export { Button as B, buttonAppearance as a, buttonConfig as b };
+export { Button as B, buttonConfig as a, buttonAppearance as b };

package/dist/{ChipsGroup_cjs_DVfNiTvV.js → ChipsGroup_cjs_CE-nNENH.js}

@@ -330,13 +330,17 @@ function Chips(props) {
 }
 
 function ChipsGroup(props) {
+    /** TODO:
+     * rename "chipsList" to "chipsOptions"
+     * to do same structure for "Option" object.
+     */
     const { className, dataTestId, dataTour, chipsList, horizontalScroll, style, onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
     const { styles: groupStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'chips-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: children
             ? children
-            : chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconAfterActive: item.iconAfterActive, iconBefore: item.iconBefore, iconBeforeActive: item.iconBeforeActive, isActive: item.isActive, isDisabled: item.isDisabled, onClick: (event) => onClick?.(item, event) }, item.id))) }));
+            : chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconAfterActive: item.iconAfterActive, iconBefore: item.iconBefore, iconBeforeActive: item.iconBeforeActive, isActive: item.isActive, isDisabled: item.isDisabled, onClick: (event) => onClick?.(item, event) }, item.value))) }));
 }
 
 exports.Chips = Chips;

package/dist/{ChipsGroup_es_BvKmBPXK.js → ChipsGroup_es_CxqwFgoo.js}

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { I as Icon, B as Badge } from './Icon_es_DoAtUvPe.js';
-import { T as Text } from './Text_es_B85LGfjW.js';
+import { I as Icon, B as Badge } from './Icon_es_BYViOa6l.js';
+import { T as Text } from './Text_es_DVNvU0m0.js';
 
 const chipsAppearanceAccent = {
     accentMutedPrimary: {
@@ -328,13 +328,17 @@ function Chips(props) {
 }
 
 function ChipsGroup(props) {
+    /** TODO:
+     * rename "chipsList" to "chipsOptions"
+     * to do same structure for "Option" object.
+     */
     const { className, dataTestId, dataTour, chipsList, horizontalScroll, style, onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator(props);
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
     const { styles: groupStyles } = useStyles(props);
     return (jsx("div", { className: clsx(className, 'chips-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: children
             ? children
-            : chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconAfterActive: item.iconAfterActive, iconBefore: item.iconBefore, iconBeforeActive: item.iconBeforeActive, isActive: item.isActive, isDisabled: item.isDisabled, onClick: (event) => onClick?.(item, event) }, item.id))) }));
+            : chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconAfterActive: item.iconAfterActive, iconBefore: item.iconBefore, iconBeforeActive: item.iconBeforeActive, isActive: item.isActive, isDisabled: item.isDisabled, onClick: (event) => onClick?.(item, event) }, item.value))) }));
 }
 
-export { Chips as C, chipsAppearance as a, ChipsGroup as b, chipsConfig as c };
+export { Chips as C, ChipsGroup as a, chipsConfig as b, chipsAppearance as c };

package/dist/{DatePicker_es_D7k0K2pL.js → DatePicker_es_BP0iWHMt.js}

@@ -3,14 +3,14 @@ import React, { useMemo, useCallback, useRef } from 'react';
 import clsx from 'clsx';
 import { ru } from 'date-fns/locale';
 import DatePicker from 'react-datepicker';
+import { B as Button } from './Button_es_Dk6_9N-r.js';
+import { I as Icon } from './Icon_es_BYViOa6l.js';
+import { I as Input } from './Input_es_BYbc2X9M.js';
+import { L as Label } from './Label_es_BPQhW13g.js';
+import { T as Text } from './Text_es_DVNvU0m0.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_C2vKuxE7.js';
-import { I as Icon } from './Icon_es_DoAtUvPe.js';
-import { I as Input } from './Input_es_CYUPx5I_.js';
-import { L as Label } from './Label_es_BHlo5f-u.js';
-import { T as Text } from './Text_es_B85LGfjW.js';
 import { icons14 } from '@itcase/icons/default';
 
 const datePickerSize = {
@@ -190,4 +190,4 @@ function DatePickerInputIcon(props) {
     return (jsx(Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), size: inputIconSize, fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, SvgImage: inputIcon, onClick: () => onClick && onClick() }));
 }
 
-export { DatePickerInput as D, datePickerAppearance as a, datePickerConfig as d };
+export { DatePickerInput as D, datePickerConfig as a, datePickerAppearance as d };

package/dist/{Divider_es_BR7ZO8w0.js → Divider_es_D2snK_vn.js}

@@ -97,4 +97,4 @@ function Divider(props) {
             : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, isDisabled && fillDisabledClass && `fill_disabled_${fillDisabledClass}`, isSkeleton && `divider_skeleton`, !print && 'no-print', print && 'print'), "data-testid": dataTestId, "data-tour": dataTour, style: hrStyles }));
 }
 
-export { Divider as D, dividerAppearance as a, dividerConfig as d };
+export { Divider as D, dividerConfig as a, dividerAppearance as d };

package/dist/{DropdownItem_es_QniQAKA2.js → DropdownItem_es_Xq7G5-UI.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, B as Badge } from './Icon_es_DoAtUvPe.js';
-import { D as Divider } from './Divider_es_BR7ZO8w0.js';
-import { T as Text } from './Text_es_B85LGfjW.js';
+import { I as Icon, B as Badge } from './Icon_es_BYViOa6l.js';
+import { D as Divider } from './Divider_es_D2snK_vn.js';
+import { T as Text } from './Text_es_DVNvU0m0.js';
 
 const dropdownAppearanceAccent = {
     accentPrimary: {

package/dist/{Group_es_BVpRj4LR.js → Group_es_Y1qBBLZU.js}

@@ -53,4 +53,4 @@ const Group = React.forwardRef(function Group(props, ref) {
             : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, !print && 'no-print', print && 'print', onClick && 'cursor_type_pointer'), name: name, ref: ref, "data-id": dataId, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
 });
 
-export { Group as G, groupAppearance as a, groupConfig as g };
+export { Group as G, groupConfig as a, groupAppearance as g };

package/dist/{Icon_es_DoAtUvPe.js → Icon_es_BYViOa6l.js}

@@ -6,8 +6,8 @@ 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 { a as LinkWrapper } from './Link_es_DPZHTF38.js';
-import { T as Text } from './Text_es_B85LGfjW.js';
+import { a as LinkWrapper } from './Link_es_BDAmhIzd.js';
+import { T as Text } from './Text_es_DVNvU0m0.js';
 
 const badgeAppearanceAccent = {
     accentPrimary: {
@@ -1054,4 +1054,4 @@ const removeFillStroke = (code) => {
         .replace(/stroke=".*?"/g, 'stroke=""');
 };
 
-export { Badge as B, Icon as I, Tooltip as T, tooltipAppearance as a, Title as b, titleConfig as c, titleAppearance as d, iconAppearance as e, badgeAppearance as f, badgeConfig as g, iconConfig as i, tooltipConfig as t };
+export { Badge as B, Icon as I, Tooltip as T, tooltipConfig as a, Title as b, titleAppearance as c, titleConfig as d, iconConfig as e, badgeAppearance as f, badgeConfig as g, iconAppearance as i, tooltipAppearance as t };

package/dist/{Image_cjs_C_FMjUjx.js → Image_cjs_Hvjp2QDB.js}

@@ -12,7 +12,7 @@ const Image = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Im
     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);
-    const [imageSrc, setImageSrc] = React.useState(null);
+    const [imageSrc, setImageSrc] = React.useState('');
     // Handles image load errors: calls onError callback or falls back to placeholderUrl
     const handleImageError = React.useCallback((event) => {
         const img = event.target;
@@ -27,7 +27,7 @@ const Image = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Im
     // Syncs imageSrc state with src and placeholderUrl props
     React.useEffect(() => {
         // eslint-disable-next-line react-hooks/set-state-in-effect
-        setImageSrc(src || placeholderUrl || null);
+        setImageSrc(src || placeholderUrl || '');
     }, [src, 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'), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, 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 &&

package/dist/{Image_es_Ca7UQOkj.js → Image_es_DpOCNWpn.js}

@@ -10,7 +10,7 @@ const Image = urlWithAssetPrefix(forwardRef(function Image(props, ref) {
     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);
-    const [imageSrc, setImageSrc] = useState(null);
+    const [imageSrc, setImageSrc] = useState('');
     // Handles image load errors: calls onError callback or falls back to placeholderUrl
     const handleImageError = useCallback((event) => {
         const img = event.target;
@@ -25,7 +25,7 @@ const Image = urlWithAssetPrefix(forwardRef(function Image(props, ref) {
     // Syncs imageSrc state with src and placeholderUrl props
     useEffect(() => {
         // eslint-disable-next-line react-hooks/set-state-in-effect
-        setImageSrc(src || placeholderUrl || null);
+        setImageSrc(src || placeholderUrl || '');
     }, [src, 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'), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, 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 &&

package/dist/{Input_es_CYUPx5I_.js → Input_es_BYbc2X9M.js}

@@ -196,4 +196,4 @@ const Input = React.forwardRef(function Input(props, ref) {
             `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, autoComplete: autocomplete, "data-index": index, "data-testid": dataTestId || (name ? `${name}-input` : 'input'), "data-tour": dataTour, disabled: isDisabled, placeholder: placeholder, readOnly: isReadOnly, value: value, onClick: onClick, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
 });
 
-export { Input as I, inputAppearance as a, inputConfig as i };
+export { Input as I, inputConfig as a, inputAppearance as i };

package/dist/{Label_es_BHlo5f-u.js → Label_es_BPQhW13g.js}

@@ -4,8 +4,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, T as Tooltip } from './Icon_es_DoAtUvPe.js';
-import { T as Text } from './Text_es_B85LGfjW.js';
+import { I as Icon, T as Tooltip } from './Icon_es_BYViOa6l.js';
+import { T as Text } from './Text_es_DVNvU0m0.js';
 
 const labelAppearanceAccent = {
     accentMutedPrimary: {
@@ -329,4 +329,4 @@ function Label(props) {
     return (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-testid": dataTestId, "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('label__icon_before'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsx(Text, { className: "label__text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsx("div", { className: "label__text", children: label })), children, tooltipContent && (jsx(Tooltip, { appearance: tooltipAppearance, className: "label__tooltip", ref: tooltipRef, alignment: tooltipAlignment, title: tooltipTitle, titleSize: tooltipTitleSize, titleWeight: tooltipTitleWeight, text: tooltipText, textSize: tooltipTextSize, textWeight: tooltipTextWeight, arrowPosition: tooltipArrowPosition, children: tooltipContent }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('label__icon_after'), fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), after] }));
 }
 
-export { Label as L, labelAppearance as a, labelConfig as l };
+export { Label as L, labelConfig as a, labelAppearance as l };

package/dist/{Link_es_DPZHTF38.js → Link_es_BDAmhIzd.js}

@@ -269,4 +269,4 @@ function LinkWrapper(props) {
     });
 }
 
-export { Link as L, LinkWrapper as a, linkAppearance as b, linkConfig as l };
+export { Link as L, LinkWrapper as a, linkConfig as b, linkAppearance as l };

package/dist/{Loader_es_DFSNJsLL.js → Loader_es_DLb2P-Sk.js}

@@ -3,7 +3,7 @@ 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 { T as Text } from './Text_es_B85LGfjW.js';
+import { T as Text } from './Text_es_DVNvU0m0.js';
 
 const loaderAppearanceAccent = {
     accentPrimary: {
@@ -135,4 +135,4 @@ function Loader(props) {
     return (jsxs("div", { className: clsx('loader', className, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, sizeClass && `loader_size_${sizeClass}`, isSkeleton && `loader_skeleton`, type && `loader_type_${type}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: loader, children: [children || (jsxs("div", { className: "loader__inner", children: [jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" }), jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" }), jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" })] })), text && (jsx(Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
 }
 
-export { Loader as L, loaderAppearance as a, loaderConfig as l };
+export { Loader as L, loaderConfig as a, loaderAppearance as l };

package/dist/{Overlay_es_Dx6UIr2X.js → Overlay_es_DOO535JM.js}

@@ -34,4 +34,4 @@ function Overlay(props) {
     return (jsx("div", { className: clsx(className, 'overlay', opacityClass && `opacity_${opacityClass}`, blurClass && `blur_${blurClass}`, isOverlay && 'overlay_state_visible', fillClass && `fill_${fillClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));
 }
 
-export { Overlay as O, overlayAppearance as a, overlayConfig as o };
+export { Overlay as O, overlayConfig as a, overlayAppearance as o };

package/dist/{SelectContainer_cjs_DshFNYWN.js → SelectContainer_cjs_qWAMLIkz.js}

@@ -5,10 +5,10 @@ var React = require('react');
 var clsx = require('clsx');
 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_xCUYKUcc.js');
 var Text = require('./Text_cjs_erTy2pUN.js');
+var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var _default = require('@itcase/icons/default');
 var Icon = require('./Icon_cjs_CuqEv1jm.js');
 var Loader = require('./Loader_cjs_DMIUN6_q.js');
@@ -509,12 +509,12 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
         : Select;
     React.useEffect(() => {
         const onClickOutside = (event) => {
-            const isTargetSelectContainer = event.target.hasClass &&
-                event.target.hasClass('select_state_hide-value-container');
+            const target = event.target;
+            const isTargetSelectContainer = target && target.classList.contains('select_state_hide-value-container');
             if ('current' in selectRef &&
                 selectRef.current &&
                 selectRef.current.controlRef) {
-                const isTargetInsideController = selectRef.current.controlRef.contains(event.target);
+                const isTargetInsideController = selectRef.current.controlRef.contains(target);
                 if (!isTargetSelectContainer && !isTargetInsideController) {
                     selectRef.current?.onInputBlur(event);
                 }

package/dist/{SelectContainer_es_Cr3Zset9.js → SelectContainer_es_kRH4DsEh.js}

@@ -3,15 +3,15 @@ import React, { useRef, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import Select, { components } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
+import { G as Group } from './Group_es_Y1qBBLZU.js';
+import { T as Text } from './Text_es_DVNvU0m0.js';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.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_DoAtUvPe.js';
-import { L as Loader } from './Loader_es_DFSNJsLL.js';
+import { I as Icon, B as Badge } from './Icon_es_BYViOa6l.js';
+import { L as Loader } from './Loader_es_DLb2P-Sk.js';
 import { mergeAppearanceKeys } from './utils/mergeAppearanceKeys.js';
-import { D as Divider } from './Divider_es_BR7ZO8w0.js';
+import { D as Divider } from './Divider_es_D2snK_vn.js';
 
 const SelectClearIndicator = (props) => {
     const { children } = props;
@@ -507,12 +507,12 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
         : Select;
     useEffect(() => {
         const onClickOutside = (event) => {
-            const isTargetSelectContainer = event.target.hasClass &&
-                event.target.hasClass('select_state_hide-value-container');
+            const target = event.target;
+            const isTargetSelectContainer = target && target.classList.contains('select_state_hide-value-container');
             if ('current' in selectRef &&
                 selectRef.current &&
                 selectRef.current.controlRef) {
-                const isTargetInsideController = selectRef.current.controlRef.contains(event.target);
+                const isTargetInsideController = selectRef.current.controlRef.contains(target);
                 if (!isTargetSelectContainer && !isTargetInsideController) {
                     selectRef.current?.onInputBlur(event);
                 }

package/dist/{Text_es_B85LGfjW.js → Text_es_DVNvU0m0.js}

@@ -61,4 +61,4 @@ function Text(props) {
             `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] }));
 }
 
-export { Text as T, textAppearance as a, textConfig as t };
+export { Text as T, textConfig as a, textAppearance as t };

package/dist/cjs/components/Avatar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Avatar = require('../../Avatar_cjs_CZ0XJ6d2.js');
+var Avatar = require('../../Avatar_cjs_CvbURI0f.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -26,7 +26,7 @@ require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../../Link_cjs_Dn7UhCYe.js');
 require('../../Text_cjs_erTy2pUN.js');
-require('../../Image_cjs_C_FMjUjx.js');
+require('../../Image_cjs_Hvjp2QDB.js');
 
 
 

package/dist/cjs/components/AvatarStack.js

@@ -6,7 +6,7 @@ var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Avatar = require('../../Avatar_cjs_CZ0XJ6d2.js');
+var Avatar = require('../../Avatar_cjs_CvbURI0f.js');
 var Group = require('../../Group_cjs_xCUYKUcc.js');
 var Text = require('../../Text_cjs_erTy2pUN.js');
 require('react');
@@ -28,7 +28,7 @@ require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_Dn7UhCYe.js');
-require('../../Image_cjs_C_FMjUjx.js');
+require('../../Image_cjs_Hvjp2QDB.js');
 
 const avatarStackAppearanceSize = {
     size16: {

package/dist/cjs/components/Checkbox.js

@@ -2,12 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text_cjs_erTy2pUN.js');
+require('../hooks/useStyles/useStyles.js');
 require('react');
 require('lodash/camelCase');
-require('lodash/castArray');
+require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../context/Notifications.js');
 require('uuid');
@@ -18,79 +19,79 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../hooks/useStyles/useStyles.js');
-require('lodash/maxBy');
+require('lodash/castArray');
 
 const checkboxAppearanceDefault = {
     defaultPrimary: {
+        fill: 'surfaceSecondary',
         fillCheckbox: 'surfaceSecondary',
-        fillCheckboxActive: 'surfaceSecondary',
-        fillCheckboxActiveHover: 'surfaceTertiary',
+        fillCheckboxActive: 'surfaceQuaternary',
+        fillCheckboxActiveHover: 'surfaceActiveHoverTertiary',
         fillCheckboxHover: 'surfaceHoverTertiary',
-        fillCheckmark: 'surfacePrimary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
-        borderColorCheckbox: 'surfaceBorderPrimary',
-        borderColorCheckboxActive: 'surfaceBorderPrimary',
-        borderColorCheckboxActiveHover: 'surfaceBorderPrimary',
+        borderColorCheckbox: 'surfaceBorderQuaternary',
+        borderColorCheckboxActive: 'surfaceBorderQuaternary',
+        borderColorCheckboxActiveHover: 'surfaceBorderActivePrimary',
         borderColorCheckboxHover: 'surfaceBorderHoverPrimary',
     },
 };
 
 const checkboxAppearanceDisabled = {
     disabledPrimary: {
-        fill: 'surfacePrimary',
-        borderColor: 'errorBorderQuaternary',
-        borderHover: 'errorBorderHoverQuaternary',
-        textColor: 'surfaceTextQuaternary',
-    },
-    disabledSecondary: {
         fill: 'surfaceSecondary',
-        borderColor: 'surfaceBorderTertiary',
-        borderHover: 'surfaceBorderHoverQuaternary',
+        fillCheckbox: 'surfaceSecondary',
+        fillCheckboxActive: 'surfaceQuaternary',
+        fillCheckboxActiveHover: 'surfaceActiveHoverTertiary',
+        fillCheckboxHover: 'surfaceHoverTertiary',
+        labelTextColor: 'disabledTextSecondary',
+        descTextColor: 'disabledTextSecondary',
+        borderColorCheckbox: 'surfaceBorderQuaternary',
+        borderColorCheckboxActive: 'surfaceBorderQuaternary',
+        borderColorCheckboxActiveHover: 'surfaceBorderActivePrimary',
+        borderColorCheckboxHover: 'surfaceBorderHoverPrimary',
     },
 };
 
 const checkboxAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
-        fillCheckbox: 'errorPrimary',
-        fillCheckboxActive: 'errorActivePrimary',
+        fillCheckbox: 'errorTertiary',
+        fillCheckboxActive: 'errorQuaternary',
         fillCheckboxActiveHover: 'errorActiveHoverPrimary',
-        fillCheckboxHover: 'surfaceHoverTertiary',
-        fillCheckmark: 'errorPrimary',
+        fillCheckboxHover: 'errorHoverTertiary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
-        borderColorCheckbox: 'errorBorderPrimary',
-        borderColorCheckboxActive: 'errorBorderActivePrimary',
+        borderColorCheckbox: 'errorBorderQuaternary',
+        borderColorCheckboxActive: 'errorBorderActiveQuaternary',
         borderColorCheckboxActiveHover: 'errorBorderActivePrimary',
         borderColorCheckboxHover: 'errorBorderHoverPrimary',
     },
-    errorSecondary: {
-        fill: 'errorSecondary',
-        borderColor: 'errorBorderTertiary',
-        borderHover: 'errorBorderHoverQuaternary',
-    },
 };
 
 const checkboxAppearanceRequire = {
     requirePrimary: {
+        fill: 'warningTertiary',
         fillCheckbox: 'warningTertiary',
-        fillCheckboxActive: 'warningActivePrimary',
-        fillCheckboxActiveHover: 'warningActiveHoverTertiary',
-        fillCheckboxHover: 'warningHoverSecondary',
-        fillCheckmark: 'warningPrimary',
+        fillCheckboxActive: 'warningPrimary',
+        fillCheckboxActiveHover: 'warningActiveHoverPrimary',
+        fillCheckboxHover: 'warningHoverTertiary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
-        borderColorCheckbox: 'warningBorderPrimary',
-        borderColorCheckboxActive: 'warningBorderActivePrimary',
+        borderColorCheckbox: 'warningBorderSecondary',
+        borderColorCheckboxActive: 'warningBorderSecondary',
         borderColorCheckboxActiveHover: 'warningBorderActivePrimary',
         borderColorCheckboxHover: 'warningBorderHoverPrimary',
     },
-    requireSecondary: {
-        fill: 'surfaceSecondary',
-        borderColor: 'surfaceBorderTertiary',
-        borderHover: 'surfaceBorderHoverQuaternary',
+};
+
+const checkboxAppearanceShape = {
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -141,23 +142,18 @@ const checkboxAppearanceStyle = {
 
 const checkboxAppearanceSuccess = {
     successPrimary: {
-        fillCheckbox: 'successPrimary',
-        fillCheckboxActive: 'successActivePrimary',
-        fillCheckboxActiveHover: 'successActiveHoverTertiary',
+        fill: 'successTertiary',
+        fillCheckbox: 'successTertiary',
+        fillCheckboxActive: 'successSecondary',
+        fillCheckboxActiveHover: 'successActiveHoverPrimary',
         fillCheckboxHover: 'successHoverTertiary',
-        fillCheckmark: 'successPrimary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
-        borderColorCheckbox: 'successBorderPrimary',
-        borderColorCheckboxActive: 'successBorderActivePrimary',
+        borderColorCheckbox: 'successBorderSecondary',
+        borderColorCheckboxActive: 'successBorderSecondary',
         borderColorCheckboxActiveHover: 'successBorderActivePrimary',
         borderColorCheckboxHover: 'successBorderHoverPrimary',
     },
-    successSecondary: {
-        fill: 'successSecondary',
-        borderColor: 'successBorderTertiary',
-        borderHover: 'successBorderHoverQuaternary',
-    },
 };
 
 const checkboxAppearance = {
@@ -168,6 +164,7 @@ const checkboxAppearance = {
     ...checkboxAppearanceDisabled,
     ...checkboxAppearanceSize,
     ...checkboxAppearanceStyle,
+    ...checkboxAppearanceShape,
 };
 
 const checkboxConfig = {