@itcase/ui 1.8.147 → 1.8.149

package/dist/{DatePicker_cjs_BOPN9WVz.js → DatePicker_cjs_YWv3CCNF.js}

@@ -100,8 +100,8 @@ function DatePickerInput(props) {
     const { daySize, dayTextColor, dayTextShape, dayTextSize, iconFill, iconFillHover, iconFillSize, iconItemFill, iconLeft, iconRight, iconShape, monthTextColor, monthTextSize, monthTextWeight, popper, popperPlacement, sizeClass, widthClass, yearTextColor, yearTextSize, yearTextWeight, isClearable, } = propsGenerator;
     const datepickerRef = React.useRef(null);
     const [dateStart, dateEnd] = React.useMemo(() => {
-        let dateStart;
-        if (value) {
+        let dateStart = undefined;
+        if (value !== undefined) {
             if (typeof value === 'string') {
                 dateStart = new Date(value);
             }
@@ -109,11 +109,8 @@ function DatePickerInput(props) {
                 dateStart = value;
             }
         }
-        else {
-            dateStart = undefined;
-        }
-        let dateEnd;
-        if (endValue) {
+        let dateEnd = undefined;
+        if (endValue !== undefined) {
             if (typeof endValue === 'string') {
                 dateEnd = new Date(endValue);
             }
@@ -121,9 +118,6 @@ function DatePickerInput(props) {
                 dateEnd = endValue;
             }
         }
-        else {
-            dateEnd = undefined;
-        }
         return [dateStart, dateEnd];
     }, [value, endValue]);
     const handleChange = React.useCallback((selected) => {

package/dist/{DatePicker_es_-aO8EkK8.js → DatePicker_es_CqKPt0Nw.js}

@@ -98,8 +98,8 @@ function DatePickerInput(props) {
     const { daySize, dayTextColor, dayTextShape, dayTextSize, iconFill, iconFillHover, iconFillSize, iconItemFill, iconLeft, iconRight, iconShape, monthTextColor, monthTextSize, monthTextWeight, popper, popperPlacement, sizeClass, widthClass, yearTextColor, yearTextSize, yearTextWeight, isClearable, } = propsGenerator;
     const datepickerRef = useRef(null);
     const [dateStart, dateEnd] = useMemo(() => {
-        let dateStart;
-        if (value) {
+        let dateStart = undefined;
+        if (value !== undefined) {
             if (typeof value === 'string') {
                 dateStart = new Date(value);
             }
@@ -107,11 +107,8 @@ function DatePickerInput(props) {
                 dateStart = value;
             }
         }
-        else {
-            dateStart = undefined;
-        }
-        let dateEnd;
-        if (endValue) {
+        let dateEnd = undefined;
+        if (endValue !== undefined) {
             if (typeof endValue === 'string') {
                 dateEnd = new Date(endValue);
             }
@@ -119,9 +116,6 @@ function DatePickerInput(props) {
                 dateEnd = endValue;
             }
         }
-        else {
-            dateEnd = undefined;
-        }
         return [dateStart, dateEnd];
     }, [value, endValue]);
     const handleChange = useCallback((selected) => {

package/dist/cjs/components/DatePeriod.js

@@ -3,8 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var luxon = require('luxon');
 var common = require('@itcase/common');
-var DatePicker = require('../../DatePicker_cjs_BOPN9WVz.js');
+var DatePicker = require('../../DatePicker_cjs_YWv3CCNF.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var ChipsGroup = require('../../ChipsGroup_cjs_BNfzAmhc.js');
@@ -119,8 +120,16 @@ function DatePeriod(props) {
     const checkIsChipsActive = React.useCallback((targetPeriodItem) => {
         const dateStartIso = targetPeriodItem.dateIntervalsList[0];
         const dateEndIso = targetPeriodItem.dateIntervalsList[1];
-        return (dateStartIso === datePeriodValueStart &&
-            dateEndIso === datePeriodValueEnd);
+        let normalizedDatePeriodValueStart = null;
+        let normalizedDatePeriodValueEnd = null;
+        if (datePeriodValueStart) {
+            normalizedDatePeriodValueStart = luxon.DateTime.fromJSDate(new Date(datePeriodValueStart)).toISODate();
+        }
+        if (datePeriodValueEnd) {
+            normalizedDatePeriodValueEnd = luxon.DateTime.fromJSDate(new Date(datePeriodValueEnd)).toISODate();
+        }
+        return (dateStartIso === normalizedDatePeriodValueStart &&
+            dateEndIso === normalizedDatePeriodValueEnd);
     }, [datePeriodValueEnd, datePeriodValueStart]);
     // const onChangeDatePicker = useCallback(
     //   (dateStart: Date | null, dateEnd: Date | null) => {
@@ -151,9 +160,7 @@ function DatePeriod(props) {
                         fillHover: datePickerInputFillHover,
                         textSize: datePickerInputTextSize,
                         placeholder: 'Выбрать период',
-                    }, value: datePeriodValueStart, 
-                    // onChange={onChangeDatePicker}
-                    onChange: onChangeDatePeriod })] }) }));
+                    }, value: datePeriodValueStart, onChange: onChangeDatePeriod })] }) }));
 }
 
 exports.DatePeriod = DatePeriod;

