@itcase/ui 1.8.129 → 1.8.130

package/dist/{Group_cjs_DmfeUcFI.js → Group_cjs_DxyobxPf.js}

@@ -24,13 +24,13 @@ const groupConfig = {
     },
 };
 const Group = React.forwardRef(function Group(props, ref) {
-    const { id, dataTestId, dataTour, className, name, appearance, isDisabled, htmlFor, scroll, style, tag: Tag = 'div', isActive, onClick, onMouseDown, children, } = props;
+    const { id, dataTestId, dataTour, className, easing, name, appearance, isDisabled, htmlFor, scroll, style, tag: Tag = 'div', isActive, onClick, onMouseDown, children, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, groupConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorActiveClass, textColorClass, textColorHoverClass, columnsClass, elevationClass, heightClass, iconFillHoverClass, shapeClass, stackingClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx(Tag, { id: id, "data-test-id": dataTestId, "data-tour": dataTour, className: clsx(className, 'group', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, columnsClass && `group_columns_${columnsClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, textColorClass && `group_text-color_${textColorClass}`, textColorActiveClass &&
+    return (jsxRuntime.jsx(Tag, { id: id, "data-test-id": dataTestId, "data-tour": dataTour, className: clsx(className, 'group', easing && `easing_${easing}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, columnsClass && `group_columns_${columnsClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, textColorClass && `group_text-color_${textColorClass}`, textColorActiveClass &&
             `group_text-color_active_${textColorActiveClass}`, textColorHoverClass && `group_text-color_hover_${textColorHoverClass}`, iconFillHoverClass && `group_icon_fill_hover_${iconFillHoverClass}`, !isDisabled
             ? !isActive
                 ? fillClass && `fill_${fillClass}`

package/dist/{Group_es_BU5k8f5S.js → Group_es_DJ6GHMrs.js}

@@ -22,13 +22,13 @@ const groupConfig = {
     },
 };
 const Group = React.forwardRef(function Group(props, ref) {
-    const { id, dataTestId, dataTour, className, name, appearance, isDisabled, htmlFor, scroll, style, tag: Tag = 'div', isActive, onClick, onMouseDown, children, } = props;
+    const { id, dataTestId, dataTour, className, easing, name, appearance, isDisabled, htmlFor, scroll, style, tag: Tag = 'div', isActive, onClick, onMouseDown, children, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, groupConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorActiveClass, textColorClass, textColorHoverClass, columnsClass, elevationClass, heightClass, iconFillHoverClass, shapeClass, stackingClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles } = useStyles(props);
-    return (jsx(Tag, { id: id, "data-test-id": dataTestId, "data-tour": dataTour, className: clsx(className, 'group', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, columnsClass && `group_columns_${columnsClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, textColorClass && `group_text-color_${textColorClass}`, textColorActiveClass &&
+    return (jsx(Tag, { id: id, "data-test-id": dataTestId, "data-tour": dataTour, className: clsx(className, 'group', easing && `easing_${easing}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, columnsClass && `group_columns_${columnsClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, textColorClass && `group_text-color_${textColorClass}`, textColorActiveClass &&
             `group_text-color_active_${textColorActiveClass}`, textColorHoverClass && `group_text-color_hover_${textColorHoverClass}`, iconFillHoverClass && `group_icon_fill_hover_${iconFillHoverClass}`, !isDisabled
             ? !isActive
                 ? fillClass && `fill_${fillClass}`

package/dist/cjs/components/AvatarStack.js

@@ -6,7 +6,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Avatar = require('../../Avatar_cjs_D-M9sW20.js');
-var Group = require('../../Group_cjs_DmfeUcFI.js');
+var Group = require('../../Group_cjs_DxyobxPf.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 require('react');
 require('lodash/camelCase');

package/dist/cjs/components/Group.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Group = require('../../Group_cjs_DmfeUcFI.js');
+var Group = require('../../Group_cjs_DxyobxPf.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/MenuItem.js

@@ -244,7 +244,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: [jsxRuntime.jsxs(Link.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 || (jsxRuntime.jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.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 && (jsxRuntime.jsx(Text.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) && (jsxRuntime.jsx(Icon.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 && (jsxRuntime.jsx(Icon.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: [jsxRuntime.jsxs(Link.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 || (jsxRuntime.jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.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 && (jsxRuntime.jsx(Text.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) && (jsxRuntime.jsx(Icon.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 && (jsxRuntime.jsx(Icon.Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", size: tooltipSize, fill: tooltipFill, left: "100%", zIndex: "100", titleTextColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize, 
                 // centering="vertical"
                 shape: tooltipShape, shapeStrength: tooltipShapeStrength, isTooltipDisableState: true }))] }));
 }

package/dist/cjs/components/Response.js

@@ -9,7 +9,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Button = require('../../Button_cjs_BxoEdSG6.js');
-var Group = require('../../Group_cjs_DmfeUcFI.js');
+var Group = require('../../Group_cjs_DxyobxPf.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');

package/dist/cjs/components/Select.js

@@ -6,7 +6,7 @@ var Icon = require('../../Icon_cjs_DKzT-zmQ.js');
 var React = require('react');
 var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');
-var Group = require('../../Group_cjs_DmfeUcFI.js');
+var Group = require('../../Group_cjs_DxyobxPf.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');

package/dist/cjs/hooks/useStyles/styleAttributes.js

@@ -41,6 +41,10 @@ var styleAttributes = [
 /**
  * Filter
  */
-'backdropFilter'];
+'backdropFilter',
+/**
+ * transition
+ */
+'transition', 'transitionBehavior', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction'];
 
 exports.default = styleAttributes;

package/dist/components/AvatarStack.js

@@ -4,7 +4,7 @@ import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceC
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { A as Avatar } from '../Avatar_es_BTvbT36l.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 'react';
 import 'lodash/camelCase';

package/dist/components/Group.js

@@ -1,4 +1,4 @@
-export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_BU5k8f5S.js';
+export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_DJ6GHMrs.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/MenuItem.js

@@ -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: 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: "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';

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/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/useStyles/styleAttributes.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.129",
+  "version": "1.8.130",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",