@itcase/ui 1.8.38 → 1.8.40

package/dist/{DropdownItem_cjs_DQvByLbN.js → DropdownItem_cjs_B1gGciTB.js}

@@ -6,12 +6,12 @@ var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
+var Tooltip = require('./Tooltip_cjs_BBwH8sjA.js');
 var Divider = require('./Divider_cjs_BmCJj3TN.js');
-var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 
 function Dropdown(props) {
-    var className = props.className, appearance = props.appearance, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, dropdownList = props.dropdownList, before = props.before, after = props.after, isOpen = props.isOpen, setIsOpen = props.setIsOpen, children = props.children;
+    var className = props.className, appearance = props.appearance, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, dropdownList = props.dropdownList, before = props.before, after = props.after, isOpen = props.isOpen, isSkeleton = props.isSkeleton, setIsOpen = props.setIsOpen, children = props.children;
     var dropdownRef = React.useRef(null);
     // const [isOpen, setIsOpen] = useState(false)
     var _c = React.useState({
@@ -64,17 +64,22 @@ function Dropdown(props) {
             ? "shape-strength_".concat(shapeStrengthClass)
             : shapeClass === 'rounded' && 'shape-strength_default', elevationClass && "elevation_".concat(elevationClass), isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, (children || dropdownList) && (jsxRuntime.jsxs("div", { className: clsx('dropdown__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), 
                 // Add "onAnimationEnd" only for wrapper for ignore dropdown button
-                onAnimationEnd: onAnimationEnd, children: [dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.map(function (item) { return (jsxRuntime.jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, isActive: item.isActive }, item.key)); }), children] })), after] }));
+                onAnimationEnd: onAnimationEnd, children: [dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.map(function (item) { return (jsxRuntime.jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, emptyMessage: item.emptyMessage, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, isActive: item.isActive, isSkeleton: isSkeleton }, item.key)); }), children] })), after] }));
 }
 
 var dropdownAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillActive: 'accentPrimaryActive',
+        fillActiveHover: 'accentHoverPrimary',
+        fillHover: 'accentHoverPrimary',
         labelTextColor: 'accentTextPrimary',
         labelTextColorActive: 'accentTextPrimary',
         labelTextColorActiveHover: 'accentTextPrimary',
         labelTextColorHover: 'accentTextPrimary',
+        badgeAppearance: 'surfacePrimary',
+        dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'accentTextPrimary',
         iconAfterFillIcon: 'accentItemPrimary',
         iconBeforeFillIcon: 'accentItemPrimary',
     },