package/dist/cjs/components/DatePicker.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('../../DatePicker_cjs_BOPN9WVz.js');
+var DatePicker = require('../../DatePicker_cjs_YWv3CCNF.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

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

@@ -37,8 +37,10 @@ const notificationAppearanceDefault = {
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         textColor: 'surfaceTextPrimary',
-        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',
     },
 };
 
@@ -51,8 +53,9 @@ const notificationAppearanceError = {
         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',
     },
 };
 
@@ -65,8 +68,9 @@ const notificationAppearanceInfo = {
         borderColor: 'infoBorderPrimary',
         textColor: 'infoTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
-        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',
     },
 };
 
@@ -102,6 +106,7 @@ const notificationAppearanceSize = {
         descTextSize: 'm',
         iconSize: 24,
         loaderAppearanceSize: 'sizeS',
+        closeIconAppearanceSize: 'size_24_24',
     },
     sizeS: {
         size: 'm',
@@ -109,6 +114,7 @@ const notificationAppearanceSize = {
         descTextSize: 'm',
         iconSize: 24,
         loaderAppearanceSize: 'sizeS',
+        closeIconAppearanceSize: 'size_24_24',
     },
 };
 
@@ -135,8 +141,9 @@ const notificationAppearanceSuccess = {
         borderColor: 'successBorderPrimary',
         textColor: 'successTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
-        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',
     },
 };
 
@@ -149,9 +156,9 @@ const notificationAppearanceWarning = {
         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',
     },
 };
 
