@itcase/ui 1.8.146 → 1.8.148

package/dist/cjs/components/Drawer/stories/__mock__.js

@@ -2,9 +2,9 @@
 
 const DrawerMock = {
   appearance: 'surfacePrimary',
-  isOpenModal: true,
   title: 'Title 123',
-  desc: 'Text 123'
+  desc: 'Text 123',
+  isOpen: true
 };
 
 exports.DrawerMock = DrawerMock;

package/dist/cjs/components/Drawer.js

@@ -71,6 +71,24 @@ const drawerAppearance = {
     ...drawerAppearanceSurface,
 };
 
+// https://github.com/Farzin-Firoozi/react-modern-drawer
+const ANIMATION_DURATION = 300; // default value is 300
+const ANIMATION_STATE_SNAPSHOTS = {
+    DEFAULT: {
+        isInDOM: true,
+        // start from 'false' to trigger 'enter' animation
+        isOpen: false,
+    },
+    ENTER_FINISH: {
+        isInDOM: true,
+        isOpen: true,
+    },
+    EXIT_FINISH: {
+        isInDOM: false,
+        isOpen: false,
+    },
+};
+
 const drawerConfig = {
     appearance: drawerAppearance,
     setAppearance: (appearanceConfig) => {
@@ -78,12 +96,16 @@ const drawerConfig = {
     },
 };
 function Drawer(props) {
-    const { dataTestId, dataTour, className, type, appearance, title, desc, enableOverlay, stickyButton, before, after, close, isOpen, isOpenModal, onClickClose, onClose, children, } = props;
+    const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen, isOpenModal, onClickClose, onClose, children, } = props;
     const _isOpen = isOpen ?? isOpenModal;
     const isOpenPrevRef = React.useRef(Boolean(_isOpen));
+    const isFirstRenderRef = React.useRef(true);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, drawerConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { direction, size, titleTextColor, titleTextSize, titleTextWeight, descTextColor, descTextSize, divider, dividerSize, zeroPadding, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
+    const [animationState, setAnimationState] = React.useState(_isOpen
+        ? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
+        : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH);
     React.useEffect(() => {
         const isFromOpenToClose = isOpenPrevRef.current === true && !_isOpen;
         if (isFromOpenToClose && onClose) {
@@ -95,10 +117,33 @@ function Drawer(props) {
         if (isNeedShowWarning) {
             console.warn('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [_isOpen, onClose]);
+    // manage 'enter' and 'exit' animations
+    React.useEffect(() => {
+        if (isFirstRenderRef.current) {
+            isFirstRenderRef.current = false;
+            return;
+        }
+        setAnimationState(ANIMATION_STATE_SNAPSHOTS.DEFAULT);
+        // 16ms delay to prevent react from batching updates
+        const startTransitionDelay = 16;
+        const timeoutDelay = _isOpen ? startTransitionDelay : ANIMATION_DURATION;
+        const timeout = setTimeout(() => {
+            setAnimationState(_isOpen
+                ? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
+                : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH);
+        }, timeoutDelay);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [_isOpen]);
+    if (!animationState.isInDOM) {
+        return null;
+    }
     return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), dataTour: dataTour, direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
-        customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
+        customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, duration: ANIMATION_DURATION, enableOverlay: enableOverlay, lockBackgroundScroll: lockBackgroundScroll, overlayClassName: "drawer__overlay", open: animationState.isOpen, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 exports.Drawer = Drawer;

package/dist/cjs/components/Notification.js

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var Loader = require('../../Loader_cjs_CRiUlTC3.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
@@ -24,7 +25,6 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../../Link_cjs_qKXVfU8e.js');
-require('../../Loader_cjs_CRiUlTC3.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
@@ -34,14 +34,13 @@ const notificationAppearanceDefault = {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'xxl',
         descTextColor: 'surfaceTextPrimary',
-        descTextSize: 'm',
         borderColor: 'surfaceBorderPrimary',
         textColor: 'surfaceTextPrimary',
-        iconSize: 20,
-        closeIcon: _default.icons20.Action.Close,
-        closeIconFillIcon: 'surfaceItemPrimary',
+        buttonAppearance: 'accentPrimary sizeXXL solid rounded',
+        loaderAppearance: 'accentTertiary sizeS ghost rounded',
+        closeIcon: _default.icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
     },
 };
 
@@ -50,14 +49,13 @@ const notificationAppearanceError = {
         fill: 'errorPrimary',
         fillHover: 'errorPrimaryHover',
         titleTextColor: 'errorTextPrimary',
-        titleTextSize: 'l',
         descTextColor: 'errorTextPrimary',
-        descTextSize: 'm',
         borderColor: 'errorBorderPrimary',
         textColor: 'errorTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
-        closeIcon: _default.icons20.Action.Close,
-        closeIconAppearance: 'errorPrimary size_20_20 solid circular',
+        loaderAppearance: 'accentPrimary sizeS solid rounded',
+        closeIcon: _default.icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
     },
 };
 
@@ -66,19 +64,59 @@ const notificationAppearanceInfo = {
         fill: 'infoPrimary',
         fillHover: 'infoPrimaryHover',
         titleTextColor: 'infoTextPrimary',
-        titleTextSize: 'l',
         descTextColor: 'infoTextPrimary',
-        descTextSize: 'm',
         borderColor: 'infoBorderPrimary',
         textColor: 'infoTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
-        iconSize: 20,
-        closeIcon: _default.icons20.Action.Close,
-        closeIconAppearance: 'infoPrimary size_20_20 solid circular',
+        loaderAppearance: 'accentPrimary sizeS solid rounded',
+        closeIcon: _default.icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
+    },
+};
+
+const notificationAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
-const notificationAppearanceSize = {};
+const notificationAppearanceSize = {
+    sizeM: {
+        size: 'm',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        iconSize: 24,
+        loaderAppearanceSize: 'sizeS',
+        closeIconAppearanceSize: 'size_24_24',
+    },
+    sizeS: {
+        size: 'm',
+        titleTextSize: 'xl',
+        descTextSize: 'm',
+        iconSize: 24,
+        loaderAppearanceSize: 'sizeS',
+        closeIconAppearanceSize: 'size_24_24',
+    },
+};
 
 const notificationAppearanceStyle = {
     solid: {
@@ -99,15 +137,13 @@ const notificationAppearanceSuccess = {
         fill: 'successPrimary',
         fillHover: 'successPrimaryHover',
         titleTextColor: 'successTextPrimary',
-        titleTextSize: 'l',
         descTextColor: 'successTextPrimary',
-        descTextSize: 'm',
         borderColor: 'successBorderPrimary',
         textColor: 'successTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
-        iconSize: 20,
-        closeIcon: _default.icons20.Action.Close,
-        closeIconAppearance: 'successPrimary size_20_20 solid circular',
+        loaderAppearance: 'accentPrimary sizeS solid rounded',
+        closeIcon: _default.icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
     },
 };
 
@@ -116,20 +152,19 @@ const notificationAppearanceWarning = {
         fill: 'warningPrimary',
         fillHover: 'warningPrimaryHover',
         titleTextColor: 'warningTextPrimary',
-        titleTextSize: 'l',
         descTextColor: 'warningTextPrimary',
-        descTextSize: 'm',
         borderColor: 'surfaceBorderPrimary',
         textColor: 'warningTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
-        iconSize: 20,
-        closeIcon: _default.icons20.Action.Close,
-        closeIconAppearance: 'warningPrimary size_20_20 solid circular',
+        loaderAppearance: 'accentPrimary sizeS solid rounded',
+        closeIcon: _default.icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
     },
 };
 
 const notificationAppearance = {
     ...notificationAppearanceDefault,
+    ...notificationAppearanceShape,
     ...notificationAppearanceSize,
     ...notificationAppearanceStyle,
     ...notificationAppearanceError,
@@ -145,13 +180,13 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, appearance, className, dataTestId, dataTour, title, text, float, global, toast, before, after, isSkeleton, onClickButton, onClickClose, } = props;
+    const { id, appearance, className, dataTestId, dataTour, type, title, text, float, global, toast, before, after, isSkeleton, isLoading, onClickButton, onClickClose, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, notificationConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, widthClass, closeIcon, closeIconAppearance, closeIconSrc, } = propsGenerator;
+    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'hug', shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, closeIconAppearanceSize, closeIconSrc, } = propsGenerator;
     // @ts-expect-error
     const { styles: notificationStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', float && 'notification__item_float', toast && 'notification__item_toast', global && 'notification__item_global', widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), onClickClose && (jsxRuntime.jsx(Icon.Icon, { appearance: closeIconAppearance, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsxRuntime.jsx(Button.Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
+    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', float && 'notification__item_float', toast && 'notification__item_toast', global && 'notification__item_global', widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsxRuntime.jsx(Button.Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
 }
 
 function NotificationWrapper(props) {

package/dist/cjs/components/Pagination.js

@@ -257,7 +257,6 @@ function Pagination(props) {
      * @deprecated The method should not be used
      */
     onPerPageCountChange, } = props;
-    const minPageCount = Math.min(...pageCountList);
     const _onChangePage = React.useMemo(() => {
         if (onPageChange) {
             console.warn('@itcase/ui Pagination warning: "onPageChange" is deprecated, use "onChangePage" instead.');
@@ -310,7 +309,10 @@ function Pagination(props) {
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
     const { styles: paginationStyles } = useStyles.useStyles(props);
-    return ((allItemsCount > perPageCount || minPageCount <= perPageCount) && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
+    const minPageSize = Math.min(perPageCount, ...pageCountList);
+    // If there are fewer items than the minimum page size - pagination wont work.
+    const isPaginationDisplayed = allItemsCount > minPageSize;
+    return (isPaginationDisplayed && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
                     `fill fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass &&
                     `text text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
                     `text text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&

package/dist/components/Drawer/stories/__mock__.js

@@ -1,8 +1,8 @@
 const DrawerMock = {
   appearance: 'surfacePrimary',
-  isOpenModal: true,
   title: 'Title 123',
-  desc: 'Text 123'
+  desc: 'Text 123',
+  isOpen: true
 };
 
 export { DrawerMock };

package/dist/components/Drawer.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import clsx from 'clsx';
 import ReactDrawer from 'react-modern-drawer';
 import { D as Divider } from '../Divider_es_BiYozVBS.js';
@@ -69,6 +69,24 @@ const drawerAppearance = {
     ...drawerAppearanceSurface,
 };
 
+// https://github.com/Farzin-Firoozi/react-modern-drawer
+const ANIMATION_DURATION = 300; // default value is 300
+const ANIMATION_STATE_SNAPSHOTS = {
+    DEFAULT: {
+        isInDOM: true,
+        // start from 'false' to trigger 'enter' animation
+        isOpen: false,
+    },
+    ENTER_FINISH: {
+        isInDOM: true,
+        isOpen: true,
+    },
+    EXIT_FINISH: {
+        isInDOM: false,
+        isOpen: false,
+    },
+};
+
 const drawerConfig = {
     appearance: drawerAppearance,
     setAppearance: (appearanceConfig) => {
@@ -76,12 +94,16 @@ const drawerConfig = {
     },
 };
 function Drawer(props) {
-    const { dataTestId, dataTour, className, type, appearance, title, desc, enableOverlay, stickyButton, before, after, close, isOpen, isOpenModal, onClickClose, onClose, children, } = props;
+    const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen, isOpenModal, onClickClose, onClose, children, } = props;
     const _isOpen = isOpen ?? isOpenModal;
     const isOpenPrevRef = useRef(Boolean(_isOpen));
+    const isFirstRenderRef = useRef(true);
     const appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { direction, size, titleTextColor, titleTextSize, titleTextWeight, descTextColor, descTextSize, divider, dividerSize, zeroPadding, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
+    const [animationState, setAnimationState] = useState(_isOpen
+        ? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
+        : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH);
     useEffect(() => {
         const isFromOpenToClose = isOpenPrevRef.current === true && !_isOpen;
         if (isFromOpenToClose && onClose) {
@@ -93,10 +115,33 @@ function Drawer(props) {
         if (isNeedShowWarning) {
             console.warn('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [_isOpen, onClose]);
+    // manage 'enter' and 'exit' animations
+    useEffect(() => {
+        if (isFirstRenderRef.current) {
+            isFirstRenderRef.current = false;
+            return;
+        }
+        setAnimationState(ANIMATION_STATE_SNAPSHOTS.DEFAULT);
+        // 16ms delay to prevent react from batching updates
+        const startTransitionDelay = 16;
+        const timeoutDelay = _isOpen ? startTransitionDelay : ANIMATION_DURATION;
+        const timeout = setTimeout(() => {
+            setAnimationState(_isOpen
+                ? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
+                : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH);
+        }, timeoutDelay);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [_isOpen]);
+    if (!animationState.isInDOM) {
+        return null;
+    }
     return (jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), dataTour: dataTour, direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
-        customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
+        customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, duration: ANIMATION_DURATION, enableOverlay: enableOverlay, lockBackgroundScroll: lockBackgroundScroll, overlayClassName: "drawer__overlay", open: animationState.isOpen, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 export { Drawer, drawerAppearance, drawerConfig };

package/dist/components/Notification.js

@@ -1,12 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { L as Loader } from '../Loader_es_Dq2-7sn2.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { B as Button } from '../Button_es_qNbDsXQg.js';
 import { I as Icon } from '../Icon_es_5JUPM7bP.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
-import { icons20 } from '@itcase/icons/default';
+import { icons24 } from '@itcase/icons/default';
 import { useNotifications, useNotificationsAPI } from '../context/Notifications.js';
 import '../context/UIContext.js';
 import 'react';
@@ -22,7 +23,6 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../Link_es_P2b6ya7P.js';
-import '../Loader_es_Dq2-7sn2.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
@@ -32,14 +32,13 @@ const notificationAppearanceDefault = {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'xxl',
         descTextColor: 'surfaceTextPrimary',
-        descTextSize: 'm',
         borderColor: 'surfaceBorderPrimary',
         textColor: 'surfaceTextPrimary',
-        iconSize: 20,
-        closeIcon: icons20.Action.Close,
-        closeIconFillIcon: 'surfaceItemPrimary',
+        buttonAppearance: 'accentPrimary sizeXXL solid rounded',
+        loaderAppearance: 'accentTertiary sizeS ghost rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
     },
 };
 
@@ -48,14 +47,13 @@ const notificationAppearanceError = {
         fill: 'errorPrimary',
         fillHover: 'errorPrimaryHover',
         titleTextColor: 'errorTextPrimary',
-        titleTextSize: 'l',
         descTextColor: 'errorTextPrimary',
-        descTextSize: 'm',
         borderColor: 'errorBorderPrimary',
         textColor: 'errorTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
-        closeIcon: icons20.Action.Close,
-        closeIconAppearance: 'errorPrimary size_20_20 solid circular',
+        loaderAppearance: 'accentPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
     },
 };
 
@@ -64,19 +62,59 @@ const notificationAppearanceInfo = {
         fill: 'infoPrimary',
         fillHover: 'infoPrimaryHover',
         titleTextColor: 'infoTextPrimary',
-        titleTextSize: 'l',
         descTextColor: 'infoTextPrimary',
-        descTextSize: 'm',
         borderColor: 'infoBorderPrimary',
         textColor: 'infoTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
-        iconSize: 20,
-        closeIcon: icons20.Action.Close,
-        closeIconAppearance: 'infoPrimary size_20_20 solid circular',
+        loaderAppearance: 'accentPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
+    },
+};
+
+const notificationAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
-const notificationAppearanceSize = {};
+const notificationAppearanceSize = {
+    sizeM: {
+        size: 'm',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        iconSize: 24,
+        loaderAppearanceSize: 'sizeS',
+        closeIconAppearanceSize: 'size_24_24',
+    },
+    sizeS: {
+        size: 'm',
+        titleTextSize: 'xl',
+        descTextSize: 'm',
+        iconSize: 24,
+        loaderAppearanceSize: 'sizeS',
+        closeIconAppearanceSize: 'size_24_24',
+    },
+};
 
 const notificationAppearanceStyle = {
     solid: {
@@ -97,15 +135,13 @@ const notificationAppearanceSuccess = {
         fill: 'successPrimary',
         fillHover: 'successPrimaryHover',
         titleTextColor: 'successTextPrimary',
-        titleTextSize: 'l',
         descTextColor: 'successTextPrimary',
-        descTextSize: 'm',
         borderColor: 'successBorderPrimary',
         textColor: 'successTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
-        iconSize: 20,
-        closeIcon: icons20.Action.Close,
-        closeIconAppearance: 'successPrimary size_20_20 solid circular',
+        loaderAppearance: 'accentPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
     },
 };
 
@@ -114,20 +150,19 @@ const notificationAppearanceWarning = {
         fill: 'warningPrimary',
         fillHover: 'warningPrimaryHover',
         titleTextColor: 'warningTextPrimary',
-        titleTextSize: 'l',
         descTextColor: 'warningTextPrimary',
-        descTextSize: 'm',
         borderColor: 'surfaceBorderPrimary',
         textColor: 'warningTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
-        iconSize: 20,
-        closeIcon: icons20.Action.Close,
-        closeIconAppearance: 'warningPrimary size_20_20 solid circular',
+        loaderAppearance: 'accentPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
     },
 };
 
 const notificationAppearance = {
     ...notificationAppearanceDefault,
+    ...notificationAppearanceShape,
     ...notificationAppearanceSize,
     ...notificationAppearanceStyle,
     ...notificationAppearanceError,
@@ -143,13 +178,13 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, appearance, className, dataTestId, dataTour, title, text, float, global, toast, before, after, isSkeleton, onClickButton, onClickClose, } = props;
+    const { id, appearance, className, dataTestId, dataTour, type, title, text, float, global, toast, before, after, isSkeleton, isLoading, onClickButton, onClickClose, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, notificationConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, widthClass, closeIcon, closeIconAppearance, closeIconSrc, } = propsGenerator;
+    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'hug', shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, closeIconAppearanceSize, closeIconSrc, } = propsGenerator;
     // @ts-expect-error
     const { styles: notificationStyles } = useStyles(props);
-    return (jsxs("div", { className: clsx('notification__item', float && 'notification__item_float', toast && 'notification__item_toast', global && 'notification__item_global', widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), onClickClose && (jsx(Icon, { appearance: closeIconAppearance, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsx(Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
+    return (jsxs("div", { className: clsx('notification__item', float && 'notification__item_float', toast && 'notification__item_toast', global && 'notification__item_global', widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (jsx(Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsx(Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
 }
 
 function NotificationWrapper(props) {

package/dist/components/Pagination.js

@@ -255,7 +255,6 @@ function Pagination(props) {
      * @deprecated The method should not be used
      */
     onPerPageCountChange, } = props;
-    const minPageCount = Math.min(...pageCountList);
     const _onChangePage = useMemo(() => {
         if (onPageChange) {
             console.warn('@itcase/ui Pagination warning: "onPageChange" is deprecated, use "onChangePage" instead.');
@@ -308,7 +307,10 @@ function Pagination(props) {
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
     const { styles: paginationStyles } = useStyles(props);
-    return ((allItemsCount > perPageCount || minPageCount <= perPageCount) && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
+    const minPageSize = Math.min(perPageCount, ...pageCountList);
+    // If there are fewer items than the minimum page size - pagination wont work.
+    const isPaginationDisplayed = allItemsCount > minPageSize;
+    return (isPaginationDisplayed && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
                     `fill fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass &&
                     `text text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
                     `text text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&

package/dist/css/components/Loader/Loader.css

@@ -72,6 +72,42 @@
     transform: scale(1);
   }
 }
+.loader {
+  &_type {
+    &_hug {
+      ^^&__inner {
+        width: auto;
+        height: auto;
+        position: absolute;
+        display: flex;
+        left: 12px;
+        top: 50%;
+        transform: translate(0%, -50%);
+      }
+      ^^&__item {
+        border-radius: 50%;
+        display: inline-block;
+        animation: loaderHug 1.4s infinite ease-in-out both;
+        &:first-child {
+          animation-delay: -0.32s;
+        }
+        &:nth-child(2) {
+          animation-delay: -0.16s;
+        }
+      }
+    }
+  }
+}
+@keyframes loaderHug {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
 .loader {
   @each $size in xxl, xl, l, m, s, xs, xxs {
     &_size_$(size) {

package/dist/css/components/Notification/Notification.css

@@ -33,36 +33,6 @@
     }
   }
 }
-.notification__item {
-  &_float {
-    @mixin elevation-8;
-    ^&-wrapper {
-      padding: 12px;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}
-.notification__item {
-  &_toast {
-    width: 100%;
-    @mixin elevation-8;
-    ^&-wrapper {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}
-.notification__item {
-  &_global {
-    width: 100%;
-    @mixin elevation-8;
-    ^&-wrapper {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}
 .notification__item {
   width: 340px;
   &-wrapper {
@@ -78,8 +48,18 @@
     }
     ^&-close {
       position: absolute;
-      top: 12px;
-      right: 12px;
+      top: 0;
+      right: 0;
+    }
+  }
+}
+.notification__item {
+  @each $size in xxl, xl, l, m, s, xs, xxs {
+    &_size_$(size) {
+      padding: var(--notification-item-$(size)-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-$(size)-gap);
+      }
     }
   }
 }
@@ -107,6 +87,29 @@
     background-position: -200%;
   }
 }
+.notification__item {
+  &&_type {
+    &_float {
+      ^^&-wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    &_toast {
+      ^^&-wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    &_global {
+      width: 100%;
+      ^^&-wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
 :root {
   --notification-item-set-float-border-radius: 10px;
   --notification-item-set-float-padding: 20px;
@@ -118,4 +121,9 @@
   --notification-item-set-top-padding: 10px;
   --notification-item-set-toast-border-radius: 0;
   --notification-item-set-toast-padding: 0;
+
+  --notification-item-m-padding: 12px;
+  --notification-item-s-padding: 12px;
+  --notification-item-m-gap: 8px;
+  --notification-item-s-gap: 8px;
 }

package/dist/css/components/Notification/css/__item/notification__item.css

@@ -13,8 +13,8 @@
     }
     ^&-close {
       position: absolute;
-      top: 12px;
-      right: 12px;
+      top: 0;
+      right: 0;
     }
   }
 }

package/dist/css/components/Notification/css/__item/notification__item_size.css

@@ -0,0 +1,10 @@
+.notification__item {
+  @each $size in xxl, xl, l, m, s, xs, xxs {
+    &_size_$(size) {
+      padding: var(--notification-item-$(size)-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-$(size)-gap);
+      }
+    }
+  }
+}

package/dist/css/components/Notification/css/__item/notification__item_type.css

@@ -0,0 +1,23 @@
+.notification__item {
+  &&_type {
+    &_float {
+      ^^&-wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    &_toast {
+      ^^&-wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    &_global {
+      width: 100%;
+      ^^&-wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}

package/dist/css/components/Select/Select.css

@@ -35,8 +35,8 @@
   &&_size {
     @each $size in xl, l, m, s {
       &_$(size) {
+        min-height: var(--select-$(size)-min-height);
         ^^&__control {
-          min-height: var(--select-$(size)-min-height);
           padding: var(--select-$(size)-padding);
         }
         ^^&__option {

package/dist/types/components/Drawer/Drawer.constants.d.ts

@@ -0,0 +1,16 @@
+declare const ANIMATION_DURATION = 300;
+declare const ANIMATION_STATE_SNAPSHOTS: {
+    DEFAULT: {
+        isInDOM: boolean;
+        isOpen: boolean;
+    };
+    ENTER_FINISH: {
+        isInDOM: boolean;
+        isOpen: boolean;
+    };
+    EXIT_FINISH: {
+        isInDOM: boolean;
+        isOpen: boolean;
+    };
+};
+export { ANIMATION_DURATION, ANIMATION_STATE_SNAPSHOTS };

package/dist/types/components/Drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
 import type { DrawerConfig, DrawerProps } from './Drawer.interface';
 declare const drawerConfig: DrawerConfig;
-declare function Drawer(props: DrawerProps): import("react/jsx-runtime").JSX.Element;
+declare function Drawer(props: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
 export { Drawer, drawerConfig };

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

@@ -23,8 +23,9 @@ interface DrawerProps extends DrawerThemeColor, StyleAttributes {
     dataTour?: string;
     direction?: 'bottom' | 'left' | 'right' | 'top';
     enableOverlay?: boolean;
+    lockBackgroundScroll?: boolean;
     size?: number | string;
     type?: string;
-    isOpenModal?: boolean;
+    isOpen?: boolean;
 }
 export type { DrawerProps };

package/dist/types/components/Notification/appearance/notificationDefault.d.ts

@@ -3,14 +3,13 @@ declare const notificationAppearanceDefault: {
         fill: string;
         fillHover: string;
         titleTextColor: string;
-        titleTextSize: string;
         descTextColor: string;
-        descTextSize: string;
         borderColor: string;
         textColor: string;
-        iconSize: number;
+        buttonAppearance: string;
+        loaderAppearance: string;
         closeIcon: string;
-        closeIconFillIcon: string;
+        closeIconAppearance: string;
     };
 };
 export { notificationAppearanceDefault };

package/dist/types/components/Notification/appearance/notificationError.d.ts

@@ -3,12 +3,11 @@ declare const notificationAppearanceError: {
         fill: string;
         fillHover: string;
         titleTextColor: string;
-        titleTextSize: string;
         descTextColor: string;
-        descTextSize: string;
         borderColor: string;
         textColor: string;
         buttonAppearance: string;
+        loaderAppearance: string;
         closeIcon: string;
         closeIconAppearance: string;
     };

package/dist/types/components/Notification/appearance/notificationInfo.d.ts

@@ -3,13 +3,11 @@ declare const notificationAppearanceInfo: {
         fill: string;
         fillHover: string;
         titleTextColor: string;
-        titleTextSize: string;
         descTextColor: string;
-        descTextSize: string;
         borderColor: string;
         textColor: string;
         buttonAppearance: string;
-        iconSize: number;
+        loaderAppearance: string;
         closeIcon: string;
         closeIconAppearance: string;
     };

package/dist/types/components/Notification/appearance/notificationShape.d.ts

@@ -0,0 +1,3 @@
+import { NotificationAppearance } from '../Notification.interface';
+declare const notificationAppearanceShape: NotificationAppearance;
+export { notificationAppearanceShape };

package/dist/types/components/Notification/appearance/notificationSize.d.ts

@@ -1,2 +1,19 @@
-declare const notificationAppearanceSize: {};
+declare const notificationAppearanceSize: {
+    sizeM: {
+        size: string;
+        titleTextSize: string;
+        descTextSize: string;
+        iconSize: number;
+        loaderAppearanceSize: string;
+        closeIconAppearanceSize: string;
+    };
+    sizeS: {
+        size: string;
+        titleTextSize: string;
+        descTextSize: string;
+        iconSize: number;
+        loaderAppearanceSize: string;
+        closeIconAppearanceSize: string;
+    };
+};
 export { notificationAppearanceSize };

package/dist/types/components/Notification/appearance/notificationSuccess.d.ts

@@ -3,13 +3,11 @@ declare const notificationAppearanceSuccess: {
         fill: string;
         fillHover: string;
         titleTextColor: string;
-        titleTextSize: string;
         descTextColor: string;
-        descTextSize: string;
         borderColor: string;
         textColor: string;
         buttonAppearance: string;
-        iconSize: number;
+        loaderAppearance: string;
         closeIcon: string;
         closeIconAppearance: string;
     };

package/dist/types/components/Notification/appearance/notificationWarning.d.ts

@@ -3,13 +3,11 @@ declare const notificationAppearanceWarning: {
         fill: string;
         fillHover: string;
         titleTextColor: string;
-        titleTextSize: string;
         descTextColor: string;
-        descTextSize: string;
         borderColor: string;
         textColor: string;
         buttonAppearance: string;
-        iconSize: number;
+        loaderAppearance: string;
         closeIcon: string;
         closeIconAppearance: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.146",
+  "version": "1.8.148",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -121,7 +121,7 @@
     "react-dom": "^18.3.1",
     "react-indiana-drag-scroll": "^3.0.3-alpha",
     "react-inlinesvg": "^4.2.0",
-    "react-modal-sheet": "5.1.2",
+    "react-modal-sheet": "5.2.0",
     "react-modern-drawer": "^1.4.0",
     "react-otp-input": "^3.1.1",
     "react-paginate": "^8.3.0",

package/dist/css/components/Notification/css/__item/notification__item_float.css

@@ -1,10 +0,0 @@
-.notification__item {
-  &_float {
-    @mixin elevation-8;
-    ^&-wrapper {
-      padding: 12px;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}

package/dist/css/components/Notification/css/__item/notification__item_global.css

@@ -1,10 +0,0 @@
-.notification__item {
-  &_global {
-    width: 100%;
-    @mixin elevation-8;
-    ^&-wrapper {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}

package/dist/css/components/Notification/css/__item/notification__item_toast.css

@@ -1,10 +0,0 @@
-.notification__item {
-  &_toast {
-    width: 100%;
-    @mixin elevation-8;
-    ^&-wrapper {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}