@itcase/ui 1.8.145 → 1.8.147

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,12 +34,9 @@ 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',
     },
@@ -50,9 +47,7 @@ const notificationAppearanceError = {
         fill: 'errorPrimary',
         fillHover: 'errorPrimaryHover',
         titleTextColor: 'errorTextPrimary',
-        titleTextSize: 'l',
         descTextColor: 'errorTextPrimary',
-        descTextSize: 'm',
         borderColor: 'errorBorderPrimary',
         textColor: 'errorTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
@@ -66,19 +61,56 @@ 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',
     },
 };
 
-const notificationAppearanceSize = {};
+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 = {
+    sizeM: {
+        size: 'm',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        iconSize: 24,
+        loaderAppearanceSize: 'sizeS',
+    },
+    sizeS: {
+        size: 'm',
+        titleTextSize: 'xl',
+        descTextSize: 'm',
+        iconSize: 24,
+        loaderAppearanceSize: 'sizeS',
+    },
+};
 
 const notificationAppearanceStyle = {
     solid: {
@@ -99,13 +131,10 @@ 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',
     },
@@ -116,9 +145,7 @@ const notificationAppearanceWarning = {
         fill: 'warningPrimary',
         fillHover: 'warningPrimaryHover',
         titleTextColor: 'warningTextPrimary',
-        titleTextSize: 'l',
         descTextColor: 'warningTextPrimary',
-        descTextSize: 'm',
         borderColor: 'surfaceBorderPrimary',
         textColor: 'warningTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
@@ -130,6 +157,7 @@ const notificationAppearanceWarning = {
 
 const notificationAppearance = {
     ...notificationAppearanceDefault,
+    ...notificationAppearanceShape,
     ...notificationAppearanceSize,
     ...notificationAppearanceStyle,
     ...notificationAppearanceError,
@@ -145,13 +173,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, 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, shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, 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}`, 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] }));
 }
 
 function NotificationWrapper(props) {

package/dist/cjs/components/Pagination.js

@@ -248,7 +248,7 @@ const paginationConfig = {
     },
 };
 function Pagination(props) {
-    const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountArray = [10, 20, 50, 100], pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount, 
+    const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageCountList = [10, 20, 50, 100], pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount, 
     /**
      * @deprecated The method should not be used
      */
@@ -257,6 +257,7 @@ 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.');
@@ -275,9 +276,9 @@ function Pagination(props) {
     const [activeDropdownItem, setActiveDropdownItem] = React.useState(perPageCount);
     const pageCountDropdownArray = React.useMemo(() => {
         return isPageCountDropdownReversed
-            ? pageCountArray?.reverse()
-            : pageCountArray;
-    }, [isPageCountDropdownReversed, pageCountArray]);
+            ? pageCountList?.reverse()
+            : pageCountList;
+    }, [isPageCountDropdownReversed, pageCountList]);
     // Toggle command menu
     const onClickCommandMenuButton = React.useCallback(() => {
         setIsOpenDropdown((state) => !state);
@@ -309,7 +310,7 @@ 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 && (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 &&
+    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 &&
                     `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 &&
@@ -319,8 +320,8 @@ function Pagination(props) {
                 // next button
                 nextLabel: jsxRuntime.jsx(Icon.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
                     (() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed ?? 8, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsxRuntime.jsx(Icon.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
-                            `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
-                                        pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
+                            `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
+                                        pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
                                         pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
 }
 

package/dist/components/Notification.js

@@ -1,5 +1,6 @@
 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';
@@ -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,12 +32,9 @@ 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',
     },
@@ -48,9 +45,7 @@ const notificationAppearanceError = {
         fill: 'errorPrimary',
         fillHover: 'errorPrimaryHover',
         titleTextColor: 'errorTextPrimary',
-        titleTextSize: 'l',
         descTextColor: 'errorTextPrimary',
-        descTextSize: 'm',
         borderColor: 'errorBorderPrimary',
         textColor: 'errorTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
@@ -64,19 +59,56 @@ 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',
     },
 };
 
-const notificationAppearanceSize = {};
+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 = {
+    sizeM: {
+        size: 'm',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        iconSize: 24,
+        loaderAppearanceSize: 'sizeS',
+    },
+    sizeS: {
+        size: 'm',
+        titleTextSize: 'xl',
+        descTextSize: 'm',
+        iconSize: 24,
+        loaderAppearanceSize: 'sizeS',
+    },
+};
 
 const notificationAppearanceStyle = {
     solid: {
@@ -97,13 +129,10 @@ 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',
     },
@@ -114,9 +143,7 @@ const notificationAppearanceWarning = {
         fill: 'warningPrimary',
         fillHover: 'warningPrimaryHover',
         titleTextColor: 'warningTextPrimary',
-        titleTextSize: 'l',
         descTextColor: 'warningTextPrimary',
-        descTextSize: 'm',
         borderColor: 'surfaceBorderPrimary',
         textColor: 'warningTextPrimary',
         buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
@@ -128,6 +155,7 @@ const notificationAppearanceWarning = {
 
 const notificationAppearance = {
     ...notificationAppearanceDefault,
+    ...notificationAppearanceShape,
     ...notificationAppearanceSize,
     ...notificationAppearanceStyle,
     ...notificationAppearanceError,
@@ -143,13 +171,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, 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, shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, 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}`, 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] }));
 }
 
 function NotificationWrapper(props) {

package/dist/components/Pagination.js

@@ -246,7 +246,7 @@ const paginationConfig = {
     },
 };
 function Pagination(props) {
-    const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountArray = [10, 20, 50, 100], pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount, 
+    const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageCountList = [10, 20, 50, 100], pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount, 
     /**
      * @deprecated The method should not be used
      */
@@ -255,6 +255,7 @@ 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.');
@@ -273,9 +274,9 @@ function Pagination(props) {
     const [activeDropdownItem, setActiveDropdownItem] = useState(perPageCount);
     const pageCountDropdownArray = useMemo(() => {
         return isPageCountDropdownReversed
-            ? pageCountArray?.reverse()
-            : pageCountArray;
-    }, [isPageCountDropdownReversed, pageCountArray]);
+            ? pageCountList?.reverse()
+            : pageCountList;
+    }, [isPageCountDropdownReversed, pageCountList]);
     // Toggle command menu
     const onClickCommandMenuButton = useCallback(() => {
         setIsOpenDropdown((state) => !state);
@@ -307,7 +308,7 @@ 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 && (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 &&
+    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 &&
                     `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 &&
@@ -317,8 +318,8 @@ function Pagination(props) {
                 // next button
                 nextLabel: jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
                     (() => (jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed ?? 8, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsx(Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
-                            `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
-                                        pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
+                            `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
+                                        pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
                                         pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
 }
 

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

@@ -34,8 +34,7 @@
   }
 }
 .notification__item {
-  &_float {
-    @mixin elevation-8;
+  &&_float {
     ^&-wrapper {
       padding: 12px;
       display: flex;
@@ -44,9 +43,8 @@
   }
 }
 .notification__item {
-  &_toast {
+  &&_toast {
     width: 100%;
-    @mixin elevation-8;
     ^&-wrapper {
       display: flex;
       flex-direction: column;
@@ -54,9 +52,8 @@
   }
 }
 .notification__item {
-  &_global {
+  &&_global {
     width: 100%;
-    @mixin elevation-8;
     ^&-wrapper {
       display: flex;
       flex-direction: column;
@@ -118,4 +115,7 @@
   --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;
 }

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

@@ -1,6 +1,5 @@
 .notification__item {
-  &_float {
-    @mixin elevation-8;
+  &&_float {
     ^&-wrapper {
       padding: 12px;
       display: flex;

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

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

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

@@ -0,0 +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);
+      }
+    }
+  }
+}

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

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

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

@@ -3,12 +3,9 @@ declare const notificationAppearanceDefault: {
         fill: string;
         fillHover: string;
         titleTextColor: string;
-        titleTextSize: string;
         descTextColor: string;
-        descTextSize: string;
         borderColor: string;
         textColor: string;
-        iconSize: number;
         closeIcon: string;
         closeIconFillIcon: string;
     };

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

@@ -3,9 +3,7 @@ declare const notificationAppearanceError: {
         fill: string;
         fillHover: string;
         titleTextColor: string;
-        titleTextSize: string;
         descTextColor: string;
-        descTextSize: string;
         borderColor: string;
         textColor: string;
         buttonAppearance: string;

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

@@ -3,13 +3,10 @@ declare const notificationAppearanceInfo: {
         fill: string;
         fillHover: string;
         titleTextColor: string;
-        titleTextSize: string;
         descTextColor: string;
-        descTextSize: string;
         borderColor: string;
         textColor: string;
         buttonAppearance: string;
-        iconSize: number;
         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,17 @@
-declare const notificationAppearanceSize: {};
+declare const notificationAppearanceSize: {
+    sizeM: {
+        size: string;
+        titleTextSize: string;
+        descTextSize: string;
+        iconSize: number;
+        loaderAppearanceSize: string;
+    };
+    sizeS: {
+        size: string;
+        titleTextSize: string;
+        descTextSize: string;
+        iconSize: number;
+        loaderAppearanceSize: string;
+    };
+};
 export { notificationAppearanceSize };

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

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

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

@@ -3,9 +3,7 @@ declare const notificationAppearanceWarning: {
         fill: string;
         fillHover: string;
         titleTextColor: string;
-        titleTextSize: string;
         descTextColor: string;
-        descTextSize: string;
         borderColor: string;
         textColor: string;
         buttonAppearance: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.145",
+  "version": "1.8.147",
   "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.19",
+    "framer-motion": "^12.23.22",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "luxon": "^3.7.2",
-    "motion": "^12.23.19",
+    "motion": "^12.23.22",
     "rc-slider": "^11.1.9",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -137,8 +137,8 @@
     "@babel/core": "^7.28.4",
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
-    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
     "@itcase/config": "^1.0.57",
     "@itcase/lint": "^1.1.67",
     "@itcase/types": "^1.0.45",
@@ -147,7 +147,7 @@
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.2",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.4",
     "@semantic-release/changelog": "^6.0.3",
@@ -166,19 +166,19 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^9.1.0",
-    "eslint": "9.36.0",
+    "eslint": "9.37.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.0",
+    "lint-staged": "^16.2.3",
     "prettier": "^3.6.2",
     "react-docgen-typescript": "^2.4.0",
-    "rollup": "^4.52.2",
+    "rollup": "^4.52.4",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.9",
-    "storybook": "^9.1.8",
-    "stylelint": "^16.24.0",
-    "typescript": "^5.9.2"
+    "storybook": "^9.1.10",
+    "stylelint": "^16.25.0",
+    "typescript": "^5.9.3"
   }
 }