@@ -173,13 +180,13 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, appearance, className, dataTestId, dataTour, title, text, float, global, toast, before, after, isSkeleton, isLoading, 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, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType, shapeClass, shapeStrengthClass, sizeClass, 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}`, sizeClass && `notification__item_size_${sizeClass}`, 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, 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/cjs/context/Notifications.js

@@ -156,16 +156,16 @@ function createNotification(notification, onClose) {
     }
     switch (status) {
         case 'success':
-            appearance = 'successPrimary';
+            appearance = 'successPrimary sizeM solid';
             break;
         case 'info':
-            appearance = 'infoPrimary';
+            appearance = 'infoPrimary sizeM solid';
             break;
         case 'error':
-            appearance = 'errorPrimary';
+            appearance = 'errorPrimary sizeM solid';
             break;
         case 'warning':
-            appearance = 'warningPrimary';
+            appearance = 'warningPrimary sizeM solid';
             break;
     }
     return {

package/dist/components/DatePeriod.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import clsx from 'clsx';
+import { DateTime } from 'luxon';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_-aO8EkK8.js';
+import { D as DatePickerInput } from '../DatePicker_es_CqKPt0Nw.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_UTiUhYs7.js';
@@ -117,8 +118,16 @@ function DatePeriod(props) {
     const checkIsChipsActive = useCallback((targetPeriodItem) => {
         const dateStartIso = targetPeriodItem.dateIntervalsList[0];
         const dateEndIso = targetPeriodItem.dateIntervalsList[1];
-        return (dateStartIso === datePeriodValueStart &&
-            dateEndIso === datePeriodValueEnd);
+        let normalizedDatePeriodValueStart = null;
+        let normalizedDatePeriodValueEnd = null;
+        if (datePeriodValueStart) {
+            normalizedDatePeriodValueStart = DateTime.fromJSDate(new Date(datePeriodValueStart)).toISODate();
+        }
+        if (datePeriodValueEnd) {
+            normalizedDatePeriodValueEnd = DateTime.fromJSDate(new Date(datePeriodValueEnd)).toISODate();
+        }
+        return (dateStartIso === normalizedDatePeriodValueStart &&
+            dateEndIso === normalizedDatePeriodValueEnd);
     }, [datePeriodValueEnd, datePeriodValueStart]);
     // const onChangeDatePicker = useCallback(
     //   (dateStart: Date | null, dateEnd: Date | null) => {
@@ -149,9 +158,7 @@ function DatePeriod(props) {
                         fillHover: datePickerInputFillHover,
                         textSize: datePickerInputTextSize,
                         placeholder: 'Выбрать период',
-                    }, value: datePeriodValueStart, 
-                    // onChange={onChangeDatePicker}
-                    onChange: onChangeDatePeriod })] }) }));
+                    }, value: datePeriodValueStart, onChange: onChangeDatePeriod })] }) }));
 }
 
 export { DatePeriod, datePeriodAppearance, datePeriodConfig };

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_-aO8EkK8.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_CqKPt0Nw.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

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

@@ -7,7 +7,7 @@ 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';
@@ -35,8 +35,10 @@ const notificationAppearanceDefault = {
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         textColor: 'surfaceTextPrimary',
-        closeIcon: icons20.Action.Close,
-        closeIconFillIcon: 'surfaceItemPrimary',
+        buttonAppearance: 'accentPrimary sizeXXL solid rounded',
+        loaderAppearance: 'accentTertiary sizeS ghost rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
     },
 };
 
@@ -49,8 +51,9 @@ const notificationAppearanceError = {
         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',
     },
 };
 
@@ -63,8 +66,9 @@ const notificationAppearanceInfo = {
         borderColor: 'infoBorderPrimary',
         textColor: 'infoTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
-        closeIcon: icons20.Action.Close,
-        closeIconAppearance: 'infoPrimary size_20_20 solid circular',
+        loaderAppearance: 'accentPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
     },
 };
 
@@ -100,6 +104,7 @@ const notificationAppearanceSize = {
         descTextSize: 'm',
         iconSize: 24,
         loaderAppearanceSize: 'sizeS',
+        closeIconAppearanceSize: 'size_24_24',
     },
     sizeS: {
         size: 'm',
@@ -107,6 +112,7 @@ const notificationAppearanceSize = {
         descTextSize: 'm',
         iconSize: 24,
         loaderAppearanceSize: 'sizeS',
+        closeIconAppearanceSize: 'size_24_24',
     },
 };
 
@@ -133,8 +139,9 @@ const notificationAppearanceSuccess = {
         borderColor: 'successBorderPrimary',
         textColor: 'successTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
-        closeIcon: icons20.Action.Close,
-        closeIconAppearance: 'successPrimary size_20_20 solid circular',
+        loaderAppearance: 'accentPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
     },
 };
 
@@ -147,9 +154,9 @@ const notificationAppearanceWarning = {
         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',
     },
 };
 
@@ -171,13 +178,13 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, appearance, className, dataTestId, dataTour, title, text, float, global, toast, before, after, isSkeleton, isLoading, 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, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType, shapeClass, shapeStrengthClass, sizeClass, 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}`, sizeClass && `notification__item_size_${sizeClass}`, 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, 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/context/Notifications.js

@@ -154,16 +154,16 @@ function createNotification(notification, onClose) {
     }
     switch (status) {
         case 'success':
-            appearance = 'successPrimary';
+            appearance = 'successPrimary sizeM solid';
             break;
         case 'info':
-            appearance = 'infoPrimary';
+            appearance = 'infoPrimary sizeM solid';
             break;
         case 'error':
-            appearance = 'errorPrimary';
+            appearance = 'errorPrimary sizeM solid';
             break;
         case 'warning':
-            appearance = 'warningPrimary';
+            appearance = 'warningPrimary sizeM solid';
             break;
     }
     return {

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,33 +33,6 @@
     }
   }
 }