@@ -90,8 +95,11 @@ var dropdownAppearanceAccent = {
 var dropdownAppearanceSize = {
     sizeL: {
         size: 'l',
-        labelTextSize: 'l',
+        labelTextSize: 'm',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
         dividerSize: 's',
+        emptyMessageTextSize: 'm',
         iconAfterFillSize: '24',
         iconAfterSize: '24',
         iconBeforeFillSize: '24',
@@ -100,7 +108,10 @@ var dropdownAppearanceSize = {
     sizeS: {
         size: 's',
         labelTextSize: 's',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
         dividerSize: 's',
+        emptyMessageTextSize: 'm',
         iconAfterFillSize: '16',
         iconAfterSize: '16',
         iconBeforeFillSize: '16',
@@ -109,7 +120,10 @@ var dropdownAppearanceSize = {
     sizeXS: {
         size: 'xs',
         labelTextSize: 'xs',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
         dividerSize: 's',
+        emptyMessageTextSize: 'xs',
         iconAfterFillSize: '12',
         iconAfterSize: '12',
         iconBeforeFillSize: '12',
@@ -134,12 +148,15 @@ var dropdownAppearanceStyle = {
 var dropdownAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
+        fillActive: 'surfacePrimaryActive',
         fillHover: 'surfaceHover',
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorActive: 'surfaceTextPrimary',
         labelTextColorActiveHover: 'surfaceTextPrimary',
         labelTextColorHover: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary',
         dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'surfaceTextPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
     },
@@ -171,21 +188,21 @@ var dropdownItemConfig = {
     },
 };
 function DropdownItem(props) {
-    var className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, showDivider = props.showDivider, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
+    var className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, badgeValue = props.badgeValue, emptyMessage = props.emptyMessage, showDivider = props.showDivider, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, isSkeleton = props.isSkeleton, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
         return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = dropdownItemConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextAlign = propsGenerator.labelTextAlign, labelTextColor = propsGenerator.labelTextColor, labelTextColorActive = propsGenerator.labelTextColorActive, labelTextColorActiveHover = propsGenerator.labelTextColorActiveHover, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, descTextColor = propsGenerator.descTextColor, descTextColorHover = propsGenerator.descTextColorHover, descTextGradient = propsGenerator.descTextGradient, descTextSize = propsGenerator.descTextSize, descTextStyle = propsGenerator.descTextStyle, descTextWeight = propsGenerator.descTextWeight, descTextWrap = propsGenerator.descTextWrap, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextAlign = propsGenerator.labelTextAlign, labelTextColor = propsGenerator.labelTextColor, labelTextColorActive = propsGenerator.labelTextColorActive, labelTextColorActiveHover = propsGenerator.labelTextColorActiveHover, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, descTextColor = propsGenerator.descTextColor, descTextColorHover = propsGenerator.descTextColorHover, descTextGradient = propsGenerator.descTextGradient, descTextSize = propsGenerator.descTextSize, descTextStyle = propsGenerator.descTextStyle, descTextWeight = propsGenerator.descTextWeight, descTextWrap = propsGenerator.descTextWrap, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, emptyMessageTextColor = propsGenerator.emptyMessageTextColor, emptyMessageTextColorHover = propsGenerator.emptyMessageTextColorHover, emptyMessageTextSize = propsGenerator.emptyMessageTextSize, emptyMessageTextStyle = propsGenerator.emptyMessageTextStyle, emptyMessageTextWeight = propsGenerator.emptyMessageTextWeight, emptyMessageTextWrap = propsGenerator.emptyMessageTextWrap, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var dropdownItem = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && "dropdown__item_direction_".concat(directionClass), className, !isActive
             ? fillClass && "fill_".concat(fillClass)
             : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), widthClass && "dropdown__item_width_".concat(widthClass), isDisabled && "dropdown__item_state_disabled", onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass &&
-            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: !isActive && labelTextColor, textColorActive: "accentTextPrimary", textColorActive: isActive && labelTextColorActive, textColorHover: !isActive && labelTextColorHover, textColorHoverActive: isActive && labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc }))] })), after, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), widthClass && "dropdown__item_width_".concat(widthClass), isDisabled && "dropdown__item_state_disabled", onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), isSkeleton && "dropdown__item_skeleton", justifyContentClass &&
+            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: !isActive && labelTextColor, textColorActive: "accentTextPrimary", textColorActive: isActive && labelTextColorActive, textColorHover: !isActive && labelTextColorHover, textColorHoverActive: isActive && labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (jsxRuntime.jsx(Tooltip.Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
 }
 
 exports.Dropdown = Dropdown;

package/dist/{DropdownItem_es_KppIfto7.js → DropdownItem_es_JVT4f6Nb.js}

@@ -4,12 +4,12 @@ import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
+import { I as Icon, B as Badge } from './Tooltip_es_Y2aoFQW7.js';
 import { D as Divider } from './Divider_es_kY-30pft.js';
-import { I as Icon } from './Tooltip_es_ltCY-w4M.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 
 function Dropdown(props) {
-    var className = props.className, appearance = props.appearance, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, dropdownList = props.dropdownList, before = props.before, after = props.after, isOpen = props.isOpen, setIsOpen = props.setIsOpen, children = props.children;
+    var className = props.className, appearance = props.appearance, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, dropdownList = props.dropdownList, before = props.before, after = props.after, isOpen = props.isOpen, isSkeleton = props.isSkeleton, setIsOpen = props.setIsOpen, children = props.children;
     var dropdownRef = useRef(null);
     // const [isOpen, setIsOpen] = useState(false)
     var _c = useState({
@@ -62,17 +62,22 @@ function Dropdown(props) {
             ? "shape-strength_".concat(shapeStrengthClass)
             : shapeClass === 'rounded' && 'shape-strength_default', elevationClass && "elevation_".concat(elevationClass), isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, (children || dropdownList) && (jsxs("div", { className: clsx('dropdown__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), 
                 // Add "onAnimationEnd" only for wrapper for ignore dropdown button
-                onAnimationEnd: onAnimationEnd, children: [dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.map(function (item) { return (jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, isActive: item.isActive }, item.key)); }), children] })), after] }));
+                onAnimationEnd: onAnimationEnd, children: [dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.map(function (item) { return (jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, emptyMessage: item.emptyMessage, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, isActive: item.isActive, isSkeleton: isSkeleton }, item.key)); }), children] })), after] }));
 }
 
 var dropdownAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillActive: 'accentPrimaryActive',
