@itcase/ui 1.8.57 → 1.8.60

package/dist/components/MenuItem.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useRef, useCallback } from 'react';
 import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
@@ -143,6 +143,7 @@ var menuItemAppearanceSurface = {
         fillActive: 'surfaceHover',
         fillActiveHover: 'surfaceHover',
         fillHover: 'surfaceHover',
+        labelTextHoverColor: 'accentTextSecondary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFillIcon: 'surfaceItemPrimary',
@@ -179,20 +180,33 @@ var menuItemConfig = {
     },
 };
 function MenuItem(props) {
-    var className = props.className, appearance = props.appearance, label = props.label, isDisabled = props.isDisabled, href = props.href, link = props.link, LinkComponent = props.LinkComponent, rel = props.rel, target = props.target, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
+    var className = props.className, appearance = props.appearance, label = props.label, isDisabled = props.isDisabled, href = props.href, link = props.link, LinkComponent = props.LinkComponent, rel = props.rel, showTooltip = props.showTooltip, target = props.target, tooltipAppearance = props.tooltipAppearance, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, onClick = props.onClick, children = props.children;
+    var tooltipRef = useRef(null);
+    var onMouseEnter = useCallback(function () {
+        var _a;
+        if (showTooltip) {
+            (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.openTooltip();
+        }
+    }, [showTooltip]);
+    var onMouseLeave = useCallback(function () {
+        var _a;
+        if (showTooltip) {
+            (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.closeTooltip();
+        }
+    }, [showTooltip]);
     var appearanceConfig = useAppearanceConfig(appearance, menuItemConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelStyle = propsGenerator.labelStyle, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextColorDisabled = propsGenerator.labelTextColorDisabled, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelWeight = propsGenerator.labelWeight, labelWrap = propsGenerator.labelWrap, borderColorClass = propsGenerator.borderColorClass, 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, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, tooltipAppearance = propsGenerator.tooltipAppearance, tooltipFill = propsGenerator.tooltipFill, tooltipShapeStrength = propsGenerator.tooltipShapeStrength, tooltipText = propsGenerator.tooltipText, tooltipTextColor = propsGenerator.tooltipTextColor, tooltipTitleTextColor = propsGenerator.tooltipTitleTextColor, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
+    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelStyle = propsGenerator.labelStyle, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextColorDisabled = propsGenerator.labelTextColorDisabled, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelWeight = propsGenerator.labelWeight, labelWrap = propsGenerator.labelWrap, borderColorClass = propsGenerator.borderColorClass, 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, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, tooltipFill = propsGenerator.tooltipFill, tooltipShapeStrength = propsGenerator.tooltipShapeStrength, tooltipText = propsGenerator.tooltipText, tooltipTextColor = propsGenerator.tooltipTextColor, tooltipTitleTextColor = propsGenerator.tooltipTitleTextColor, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
     // @ts-expect-error
     var menuItem = useStyles(props).styles;
-    return (jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isDisabled && "menu-item_state_disabled", directionClass && "menu-item_direction_".concat(directionClass), className, sizeClass && "menu-item_size_".concat(sizeClass), borderColorClass && "border-color_".concat(borderColorClass), !isActive
+    return (jsxs("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isDisabled && "menu-item_state_disabled", directionClass && "menu-item_direction_".concat(directionClass), className, sizeClass && "menu-item_size_".concat(sizeClass), borderColorClass && "border-color_".concat(borderColorClass), !isActive
             ? fillClass && "fill_".concat(fillClass)
             : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
             : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass
             ? "shape-strength_".concat(shapeStrengthClass)
             : shapeClass === 'rounded' && 'shape-strength_default', typeClass && "menu-item_type_".concat(typeClass), widthClass && "width_".concat(widthClass), justifyContentClass &&
-            "menu-item_justify-content_".concat(justifyContentClass), isSkeleton && "menu-item_skeleton"), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextHoverColor, textStyle: labelStyle, textWeight: labelWeight, textWrap: labelWrap, isDisabled: isDisabled, isActive: isActive, children: label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after, jsx(Tooltip, { className: "menu-item__tooltip", appearance: tooltipAppearance, minWidth: "auto", fill: tooltipFill, left: "100%", zIndex: "100", titleTextColor: tooltipTitleTextColor, text: tooltipText, textColor: tooltipTextColor, centering: "vertical", shapeStrength: tooltipShapeStrength })] }) }));
+            "menu-item_justify-content_".concat(justifyContentClass), isSkeleton && "menu-item_skeleton"), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextHoverColor, textStyle: labelStyle, textWeight: labelWeight, textWrap: labelWrap, isDisabled: isDisabled, isActive: isActive, children: label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsx(Tooltip, { className: "menu-item__tooltip", appearance: tooltipAppearance, minWidth: "auto", fill: tooltipFill, left: "100%", zIndex: "100", titleTextColor: tooltipTitleTextColor, text: tooltipText, textColor: tooltipTextColor, centering: "vertical", ref: tooltipRef, shapeStrength: tooltipShapeStrength }))] }));
 }
 
 export { MenuItem, menuItemAppearance, menuItemConfig };