-.notification__item {
-  &&_float {
-    ^&-wrapper {
-      padding: 12px;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}
-.notification__item {
-  &&_toast {
-    width: 100%;
-    ^&-wrapper {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}
-.notification__item {
-  &&_global {
-    width: 100%;
-    ^&-wrapper {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}
 .notification__item {
   width: 340px;
   &-wrapper {
@@ -75,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);
+      }
     }
   }
 }
@@ -104,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 +124,6 @@
 
   --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

@@ -1,8 +1,9 @@
 .notification__item {
   @each $size in xxl, xl, l, m, s, xs, xxs {
     &_size_$(size) {
-      & .notification__item-wrapper {
-        padding: var(--notification-item-$(size)-padding);
+      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/DatePeriod/DatePeriod.interface.d.ts

@@ -20,14 +20,14 @@ type DatePeriodProps = DatePeriodThemeColor & StyleAttributes & {
     chipsShape?: ShapeProps;
     className?: string;
     datePeriodIntervalsList: DatePeriodItem[];
-    datePeriodValueEnd: DateIso | null;
-    datePeriodValueStart: DateIso | null;
+    datePeriodValueEnd: Date | DateIso | null;
+    datePeriodValueStart: Date | DateIso | null;
     datePickerAppearance?: CompositeAppearanceKey;
     datePickerInputAppearance?: CompositeAppearanceKey;
     datePickerInputFillHover?: FillHoverProps;
     datePickerInputSize?: SizeOptionProps;
     datePickerInputTextSize?: TextSizeProps;
     isSkeleton?: boolean;
-    onChangeDatePeriod: (dateStartIso: DateIso | null, dateEndIso: DateIso | null) => void;
+    onChangeDatePeriod: (dateStart: Date | null, dateEnd: Date | null) => void;
 };
-export type { DatePeriodThemeColor, DatePeriodAppearanceType, DatePeriodConfig, DatePeriodProps, };
+export type { DatePeriodAppearanceType, DatePeriodConfig, DatePeriodProps, DatePeriodThemeColor, };

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { DatePickerProps } from 'react-datepicker';
-import { AppearanceKeysDefault, FillHoverProps, FillProps, IconFillSizeProps, IconSizeProps, ItemColorProps, ShapeProps, SizeProps, TextColorHoverProps, TextColorProps, TextSizeProps, TextWeightProps } from '@itcase/types';
+import { AppearanceKeysDefault, DateIso, FillHoverProps, FillProps, IconFillSizeProps, IconSizeProps, ItemColorProps, ShapeProps, SizeProps, TextColorHoverProps, TextColorProps, TextSizeProps, TextWeightProps } from '@itcase/types';
 import { InputProps } from '../Input/Input.interface';
 interface DatePickerProps extends DatePickerProps {
     customTimeInput?: ReactNode;
@@ -64,11 +64,11 @@ export interface DatePickerInputProps extends DatePickerProps {
     clearLabelTextColorHover?: TextColorHoverProps;
     clearLabelTextSize?: TextSizeProps;
     datePickerProps: DatePickerProps;
-    endValue?: string;
+    endValue?: string | Date | DateIso;
     inputProps?: InputProps;
     labelTextSize?: TextSizeProps;
-    value?: string;
-    onChange?: any;
+    value?: string | Date | DateIso;
+    onChange: (dateStart: Date | null, dateEnd: Date | null) => void;
 }
 export interface DatePickerCustomInput {
     clearIcon?: any;

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

@@ -6,8 +6,10 @@ declare const notificationAppearanceDefault: {
         descTextColor: string;
         borderColor: string;
         textColor: string;
+        buttonAppearance: string;
+        loaderAppearance: string;
         closeIcon: string;
-        closeIconFillIcon: string;
+        closeIconAppearance: string;
     };
 };
 export { notificationAppearanceDefault };

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

@@ -7,6 +7,7 @@ declare const notificationAppearanceError: {
         borderColor: string;
         textColor: string;
         buttonAppearance: string;
+        loaderAppearance: string;
         closeIcon: string;
         closeIconAppearance: string;
     };

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

@@ -7,6 +7,7 @@ declare const notificationAppearanceInfo: {
         borderColor: string;
         textColor: string;
         buttonAppearance: string;
+        loaderAppearance: string;
         closeIcon: string;
         closeIconAppearance: string;
     };

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

@@ -5,6 +5,7 @@ declare const notificationAppearanceSize: {
         descTextSize: string;
         iconSize: number;
         loaderAppearanceSize: string;
+        closeIconAppearanceSize: string;
     };
     sizeS: {
         size: string;
@@ -12,6 +13,7 @@ declare const notificationAppearanceSize: {
         descTextSize: string;
         iconSize: number;
         loaderAppearanceSize: string;
+        closeIconAppearanceSize: string;
     };
 };
 export { notificationAppearanceSize };

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

@@ -7,6 +7,7 @@ declare const notificationAppearanceSuccess: {
         borderColor: string;
         textColor: string;
         buttonAppearance: string;
+        loaderAppearance: string;
         closeIcon: string;
         closeIconAppearance: string;
     };

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

@@ -7,7 +7,7 @@ declare const notificationAppearanceWarning: {
         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.147",
+  "version": "1.8.149",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -109,11 +109,11 @@
     "@itcase/tokens-palette": "^1.1.20",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.23.22",
+    "framer-motion": "^12.23.23",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "luxon": "^3.7.2",
-    "motion": "^12.23.22",
+    "motion": "^12.23.23",
     "rc-slider": "^11.1.9",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -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,9 +0,0 @@
-.notification__item {
-  &&_float {
-    ^&-wrapper {
-      padding: 12px;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}

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

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

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

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