+        fillActiveHover: 'accentHoverPrimary',
+        fillHover: 'accentHoverPrimary',
         labelTextColor: 'accentTextPrimary',
         labelTextColorActive: 'accentTextPrimary',
         labelTextColorActiveHover: 'accentTextPrimary',
         labelTextColorHover: 'accentTextPrimary',
+        badgeAppearance: 'surfacePrimary',
+        dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'accentTextPrimary',
         iconAfterFillIcon: 'accentItemPrimary',
         iconBeforeFillIcon: 'accentItemPrimary',
     },
@@ -88,8 +93,11 @@ var dropdownAppearanceAccent = {
 var dropdownAppearanceSize = {
     sizeL: {
         size: 'l',
-        labelTextSize: 'l',
+        labelTextSize: 'm',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
         dividerSize: 's',
+        emptyMessageTextSize: 'm',
         iconAfterFillSize: '24',
         iconAfterSize: '24',
         iconBeforeFillSize: '24',
@@ -98,7 +106,10 @@ var dropdownAppearanceSize = {
     sizeS: {
         size: 's',
         labelTextSize: 's',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
         dividerSize: 's',
+        emptyMessageTextSize: 'm',
         iconAfterFillSize: '16',
         iconAfterSize: '16',
         iconBeforeFillSize: '16',
@@ -107,7 +118,10 @@ var dropdownAppearanceSize = {
     sizeXS: {
         size: 'xs',
         labelTextSize: 'xs',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
         dividerSize: 's',
+        emptyMessageTextSize: 'xs',
         iconAfterFillSize: '12',
         iconAfterSize: '12',
         iconBeforeFillSize: '12',
@@ -132,12 +146,15 @@ var dropdownAppearanceStyle = {
 var dropdownAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
+        fillActive: 'surfacePrimaryActive',
         fillHover: 'surfaceHover',
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorActive: 'surfaceTextPrimary',
         labelTextColorActiveHover: 'surfaceTextPrimary',
         labelTextColorHover: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary',
         dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'surfaceTextPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
     },
@@ -169,21 +186,21 @@ var dropdownItemConfig = {
     },
 };
 function DropdownItem(props) {
-    var className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, showDivider = props.showDivider, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
+    var className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, badgeValue = props.badgeValue, emptyMessage = props.emptyMessage, showDivider = props.showDivider, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, isSkeleton = props.isSkeleton, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
         return (__assign(__assign({}, resultConfig), (_a = dropdownItemConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextAlign = propsGenerator.labelTextAlign, labelTextColor = propsGenerator.labelTextColor, labelTextColorActive = propsGenerator.labelTextColorActive, labelTextColorActiveHover = propsGenerator.labelTextColorActiveHover, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, descTextColor = propsGenerator.descTextColor, descTextColorHover = propsGenerator.descTextColorHover, descTextGradient = propsGenerator.descTextGradient, descTextSize = propsGenerator.descTextSize, descTextStyle = propsGenerator.descTextStyle, descTextWeight = propsGenerator.descTextWeight, descTextWrap = propsGenerator.descTextWrap, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextAlign = propsGenerator.labelTextAlign, labelTextColor = propsGenerator.labelTextColor, labelTextColorActive = propsGenerator.labelTextColorActive, labelTextColorActiveHover = propsGenerator.labelTextColorActiveHover, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, descTextColor = propsGenerator.descTextColor, descTextColorHover = propsGenerator.descTextColorHover, descTextGradient = propsGenerator.descTextGradient, descTextSize = propsGenerator.descTextSize, descTextStyle = propsGenerator.descTextStyle, descTextWeight = propsGenerator.descTextWeight, descTextWrap = propsGenerator.descTextWrap, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, emptyMessageTextColor = propsGenerator.emptyMessageTextColor, emptyMessageTextColorHover = propsGenerator.emptyMessageTextColorHover, emptyMessageTextSize = propsGenerator.emptyMessageTextSize, emptyMessageTextStyle = propsGenerator.emptyMessageTextStyle, emptyMessageTextWeight = propsGenerator.emptyMessageTextWeight, emptyMessageTextWrap = propsGenerator.emptyMessageTextWrap, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var dropdownItem = useStyles(props).styles;
     return (jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && "dropdown__item_direction_".concat(directionClass), className, !isActive
             ? fillClass && "fill_".concat(fillClass)
             : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), widthClass && "dropdown__item_width_".concat(widthClass), isDisabled && "dropdown__item_state_disabled", onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass &&
-            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: !isActive && labelTextColor, textColorActive: "accentTextPrimary", textColorActive: isActive && labelTextColorActive, textColorHover: !isActive && labelTextColorHover, textColorHoverActive: isActive && labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc }))] })), after, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), widthClass && "dropdown__item_width_".concat(widthClass), isDisabled && "dropdown__item_state_disabled", onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), isSkeleton && "dropdown__item_skeleton", justifyContentClass &&
+            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: !isActive && labelTextColor, textColorActive: "accentTextPrimary", textColorActive: isActive && labelTextColorActive, textColorHover: !isActive && labelTextColorHover, textColorHoverActive: isActive && labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (jsx(Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
 }
 
 export { Dropdown as D, DropdownItem as a, dropdownItemConfig as b, dropdownItemAppearance as d };

package/dist/{Image_cjs_CCWqbNn4.js → Image_cjs_2zEjohYE.js}

@@ -3,11 +3,12 @@
 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');
 
-function Image(props) {
-    var className = props.className, type = props.type, src = props.src, title = props.title, onError = props.onError, alt = props.alt, caption = props.caption, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, placeholderUrl = props.placeholderUrl, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
+var Image = urlWithAssetPrefix.urlWithAssetPrefix(function Image(props) {
+    var className = props.className, type = props.type, src = props.src, title = props.title, alt = props.alt, caption = props.caption, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, placeholderUrl = props.placeholderUrl, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, onError = props.onError, children = props.children;
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
     var _a = useStyles.useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
@@ -21,7 +22,7 @@ function Image(props) {
     }, [onError, placeholderUrl]);
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass &&
             "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(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_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass &&
-                            "border-color-image_".concat(borderColorImageClass)), src: src, title: title || alt, onError: onErrorImage, alt: alt || title, style: imageStyles }), overlay, caption, children] }), after] }));
-}
+                            "border-color-image_".concat(borderColorImageClass)), src: src, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
+});
 
 exports.Image = Image;

