@itcase/ui 1.8.129 → 1.8.131

package/dist/components/MenuItem.js

@@ -167,13 +167,13 @@ const menuItemAppearanceSurface = {
     },
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillActive: 'surfaceHover',
-        fillActiveHover: 'surfaceHover',
-        fillHover: 'surfaceHover',
-        labelTextActiveColor: 'accentTextSecondary',
-        labelTextActiveHoverColor: 'surfaceTextPrimary',
+        fillActive: 'surfaceSecondary',
+        fillActiveHover: 'surfaceTertiary',
+        fillHover: 'surfaceSecondary',
+        labelTextActiveColor: 'surfaceTextPrimary',
+        labelTextActiveColorHover: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
-        labelTextHoverColor: 'accentTextSecondary',
+        labelTextColorHover: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
@@ -189,7 +189,7 @@ const menuItemAppearanceSurface = {
         fillActiveHover: 'surfaceHover',
         fillHover: 'surfaceSecondary',
         labelTextActiveColor: 'accentTextSecondary',
-        labelTextActiveHoverColor: 'surfaceTextPrimary',
+        labelTextActiveColorHover: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
@@ -217,7 +217,7 @@ const menuItemConfig = {
     },
 };
 function MenuItem(props) {
-    const { appearance, className, label, href, link, LinkComponent, rel, showTooltip, target, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
+    const { appearance, className, label, href, link, LinkComponent, rel, showTooltip, target, easing, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
     const tooltipRef = useRef(null);
     const onMouseEnter = useCallback(() => {
         if (showTooltip) {
@@ -231,10 +231,10 @@ function MenuItem(props) {
     }, [showTooltip]);
     const appearanceConfig = useAppearanceConfig(appearance, menuItemConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelStyle, labelTextActiveColor, labelTextActiveHoverColor, labelTextColor, labelTextColorDisabled, labelTextColorHover, labelTextSize, labelWeight, labelWrap, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, tooltipFill, tooltipShape, tooltipShapeStrength, tooltipSize, tooltipText, tooltipTextColor, tooltipTextSize, tooltipTitleTextColor, typeClass, widthClass, isSkeleton, } = propsGenerator;
+    const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorDisabled, labelTextColorHover, labelTextSize, labelWeight, labelWrap, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, tooltipTitle, shapeClass, shapeStrengthClass, sizeClass, tooltipFill, tooltipShape, tooltipShapeStrength, tooltipSize, tooltipText, tooltipTextColor, tooltipTextSize, tooltipTitleTextColor, typeClass, widthClass, isSkeleton, } = propsGenerator;
     // @ts-expect-error
     const { styles: menuItem } = useStyles(props);
-    return (jsxs("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isDisabled && `menu-item_state_disabled`, directionClass && `menu-item_direction_${directionClass}`, className, (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc) &&
+    return (jsxs("div", { className: clsx('menu-item', easing && `easing_${easing}`, isActive && 'menu-item_state_active', isDisabled && `menu-item_state_disabled`, directionClass && `menu-item_direction_${directionClass}`, className, (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc) &&
             'menu-item_label-icon', sizeClass && `menu-item_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, !isActive
             ? fillClass && `fill_${fillClass}`
             : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
@@ -242,7 +242,7 @@ function MenuItem(props) {
             : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass
             ? `shape-strength_${shapeStrengthClass}`
             : shapeClass === 'rounded' && 'shape-strength_default', typeClass && `menu-item_type_${typeClass}`, widthClass && `width_${widthClass}`, justifyContentClass &&
-            `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textStyle: labelStyle, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsx(Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", size: tooltipSize, fill: tooltipFill, left: "100%", zIndex: "100", titleTextColor: tooltipTitleTextColor, paddingLeft: "3m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize, 
+            `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsx(Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", size: tooltipSize, fill: tooltipFill, left: "100%", zIndex: "100", title: tooltipTitle, titleColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize, 
                 // centering="vertical"
                 shape: tooltipShape, shapeStrength: tooltipShapeStrength, isTooltipDisableState: true }))] }));
 }

package/dist/components/Response.js

@@ -7,7 +7,7 @@ import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceC
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { B as Button } from '../Button_es_B-SYHL6T.js';
-import { G as Group } from '../Group_es_BU5k8f5S.js';
+import { G as Group } from '../Group_es_DJ6GHMrs.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';
@@ -253,79 +253,68 @@ const Response = urlWithAssetPrefix(function Response(props) {
 });
 
 const RESPONSE_MESSAGES = {
-    empty: {
-        appearance: 'refresh ghost',
-        title: ' Список пуст',
-        desc: 'Нет данных по заданным параметрам',
-        code: '500',
-        imageSrc: responseIcon.Empty,
-        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        primaryButtonLabel: 'ОК',
-    },
     error: {
         appearance: 'error ghost',
         title: 'Ошибка',
         desc: 'Возникла проблема с обработкой вашего запроса. Повторите попытку позже или обратитесь в поддержку по электронной почте: support@example.com',
-        code: '500',
+        // code: '500',
         imageSrc: responseIcon.Error,
         primaryButtonAppearance: 'errorPrimary sizeXXL solid rounded',
         primaryButtonLabel: 'ОК',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         secondaryButtonLabel: 'Отмена',
     },
-    warning: {
-        appearance: 'warning ghost',
-        title: 'Внимание',
-        imageSrc: responseIcon.Warning,
-        primaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
-        primaryButtonLabel: 'Повторить',
-        secondaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
-        secondaryButtonLabel: 'Отмена',
-    },
-    success: {
-        appearance: 'refresh ghost',
-        title: 'Готово',
-        desc: 'Успешно выполнено',
-        code: '500',
-        imageSrc: responseIcon.Success,
-        primaryButtonAppearance: 'successPrimary sizeXXL solid rounded',
-        primaryButtonLabel: 'ОК',
+    errorNetwork: {
+        appearance: 'unableLoadData ghost',
+        title: 'Ошибка соединения',
+        desc: 'Не удалось подключиться. Проверьте интернет-соединение и повторите попытку',
+        // code: null,
+        imageSrc: responseIcon.UnableLoadData,
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        primaryButtonLabel: 'Обновить',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        secondaryButtonLabel: 'Закрыть',
+        secondaryButtonLabel: 'Отмена',
     },
     nothingFound: {
         appearance: 'refresh ghost',
         title: 'Ничего не найдено',
         desc: 'Нет данных по заданным параметрам',
-        code: '500',
+        // code: '500',
         imageSrc: responseIcon.NothingFound,
         primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         primaryButtonLabel: 'Сбросить',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         secondaryButtonLabel: 'Отмена',
     },
-    errorNetwork: {
-        appearance: 'unableLoadData ghost',
-        title: 'Ошибка соединения',
-        desc: 'Не удалось подключиться.Проверьте интернет-соединение и повторите попытку',
-        code: '503',
-        imageSrc: responseIcon.UnableLoadData,
+    empty: {
+        appearance: 'refresh ghost',
+        title: 'Список пуст',
+        desc: 'Нет данных по заданным параметрам',
+        code: '200',
+        imageSrc: responseIcon.Empty,
         primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        primaryButtonLabel: 'Обновить',
-        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        secondaryButtonLabel: 'Отмена',
+        primaryButtonLabel: 'ОК',
     },
-    errorRequest: {
+    errorAccessDenied: {
         appearance: 'unableLoadData ghost',
         title: 'Доступ ограничен',
         desc: 'Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com',
-        code: '403',
+        code: '401/403',
         imageSrc: responseIcon.UnableLoadData,
         primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         primaryButtonLabel: 'Повторить',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         secondaryButtonLabel: 'Отмена',
     },
+    warning: {
+        appearance: 'warning ghost',
+        title: 'Внимание',
+        imageSrc: responseIcon.Warning,
+        primaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
+        primaryButtonLabel: 'Повторить',
+        secondaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
+        secondaryButtonLabel: 'Отмена',
+    },
 };
 
 export { RESPONSE_MESSAGES, Response, responseAppearance, responseConfig, responseIcon };

package/dist/components/Segmented.js

@@ -31,7 +31,7 @@ const segmentedAppearanceDefault = {
         fillActiveHover: 'accentPrimary',
         fillHover: 'surfaceSecondary',
         labelTextActiveColor: 'accentTextPrimary',
-        labelTextActiveHoverColor: 'accentTextPrimary',
+        labelTextActiveColorHover: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFill: 'surfaceItemQuaternary',
@@ -48,7 +48,7 @@ const segmentedAppearanceDefault = {
         fillActiveHover: 'accentHoverPrimary',
         fillHover: 'surfaceTertiary',
         labelTextActiveColor: 'accentTextPrimary',
-        labelTextActiveHoverColor: 'accentTextPrimary',
+        labelTextActiveColorHover: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFill: 'surfaceItemQuaternary',
@@ -171,7 +171,7 @@ const segmentedAppearanceSuccess = {
         fillHover: 'successItemSecondary',
         labelTextActiveColor: 'successTextPrimary',
         labelTextColor: 'successTextSecondary',
-        labelTextHoverColor: 'successTextPrimary',
+        labelTextColorHover: 'successTextPrimary',
         borderColor: 'successBorderSecondary',
         iconAfterFill: 'successItemSecondary',
         iconAfterFillActive: 'successTertiary',
@@ -240,7 +240,7 @@ const Segmented = (props) => {
     }, [activeSegment, segmentsRefs]);
     const appearanceConfig = useAppearanceConfig(appearance, segmentedConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveHoverColor, labelTextColor, labelTextHoverColor, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     return (jsx("div", { className: clsx(className, 'segmented', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `segmented_width_${widthClass}`, sizeClass && `segmented_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, isSkeleton && `segmented_skeleton`), ref: controlRef, children: jsx("div", { className: "segmented__wrapper", children: jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
                         const isActive = String(activeSegment?.value) === String(item.value);
                         return (jsx("div", { className: clsx('segmented__item', !item.label && 'segmented__item_icon', sizeClass && `segmented__item_size_${sizeClass}`, isActive && 'segmented__item_active', !isActive && isDisabled && 'segmented__item_state_disabled', isActive &&
@@ -252,7 +252,7 @@ const Segmented = (props) => {
                                 fillActiveClass &&
                                 `fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value), onClick: () => !isDisabled && onChangeValue(item), children: jsxs("div", { className: clsx('segmented__item-label', sizeClass && `segmented_size_${sizeClass}`), children: [item.iconBefore || item.iconBeforeActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
                                             ? item.iconBeforeActive || item.iconBefore
-                                            : item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
+                                            : item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
                                             ? item.iconAfterActive || item.iconAfter
                                             : item.iconAfter, isActive: isActive, isDisabled: isDisabled })) : null] }) }, `${name}-${item.value}`));
                     }), jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && `fill_${indicatorFillClass}`) })] }) }) }));

package/dist/components/Select.js

@@ -4,7 +4,7 @@ import { I as Icon, B as Badge } from '../Icon_es_5JUPM7bP.js';
 import React, { useRef, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
-import { G as Group } from '../Group_es_BU5k8f5S.js';
+import { G as Group } from '../Group_es_DJ6GHMrs.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

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

@@ -23,6 +23,7 @@
     flex-grow: 1;
   }
   &__tooltip {
+    visibility: hidden;
     position: absolute !important;
     animation-duration: 0.1s;
     animation-name: menuTooltipHideAnimation;
@@ -31,22 +32,18 @@
 
 @keyframes menuTooltipShowAnimation {
   0% {
-    visibility: hidden;
     opacity: 0%;
   }
   100% {
-    visibility: visible;
     opacity: 100%;
   }
 }
 
 @keyframes menuTooltipHideAnimation {
   0% {
-    visibility: visible;
     opacity: 100%;
   }
   100% {
-    visibility: hidden;
     opacity: 0%;
   }
 }

package/dist/css/components/Pagination/Pagination.css

@@ -3,6 +3,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  @media (--mobile) {
+    flex-direction: column;
+  }
   &__container {
     padding: 0;
     display: flex;

package/dist/css/styles/bundle.css

@@ -773,6 +773,110 @@ div.alignment {
     }
   }
 }
+div.easing {
+  &_ease {
+    transition: all 600ms ease;
+  }
+  &_linear {
+    transition: all 600ms linear;
+  }
+  &_easeIn {
+    transition: all 600ms ease-in;
+  }
+  &_easeOut {
+    transition: all 600ms ease-out;
+  }
+  &_easeInSine {
+    transition: all 600ms easeInSine;
+  }
+  &_easeOutSine {
+    transition: all 600ms easeOutSine;
+  }
+  &_easeInOutSine {
+    transition: all 600ms easeInOutSine;
+  }
+  &_easeInQuad {
+    transition: all 600ms easeInQuad;
+  }
+  &_easeOutQuad {
+    transition: all 600ms easeOutQuad;
+  }
+  &_easeInOutQuad {
+    transition: all 600ms easeInOutQuad;
+  }
+  &_easeInCubic {
+    transition: all 600ms easeInCubic;
+  }
+  &_easeOutCubic {
+    transition: all 600ms easeOutCubic;
+  }
+  &_easeInOutCubic {
+    transition: all 600ms easeInOutCubic;
+  }
+  &_easeInQuart {
+    transition: all 600ms easeInQuart;
+  }
+  &_easeOutQuart {
+    transition: all 600ms easeOutQuart;
+  }
+  &_easeInOutQuart {
+    transition: all 600ms easeInOutQuart;
+  }
+  &_easeInQuint {
+    transition: all 600ms easeInQuint;
+  }
+  &_easeOutQuint {
+    transition: all 600ms easeOutQuint;
+  }
+  &_easeInOutQuint {
+    transition: all 600ms easeInOutQuint;
+  }
+  &_easeInExpo {
+    transition: all 600ms easeInExpo;
+  }
+  &_easeOutExpo {
+    transition: all 600ms easeOutExpo;
+  }
+  &_easeInOutExpo {
+    transition: all 600ms easeInOutExpo;
+  }
+  &_easeInCirc {
+    transition: all 600ms easeInCirc;
+  }
+  &_easeOutCirc {
+    transition: all 600ms easeOutCirc;
+  }
+  &_easeInOutCirc {
+    transition: all 600ms easeInOutCirc;
+  }
+  &_easeInBack {
+    transition: all 600ms easeInBack;
+  }
+  &_easeOutBack {
+    transition: all 600ms easeOutBack;
+  }
+  &_easeInOutBack {
+    transition: all 600ms easeInOutBack;
+  }
+  &_easeInElastic {
+    transition: all 600ms easeInElastic;
+  }
+  &_easeOutElastic {
+    transition: all 600ms easeOutElastic;
+  }
+  &_easeInOutElastic {
+    transition: all 600ms easeInOutElastic;
+  }
+  &_easeInBounce {
+    transition: all 600ms easeInBounce;
+  }
+  &_easeOutBounce {
+    transition: all 600ms easeOutBounce;
+  }
+  &_easeInOutBounce {
+    transition: all 600ms easeInOutBounce;
+  }
+}
 .elevation {
   @each $val in 1, 2, 4, 6, 8, 12, 16, 24 {
     &_$(val) {

package/dist/css/styles/easing/easing.css

@@ -0,0 +1,104 @@
+div.easing {
+  &_ease {
+    transition: all 600ms ease;
+  }
+  &_linear {
+    transition: all 600ms linear;
+  }
+  &_easeIn {
+    transition: all 600ms ease-in;
+  }
+  &_easeOut {
+    transition: all 600ms ease-out;
+  }
+  &_easeInSine {
+    transition: all 600ms easeInSine;
+  }
+  &_easeOutSine {
+    transition: all 600ms easeOutSine;
+  }
+  &_easeInOutSine {
+    transition: all 600ms easeInOutSine;
+  }
+  &_easeInQuad {
+    transition: all 600ms easeInQuad;
+  }
+  &_easeOutQuad {
+    transition: all 600ms easeOutQuad;
+  }
+  &_easeInOutQuad {
+    transition: all 600ms easeInOutQuad;
+  }
+  &_easeInCubic {
+    transition: all 600ms easeInCubic;
+  }
+  &_easeOutCubic {
+    transition: all 600ms easeOutCubic;
+  }
+  &_easeInOutCubic {
+    transition: all 600ms easeInOutCubic;
+  }
+  &_easeInQuart {
+    transition: all 600ms easeInQuart;
+  }
+  &_easeOutQuart {
+    transition: all 600ms easeOutQuart;
+  }
+  &_easeInOutQuart {
+    transition: all 600ms easeInOutQuart;
+  }
+  &_easeInQuint {
+    transition: all 600ms easeInQuint;
+  }
+  &_easeOutQuint {
+    transition: all 600ms easeOutQuint;
+  }
+  &_easeInOutQuint {
+    transition: all 600ms easeInOutQuint;
+  }
+  &_easeInExpo {
+    transition: all 600ms easeInExpo;
+  }
+  &_easeOutExpo {
+    transition: all 600ms easeOutExpo;
+  }
+  &_easeInOutExpo {
+    transition: all 600ms easeInOutExpo;
+  }
+  &_easeInCirc {
+    transition: all 600ms easeInCirc;
+  }
+  &_easeOutCirc {
+    transition: all 600ms easeOutCirc;
+  }
+  &_easeInOutCirc {
+    transition: all 600ms easeInOutCirc;
+  }
+  &_easeInBack {
+    transition: all 600ms easeInBack;
+  }
+  &_easeOutBack {
+    transition: all 600ms easeOutBack;
+  }
+  &_easeInOutBack {
+    transition: all 600ms easeInOutBack;
+  }
+  &_easeInElastic {
+    transition: all 600ms easeInElastic;
+  }
+  &_easeOutElastic {
+    transition: all 600ms easeOutElastic;
+  }
+  &_easeInOutElastic {
+    transition: all 600ms easeInOutElastic;
+  }
+  &_easeInBounce {
+    transition: all 600ms easeInBounce;
+  }
+  &_easeOutBounce {
+    transition: all 600ms easeOutBounce;
+  }
+  &_easeInOutBounce {
+    transition: all 600ms easeInOutBounce;
+  }
+}

package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js

@@ -47,7 +47,7 @@ const formatState = (key) => {
     // - matches "ActiveHover", "Active", "Hover" or "Disabled"
     // - case-insensitive because of the /i flag
     // Examples of matches:
-    //  "fillActiveHoverColor"  -> match[0] === "ActiveHover"
+    //  "fillActiveColorHover"  -> match[0] === "ActiveHover"
     //  "borderDisabled"        -> match[0] === "Disabled"
     const stateMatch = key.match(/(ActiveHover|Active|Hover|Disabled)/i);
     if (!stateMatch) {
@@ -61,7 +61,7 @@ const formatState = (key) => {
     //  Disabled    -> disabled
     // The final .toLowerCase() ensures output is lowercased regardless of input casing.
     // Examples:
-    //  "fillActiveHoverColor"  -> "_active_hover"
+    //  "fillActiveColorHover"  -> "_active_hover"
     //  "borderDisabled"        -> "disabled"
     return ('_' +
         stateMatch[0]

package/dist/hooks/useStyles/styleAttributes.js

@@ -37,6 +37,10 @@ var styleAttributes = [
 /**
  * Filter
  */
-'backdropFilter'];
+'backdropFilter',
+/**
+ * transition
+ */
+'transition', 'transitionBehavior', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction'];
 
 export { styleAttributes as default };

package/dist/types/components/Chips/appearance/chipsDisabled.d.ts

@@ -1,7 +1,11 @@
 declare const chipsAppearanceDisabled: {
     disabled: {
         fill: string;
+        fillHover: string;
+        labelTextActiveColor: string;
+        labelTextActiveColorHover: string;
         labelTextColor: string;
+        labelTextColorHover: string;
         borderColor: string;
         iconAfterFillIcon: string;
         iconBeforeFillIcon: string;

package/dist/types/components/Chips/appearance/chipsSurface.d.ts

@@ -13,7 +13,7 @@ declare const chipsAppearanceSurface: {
         fillHover: string;
         labelTextActiveColor: string;
         labelTextColor: string;
-        labelTextHoverColor: string;
+        labelTextColorHover: string;
         borderColor: string;
         activeIconItemFill: string;
         badgeAppearance: string;
@@ -29,7 +29,7 @@ declare const chipsAppearanceSurface: {
         fillHover: string;
         labelTextActiveColor: string;
         labelTextColor: string;
-        labelTextHoverColor: string;
+        labelTextColorHover: string;
         borderColor: string;
         iconAfterFillActiveIcon: string;
         iconAfterFillIcon: string;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
-import { AlignDirectionProps, AlignmentProps, AlignProps, AppearanceKeysDefault, DirectionProps, ElevationProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, SizeProps, TextAlignProps, TextColorActiveProps, TextColorHoverProps, TextColorProps, TextGradientProps, TextSizeProps, TextStyleProps, TextWeightProps, TextWrapProps, TypeProps, UnderlineProps, WidthProps } from '@itcase/types';
+import { AlignDirectionProps, AlignmentProps, AlignProps, AppearanceKeysDefault, DirectionProps, ElevationProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, SizeProps, TextAlignProps, TextColorActiveProps, TextColorHoverProps, TextColorProps, TextGradientProps, TextSizeProps, TextWeightProps, TextWrapProps, TypeProps, UnderlineProps, WidthProps } from '@itcase/types';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 export interface DropdownProps extends StyleAttributes {
     [key: number | string | symbol]: any;
@@ -53,7 +53,6 @@ export interface DropdownItemProps extends DropdownItemThemeColor, StyleAttribut
     desc?: string;
     descTextColorHover?: TextColorHoverProps;
     descTextGradient?: TextGradientProps;
-    descTextStyle?: TextStyleProps;
     descTextWeight?: TextWeightProps;
     descTextWrap?: TextWrapProps;
     dividerDirection?: DirectionProps;
@@ -69,7 +68,6 @@ export interface DropdownItemProps extends DropdownItemThemeColor, StyleAttribut
     labelTextColorActive?: TextColorActiveProps;
     labelTextColorHover?: TextColorHoverProps;
     labelTextGradient?: TextGradientProps;
-    labelTextStyle?: TextStyleProps;
     labelTextWeight?: TextWeightProps;
     labelTextWrap?: TextWrapProps;
     link?: string;