package/dist/components/Pagination.js

@@ -6,7 +6,7 @@ import ReactPaginate from 'react-paginate';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_BK2bacxA.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_DfEoMbef.js';
 import { I as Icon } from '../Icon_es_BGR9vYtq.js';
 import { T as Text } from '../Text_es_BdFAdf7M.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';

package/dist/components/Response.js

@@ -2,7 +2,6 @@ import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
-import SVG from 'react-inlinesvg';
 import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
@@ -24,6 +23,7 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Icon_es_BGR9vYtq.js';
+import 'react-inlinesvg';
 import '../Link_es_BnUIX0QT.js';
 import '../Loader_es_D_NFpg8C.js';
 
@@ -165,14 +165,13 @@ var Response = urlWithAssetPrefix(function Response(props) {
             return jsx(Image, __assign({}, sizes));
         }
         if (src) {
-            if (src.endsWith('.svg') || src.startsWith('data:image/svg')) {
-                if (svgFillClass) {
-                    return jsx(SVG, { src: src, preProcessor: removeFillStroke });
-                }
-                else {
-                    return jsx(SVG, { src: src });
-                }
-            }
+            // if (src.endsWith('.svg') || src.startsWith('data:image/svg')) {
+            //   if (svgFillClass) {
+            //     return <SVG src={src} preProcessor={removeFillStroke} />
+            //   } else {
+            //     return <SVG src={src} />
+            //   }
+            // }
             return jsx("img", { src: src });
         }
         return null;
@@ -185,12 +184,5 @@ var Response = urlWithAssetPrefix(function Response(props) {
                 secondaryButton ||
                 appearanceConfig) && (jsxs(Group, { className: "response__button", width: "fill", children: [primaryButtonLabel ? (jsx(Button, { className: "response__button-item", appearance: primaryButtonAppearance, width: primaryButtonWidth || 'fill', size: primaryButtonSize, fill: primaryButtonFill, fillHover: primaryButtonFillHover, label: primaryButtonLabel, labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize, shape: primaryButtonShape, before: primaryButtonBefore, after: primaryButtonAfter, onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel ? (jsx(Button, { className: "response__button-item", appearance: secondaryButtonAppearance, width: secondaryButtonWidth || 'fill', size: secondaryButtonSize, fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, label: secondaryButtonLabel, labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize, shape: secondaryButtonShape, before: secondaryButtonBefore, after: secondaryButtonAfter, onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
 });
-var removeFillStroke = function (code) {
-    return code
-        .replace(/fill=".*?"/g, 'fill=""')
-        .replace(/fill='.*?'/g, "fill=''")
-        .replace(/stroke=".*?"/g, 'stroke=""')
-        .replace(/stroke='.*?'/g, "stroke=''");
-};
 
 export { Response, responseAppearance, responseConfig };

package/dist/css/components/Avatar/Avatar.css

@@ -50,28 +50,6 @@
     background-position: -200%;
   }
 }
-.avatar {
-  &_shape {
-    &_circular {
-      ^^&__image,
-      ^^&__wrapper {
-        border-radius: 50%;
-      }
-    }
-    &_geometric {
-      ^^&__image,
-      ^^&__wrapper {
-        border-radius: 0;
-      }
-    }
-    &_rounded {
-      ^^&__image,
-      ^^&__wrapper {
-        border-radius: var(--avatar-shape-rounded);
-      }
-    }
-  }
-}
 /* stylelint-disable prettier/prettier */
 .avatar {
   &_size {

package/dist/css/components/MenuItem/MenuItem.css

@@ -1,4 +1,5 @@
 .menu-item {
+  position: relative;
   display: flex;
   align-items: center;
   &:hover {
@@ -10,7 +11,7 @@
   }
   &__wrapper {
     width: 100%;
-    position: relative;
+    position: relative !important;
     display: flex;
     align-items: center;
     align-content: center;

package/dist/css/components/Swiper/Swiper.css

@@ -902,11 +902,13 @@ div.swiper-block__item {
 
 .swiper-block {
   &&_type_step {
-    min-height: 100vh;
     display: flex;
     align-items: center;
+    flex-grow: 1;
     ^&__swiper {
+      width: 100%;
       height: 100%;
+      align-items: center;
       display: flex;
     }
     & .swiper-wrapper {

package/dist/css/styles/align/align_horizontal-reverse.css

@@ -1,49 +1,64 @@
+%align-horizontal-reverse {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
 .align {
   &_horizontal-reverse {
     display: flex;
     flex-direction: row-reverse;
-    &^&_top {
+    @extend %align-horizontal-reverse;
+    &-top {
       &-left {
         align-items: flex-start;
+        @extend %align-horizontal-reverse;
       }
       &-center {
         text-align: center;
         justify-content: center;
         align-items: flex-start;
+        @extend %align-horizontal-reverse;
       }
       &-right {
         text-align: right;
         justify-content: flex-end;
         align-items: flex-start;
+        @extend %align-horizontal-reverse;
       }
     }
-    &^&_left {
+    &-left {
       align-items: center;
+      @extend %align-horizontal-reverse;
     }
-    &^&_center {
+    &-center {
       text-align: center;
       justify-content: center;
       align-items: center;
+      @extend %align-horizontal-reverse;
     }
-    &^&_right {
+    &-right {
       text-align: right;
       justify-content: flex-end;
       align-items: center;
+      @extend %align-horizontal-reverse;
     }
-    &^&_bottom {
+    &-bottom {
       &-left {
         flex-direction: row;
         align-items: flex-end;
+        @extend %align-horizontal-reverse;
       }
       &-center {
         text-align: center;
         justify-content: center;
         align-items: flex-end;
+        @extend %align-horizontal-reverse;
       }
       &-right {
         text-align: right;
         justify-content: flex-end;
         align-items: flex-end;
+        @extend %align-horizontal-reverse;
       }
     }
   }

package/dist/css/styles/align/align_horizontal.css

@@ -1,63 +1,79 @@
+%align-horizontal {
+  display: flex;
+  flex-direction: row;
+}
+
 .align {
   &_horizontal {
-    display: flex;
-    flex-direction: row;
-    &^&_top {
+    &_top {
+      @extend %align-horizontal;
       align-items: flex-start;
       &-left {
+        @extend %align-horizontal;
         align-items: flex-start;
       }
       &-center {
+        @extend %align-horizontal;
         text-align: center;
         justify-content: center;
         align-items: flex-start;
       }
       &-right {
+        @extend %align-horizontal;
         text-align: right;
         justify-content: flex-end;
         align-items: flex-start;
       }
       &-auto {
+        @extend %align-horizontal;
         text-align: right;
         justify-content: space-between;
         align-items: flex-start;
       }
     }
-    &^&_left {
+    &-left {
+      @extend %align-horizontal;
       align-items: center;
     }
-    &^&_center {
+    &-center {
+      @extend %align-horizontal;
       text-align: center;
       justify-content: center;
       align-items: center;
       &-auto {
+        @extend %align-horizontal;
         text-align: center;
         justify-content: space-between;
         align-items: center;
       }
     }
-    &^&_right {
+    &-right {
+      @extend %align-horizontal;
       text-align: right;
       justify-content: flex-end;
       align-items: center;
     }
-    &^&_bottom {
+    &_bottom {
+      @extend %align-horizontal;
       align-items: flex-end;
       &-left {
-        flex-direction: row;
+        @extend %align-horizontal;
         align-items: flex-end;
       }
       &-center {
+        @extend %align-horizontal;
         text-align: center;
         justify-content: center;
         align-items: flex-end;
       }
       &-right {
         text-align: right;
+        @extend %align-horizontal;
         justify-content: flex-end;
         align-items: flex-end;
       }
       &-auto {
+        @extend %align-horizontal;
         text-align: right;
         justify-content: space-between;
         align-items: flex-end;

package/dist/css/styles/align/align_vertical-reverse.css

@@ -1,45 +1,57 @@
+%align-vertical-reverse {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
 .align {
   &_vertical-reverse {
-    display: flex;
-    flex-direction: column;
-    &^&_top {
+    &-top {
       &-left {
+        @extend %align-horizontal-reverse;
         align-items: flex-start;
       }
       &-center {
+        @extend %align-horizontal-reverse;
         text-align: center;
         align-items: center;
       }
       &-right {
+        @extend %align-horizontal-reverse;
         text-align: right;
         align-items: flex-end;
       }
     }
-    &^&_left {
+    &-left {
+      @extend %align-horizontal-reverse;
       justify-content: center;
       align-items: flex-start;
     }
-    &^&_center {
+    &-center {
+      @extend %align-horizontal-reverse;
       text-align: center;
       justify-content: center;
       align-items: center;
     }
-    &^&_right {
+    &-right {
+      @extend %align-horizontal-reverse;
       text-align: right;
       justify-content: center;
       align-items: flex-end;
     }
-    &^&_bottom {
+    &-bottom {
       &-left {
+        @extend %align-horizontal-reverse;
         justify-content: flex-end;
         align-items: flex-start;
       }
       &-center {
+        @extend %align-horizontal-reverse;
         text-align: center;
         justify-content: flex-end;
         align-items: center;
       }
       &-right {
+        @extend %align-horizontal-reverse;
         text-align: right;
         justify-content: flex-end;
         align-items: flex-end;

package/dist/css/styles/align/align_vertical.css

@@ -1,60 +1,75 @@
+%align-vertical {
+  display: flex;
+  flex-direction: column;
+}
+
 .align {
   &_vertical {
-    display: flex;
-    flex-direction: column;
-    &^&_top {
+    &-top {
       &-left {
+        @extend %align-vertical;
         align-items: flex-start;
       }
       &-center {
+        @extend %align-vertical;
         text-align: center;
         align-items: center;
       }
       &-right {
+        @extend %align-vertical;
         text-align: right;
         align-items: flex-end;
       }
       &-auto {
+        @extend %align-vertical;
         text-align: center;
         justify-content: space-between;
         align-items: center;
       }
     }
-    &^&-left {
+    &-left {
+      @extend %align-vertical;
       justify-content: center;
       align-items: flex-start;
     }
-    &^&-center {
+    &-center {
+      @extend %align-vertical;
       text-align: center;
       justify-content: center;
       align-items: center;
       &-auto {
+        @extend %align-vertical;
         text-align: center;
         justify-content: space-between;
         align-items: center;
       }
     }
-    &^&_right {
+    &-right {
+      @extend %align-vertical;
       text-align: right;
       justify-content: center;
       align-items: flex-end;
     }
-    &^&_bottom {
+    &-bottom {
       &-left {
+        @extend %align-vertical;
         justify-content: flex-end;
         align-items: flex-start;
       }
       &-center {
+        @extend %align-vertical;
         text-align: center;
         justify-content: flex-end;
         align-items: center;
       }
       &-right {
+        @extend %align-vertical;
         text-align: right;
         justify-content: flex-end;
         align-items: flex-end;
       }
       &-auto {
+        @extend %align-vertical;
         text-align: center;
         justify-content: space-between;
         align-items: center;

package/dist/hoc/urlWithAssetPrefix.js

@@ -12,11 +12,10 @@ var urlWithAssetPrefix = function (WrappedComponent) {
             var url = props[propKey];
             if (url && typeof url === 'string') {
                 if (assetPrefix) {
-                    var cleanUrl = formatURL(url);
-                    var isNeedAssetPrefix = checkIsNeedAssetPrefix(cleanUrl, assetPrefix, ignorePathsList);
+                    var isNeedAssetPrefix = checkIsNeedAssetPrefix(url, assetPrefix, ignorePathsList);
                     if (isNeedAssetPrefix) {
                         var prefixPath = formatURL(assetPrefix).slice(0, -1);
-                        url = "".concat(prefixPath).concat(cleanUrl);
+                        url = "".concat(prefixPath).concat(url);
                     }
                 }
                 resultProps[propKey] = url;
@@ -50,7 +49,7 @@ var checkIsNeedAssetPrefix = function (url, assetPrefix, ignorePathsList) {
             }
         }
         else {
-            if (url.startsWith(formatURL(urlPath))) {
+            if (formatURL(url).startsWith(formatURL(urlPath))) {
                 return false;
             }
         }

package/dist/stories/Overview.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/blocks'
+import { Meta, Story } from '@storybook/addon-docs/blocks'
 
 import * as WarningStories from '../stories/WarningDemo.stories'
 

package/dist/stories/Playground.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
 
 import * as WarningStories from '../stories/WarningDemo.stories.tsx'
 

package/dist/types/components/Accordion/appearance/accordionSize.d.ts

@@ -4,48 +4,48 @@ declare const accordionAppearanceSize: {
         titleTextSize: string;
         badgeAppearanceSize: string;
         contentTextSize: string;
-        icon: any;
+        icon: string;
     };
     sizeXL: {
         size: string;
         titleTextSize: string;
         badgeAppearanceSize: string;
         contentTextSize: string;
-        icon: any;
+        icon: string;
     };
     sizeL: {
         size: string;
         titleTextSize: string;
         badgeAppearanceSize: string;
-        icon: any;
+        icon: string;
     };
     sizeM: {
         size: string;
         titleTextSize: string;
         badgeAppearanceSize: string;
         contentTextSize: string;
-        icon: any;
+        icon: string;
     };
     sizeS: {
         size: string;
         titleTextSize: string;
         badgeAppearanceSize: string;
         contentTextSize: string;
-        icon: any;
+        icon: string;
     };
     sizeXS: {
         size: string;
         titleTextSize: string;
         badgeAppearanceSize: string;
         contentTextSize: string;
-        icon: any;
+        icon: string;
     };
     sizeXXS: {
         size: string;
         titleTextSize: string;
         badgeAppearanceSize: string;
         contentTextSize: string;
-        icon: any;
+        icon: string;
     };
 };
 export { accordionAppearanceSize };

package/dist/types/components/Avatar/appearance/avatarShape.d.ts

@@ -0,0 +1,25 @@
+declare const avatarAppearanceShape: {
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+};
+export { avatarAppearanceShape };

package/dist/types/components/MenuItem/MenuItem.interface.d.ts

@@ -55,6 +55,7 @@ export interface MenuItemProps extends MenuItemThemeColor, StyleAttributes {
     label?: string;
     link?: string;
     rel?: string;
+    showTooltip: boolean;
     style?: CSSProperties;
     target?: string;
     type?: string;
@@ -62,7 +63,6 @@ export interface MenuItemProps extends MenuItemThemeColor, StyleAttributes {
     isHover?: boolean;
     isSkeleton?: boolean;
     onClick?: () => void;
-    onMouseEnter?: () => void;
     set?: string;
 }
 export {};

package/dist/types/components/MenuItem/appearance/menuItemSurface.d.ts

@@ -12,6 +12,7 @@ declare const menuItemAppearanceSurface: {
         fillActive: string;
         fillActiveHover: string;
         fillHover: string;
+        labelTextHoverColor: string;
         labelTextColor: string;
         borderColor: string;
         iconAfterFillIcon: string;