package/dist/{Image_es_DZUVp0FS.js → Image_es_ChF-63wh.js}

@@ -1,11 +1,12 @@
 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';
 
-function Image(props) {
-    var className = props.className, type = props.type, src = props.src, title = props.title, onError = props.onError, alt = props.alt, caption = props.caption, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, placeholderUrl = props.placeholderUrl, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
+var Image = urlWithAssetPrefix(function Image(props) {
+    var className = props.className, type = props.type, src = props.src, title = props.title, alt = props.alt, caption = props.caption, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, placeholderUrl = props.placeholderUrl, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, onError = props.onError, children = props.children;
     var propsGenerator = useDevicePropsGenerator(props);
     var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
     var _a = useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
@@ -19,7 +20,7 @@ function Image(props) {
     }, [onError, placeholderUrl]);
     return (jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass &&
             "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(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_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass &&
-                            "border-color-image_".concat(borderColorImageClass)), src: src, title: title || alt, onError: onErrorImage, alt: alt || title, style: imageStyles }), overlay, caption, children] }), after] }));
-}
+                            "border-color-image_".concat(borderColorImageClass)), src: src, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
+});
 
 export { Image as I };

package/dist/{Label_cjs_BGJfyrOL.js → Label_cjs_Mb8j2bLu.js}

@@ -6,7 +6,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
+var Tooltip = require('./Tooltip_cjs_BBwH8sjA.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 
 var labelAppearanceAccent = {
@@ -74,7 +74,6 @@ var labelAppearanceError = {
     },
     errorPrimary: {
         fill: 'errorPrimary',
-        fillHover: 'errorPrimaryHover',
         labelTextColor: 'errorTextPrimary',
         borderColor: 'errorBorderSecondary',
         iconAfterFillIcon: 'errorItemPrimary',
@@ -110,7 +109,6 @@ var labelAppearancePrimary = {
     primaryMutedPrimary: {
         fill: 'primaryDisabled',
         labelTextColor: 'primaryTextSecondary',
-        labelTextColorHover: 'primaryTextSecondary',
         borderColor: 'primaryBorderTertiary',
         iconAfterFillIcon: 'primaryItemSecondary',
         iconBeforeFillIcon: 'primaryItemSecondary',
@@ -224,7 +222,6 @@ var labelAppearanceSuccess = {
     },
     successPrimary: {
         fill: 'successPrimary',
-        fillHover: 'successPrimaryHover',
         labelTextColor: 'successTextPrimary',
         borderColor: 'successBorderSecondary',
         iconAfterFillIcon: 'successItemPrimary',
@@ -236,7 +233,6 @@ var labelAppearanceSurface = {
     surfaceMutedPrimary: {
         fill: 'surfaceSecondary',
         labelTextColor: 'surfaceTextQuaternary',
-        labelTextColorHover: 'surfaceTextQuaternary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFillIcon: 'surfaceItemQuaternary',
         iconBeforeFillIcon: 'surfaceItemQuaternary',

package/dist/{Label_es_C4Px7b-N.js → Label_es_CIDBUVgO.js}

@@ -4,7 +4,7 @@ import { useRef, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon, T as Tooltip } from './Tooltip_es_ltCY-w4M.js';
+import { I as Icon, T as Tooltip } from './Tooltip_es_Y2aoFQW7.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 
 var labelAppearanceAccent = {
@@ -72,7 +72,6 @@ var labelAppearanceError = {
     },
     errorPrimary: {
         fill: 'errorPrimary',
-        fillHover: 'errorPrimaryHover',
         labelTextColor: 'errorTextPrimary',
         borderColor: 'errorBorderSecondary',
         iconAfterFillIcon: 'errorItemPrimary',
@@ -108,7 +107,6 @@ var labelAppearancePrimary = {
     primaryMutedPrimary: {
         fill: 'primaryDisabled',
         labelTextColor: 'primaryTextSecondary',
-        labelTextColorHover: 'primaryTextSecondary',
         borderColor: 'primaryBorderTertiary',
         iconAfterFillIcon: 'primaryItemSecondary',
         iconBeforeFillIcon: 'primaryItemSecondary',
@@ -222,7 +220,6 @@ var labelAppearanceSuccess = {
     },
     successPrimary: {
         fill: 'successPrimary',
-        fillHover: 'successPrimaryHover',
         labelTextColor: 'successTextPrimary',
         borderColor: 'successBorderSecondary',
         iconAfterFillIcon: 'successItemPrimary',
@@ -234,7 +231,6 @@ var labelAppearanceSurface = {
     surfaceMutedPrimary: {
         fill: 'surfaceSecondary',
         labelTextColor: 'surfaceTextQuaternary',
-        labelTextColorHover: 'surfaceTextQuaternary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFillIcon: 'surfaceItemQuaternary',
         iconBeforeFillIcon: 'surfaceItemQuaternary',

package/dist/{Tooltip_cjs_DHduWa-v.js → Tooltip_cjs_BBwH8sjA.js}

@@ -8,6 +8,7 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 var SVG = require('react-inlinesvg');
+var urlWithAssetPrefix = require('./cjs/hoc/urlWithAssetPrefix.js');
 var Link = require('./Link_cjs_DbRGq2Yk.js');
 
 var badgeAppearanceAccent = {
@@ -316,6 +317,7 @@ var iconAppearanceDanger = {
     dangerPrimary: {
         fill: 'dangerPrimary',
         fillHover: 'dangerHover',
+        borderColor: 'dangerBorderSecondary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'dangerItemPrimary',
     },
@@ -328,6 +330,7 @@ var iconAppearanceDisabled = {
     },
     disabledPrimary: {
         fill: 'surfaceDisabled',
+        borderColor: 'surfaceBorderDisabled',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'surfaceItemQuaternary',
     },
@@ -343,6 +346,7 @@ var iconAppearanceError = {
     errorPrimary: {
         fill: 'errorPrimary',
         fillHover: 'errorHover',
+        borderColor: 'errorBorderPrimary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'errorItemPrimary',
     },
@@ -356,8 +360,7 @@ var iconAppearanceInfo = {
     },
     infoPrimary: {
         fill: 'infoPrimary',
-        fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
+        borderColor: 'infoBorderDisabled',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'infoItemPrimary',
     },
@@ -378,6 +381,7 @@ var iconAppearancePrimary = {
     primaryPrimary: {
         fill: 'primaryPrimary',
         fillHover: 'primaryPrimaryHover',
+        borderColor: 'primaryBorderQuaternary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'primaryItemPrimary',
     },
@@ -391,6 +395,7 @@ var iconAppearanceSecondary = {
     secondaryPrimary: {
         fill: 'secondaryPrimary',
         fillHover: 'secondaryPrimaryHover',
+        borderColor: 'secondaryBorderQuaternary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'secondaryItemPrimary',
     },
@@ -561,6 +566,7 @@ var iconAppearanceSuccess = {
     successPrimary: {
         fill: 'successPrimary',
         fillHover: 'successHover',
+        borderColor: 'successBorderHover',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'successItemPrimary',
     },
@@ -570,6 +576,7 @@ var iconAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'surfaceItemPrimary',
     },
@@ -603,6 +610,7 @@ var iconAppearanceWarning = {
     warningPrimary: {
         fill: 'warningPrimary',
         fillHover: 'warningHover',
+        borderColor: 'warningBorderSecondary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'warningItemPrimary',
     },
@@ -616,7 +624,7 @@ var iconConfig = {
         iconConfig.appearance = appearanceConfig;
     },
 };
-var Icon = React.forwardRef(function Icon(props, ref) {
+var Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
     // TODO: Tooltip doesn't work that anymore
     // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
     var id = props.id, className = props.className, appearance = props.appearance, width = props.width, height = props.height, isDisabled = props.isDisabled, badgeClass = props.badgeClass, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, before = props.before, after = props.after, isActive = props.isActive, isSkeleton = props.isSkeleton, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
@@ -650,15 +658,17 @@ var Icon = React.forwardRef(function Icon(props, ref) {
             ? fillClass && "fill_".concat(fillClass)
             : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isActive
+            : fillActiveHoverClass &&
+                "fill_active_hover_".concat(fillActiveHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isActive
             ? iconFillClass && "icon_fill_".concat(iconFillClass)
             : iconFillActiveClass && "icon_fill_active_".concat(iconFillActiveClass), !isActive
             ? iconFillHoverClass && "icon_fill_hover_".concat(iconFillHoverClass)
             : iconFillActiveHoverClass &&
                 "icon_fill_active_hover_".concat(iconFillActiveHoverClass), isDisabled &&
             iconFillDisabledClass &&
-            "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), badgeValue && 'icon_with-badge', centeringClass && "centering_".concat(centeringClass), onClick && cursorClass && "cursor_".concat(cursorClass), isSkeleton && "icon_skeleton"), "data-tour": dataTour, ref: ref, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, badgeValue && (jsxRuntime.jsx(Badge, { className: clsx(badgeClass, 'icon__badge'), appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntime.jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
-});
+            "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass &&
+            "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), badgeValue && 'icon_with-badge', centeringClass && "centering_".concat(centeringClass), onClick && cursorClass && "cursor_".concat(cursorClass), isSkeleton && "icon_skeleton"), "data-tour": dataTour, ref: ref, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, badgeValue && (jsxRuntime.jsx(Badge, { className: clsx(badgeClass, 'icon__badge'), appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntime.jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
+}));
 var removeFillStroke = function (code) {
     return code
         .replace(/fill=".*?"/g, 'fill=""')