@itcase/ui 1.9.36 → 1.9.37

package/dist/cjs/components/Loader.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Loader = require('../../Loader_cjs_CP1xKwb-.js');
+var Loader = require('../../Loader_cjs_BHMB4c8f.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
@@ -20,7 +20,7 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Text_cjs_Co2XdYF-.js');
+require('../../Text_cjs_BJ9NgJkx.js');
 
 
 

package/dist/cjs/components/Logo.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var clsx = require('clsx');
 var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Link = require('../../Link_cjs_DqNtNI23.js');
-require('react');
+var Link = require('../../Link_cjs_CmBw4h-N.js');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');
 require('lodash/camelCase');
@@ -29,14 +29,15 @@ const logoConfig = {
         logoConfig.appearance = appearanceConfig;
     },
 };
-const Logo = urlWithAssetPrefix.urlWithAssetPrefix(function Logo(props) {
-    const { appearance, className, dataTestId, dataTour, href, link } = props;
+const Logo = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Logo(props, ref) {
+    const { appearance, className, dataTestId, dataTour, href, link, isSkeleton, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, logoConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { alignClass, alignDirectionClass, alignItemsClass, src, title, alt, sizeClass, widthClass, } = propsGenerator;
+    //@ts-expect-error
     const { styles: logo } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'logo', alignClass && `align_${alignClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignItemsClass && `logo_align-items_${alignItemsClass}`, sizeClass && `logo_size_${sizeClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: logo, children: link || href ? (jsxRuntime.jsx(Link.LinkWrapper, { className: "logo__link", href: link || href, children: jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
-});
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'logo', isSkeleton && 'logo_mode_skeleton', alignClass && `align_${alignClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignItemsClass && `logo_align-items_${alignItemsClass}`, sizeClass && `logo_size_${sizeClass}`, widthClass && `width_${widthClass}`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: logo, children: link || href ? (jsxRuntime.jsx(Link.LinkWrapper, { className: "logo__link", href: link || href, children: jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
+}));
 
 exports.Logo = Logo;
 exports.logoConfig = logoConfig;

package/dist/cjs/components/MenuItem.js

@@ -6,9 +6,9 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
-var Link = require('../../Link_cjs_DqNtNI23.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Icon = require('../../Icon_cjs_DRdjXL7T.js');
+var Link = require('../../Link_cjs_CmBw4h-N.js');
+var Text = require('../../Text_cjs_BJ9NgJkx.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -29,7 +29,7 @@ require('../context/UrlAssetPrefix.js');
 const menuItemAppearanceAccent = {
     accentMutedPrimary: {
         fill: 'accentTertiary',
-        fillHover: 'accentTertiaryHover',
+        fillHover: 'accentTertiary',
         labelTextColor: 'accentTextQuaternary',
         borderColor: 'accentBorderSecondary',
         iconAfterFillIcon: 'accentItemQuaternary',
@@ -55,7 +55,7 @@ const menuItemAppearanceAccent = {
 
 const menuItemAppearanceError = {
     errorMutedPrimary: {
-        fill: 'errorDisabled',
+        fill: 'errorTertiary',
         labelTextColor: 'errorTextQuaternary',
         labelTextColorHover: 'errorTextQuaternary',
         iconAfterFillIcon: 'errorItemQuaternary',
@@ -63,7 +63,7 @@ const menuItemAppearanceError = {
     },
     errorPrimary: {
         fill: 'errorPrimary',
-        fillHover: 'errorPrimaryHover',
+        fillHover: 'errorPrimary',
         labelTextColor: 'errorTextPrimary',
         labelTextColorHover: 'errorTextPrimary',
         borderColor: 'errorBorderSecondary',
@@ -162,7 +162,7 @@ const menuItemAppearanceSurface = {
     surfaceMutedPrimary: {
         fill: 'surfaceSecondary',
         fillActive: 'surfacePrimary',
-        fillActiveHover: 'surfaceHover',
+        fillActiveHover: 'surfacePrimary',
         labelTextColor: 'surfaceTextQuaternary',
         iconAfterFillIcon: 'surfaceItemQuaternary',
         iconBeforeFillIcon: 'surfaceItemQuaternary',
@@ -170,7 +170,7 @@ const menuItemAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillActive: 'surfaceSecondary',
-        fillActiveHover: 'surfaceTertiary',
+        fillActiveHover: 'surfaceSecondary',
         fillHover: 'surfaceSecondary',
         labelTextActiveColor: 'accentTextSecondary',
         labelTextActiveColorHover: 'accentTextSecondary',
@@ -182,13 +182,13 @@ const menuItemAppearanceSurface = {
     },
     surfaceQuaternary: {
         fill: 'surfaceQuaternary',
-        fillHover: 'surfaceQuaternaryHover',
+        fillHover: 'surfaceQuaternary',
         labelTextColor: 'surfaceTextPrimary',
     },
     surfaceSecondary: {
         fill: 'surfacePrimary',
-        fillActive: 'surfaceHover',
-        fillActiveHover: 'surfaceHover',
+        fillActive: 'surfaceSecondary',
+        fillActiveHover: 'surfaceTertiary',
         fillHover: 'surfaceSecondary',
         labelTextActiveColor: 'accentTextSecondary',
         labelTextActiveColorHover: 'surfaceTextPrimary',
@@ -197,8 +197,8 @@ const menuItemAppearanceSurface = {
         iconBeforeFillIcon: 'surfaceItemPrimary',
     },
     surfaceTertiary: {
-        fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceTertiary',
         labelTextColor: 'surfaceTextPrimary',
     },
 };
@@ -214,8 +214,8 @@ const menuItemAppearance = {
 
 const menuItemConfig = {
     appearance: menuItemAppearance,
-    setAppearance: (appearanceConfig) => {
-        MenuItemConfig.appearance = appearanceConfig;
+    setAppearance: function (appearanceConfig) {
+        this.appearance = appearanceConfig;
     },
 };
 function MenuItem(props) {

package/dist/cjs/components/Modal.js

@@ -8,9 +8,9 @@ var _default = require('@itcase/icons/default');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
-var Overlay = require('../../Overlay_cjs_-hY4qbRG.js');
-var Loader = require('../../Loader_cjs_CP1xKwb-.js');
+var Icon = require('../../Icon_cjs_DRdjXL7T.js');
+var Overlay = require('../../Overlay_cjs_2az7kviY.js');
+var Loader = require('../../Loader_cjs_BHMB4c8f.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -27,8 +27,8 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
-require('../../Text_cjs_Co2XdYF-.js');
+require('../../Link_cjs_CmBw4h-N.js');
+require('../../Text_cjs_BJ9NgJkx.js');
 
 const modalAppearanceShape = {
     circular: {
@@ -137,7 +137,7 @@ const getOrCreateModalElement = (modalIdQuerySelector, className = '') => {
 };
 // Modal component that is an abstraction around the portal API.
 const Modal = React.forwardRef(function Modal(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalIdQuerySelector = 'modal-global', print, scroll = false, stickyHeader = false, closeIcon = true, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalIdQuerySelector = 'modal-global', print, scroll = false, stickyHeader = false, before, after, closeIcon = true, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
     // Query DOM element
     const [modalElement, setModalElement] = React.useState(null);
     const [isOpen, setIsOpen] = React.useState(initialIsOpen);
@@ -194,7 +194,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     }, [isOpen]); // eslint-disable-line
     React.useLayoutEffect(() => {
         let classNameModal = className;
-        if (print === false) {
+        if (!print) {
             classNameModal = clsx(className, 'no-print');
         }
         const element = getOrCreateModalElement(modalIdQuerySelector, classNameModal);
@@ -231,7 +231,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     // @ts-expect-error
     const { styles: modalStyles } = useStyles.useStyles(props);
     return (modalElement &&
-        ReactDOM.createPortal(isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-testid": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [(title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
+        ReactDOM.createPortal(isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-testid": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [before, (title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children }), after] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: handleClickOverlay })] })) : null, 
         // A DOM element

package/dist/cjs/components/ModalSheetBottom.js

@@ -7,7 +7,7 @@ var reactModalSheet = require('react-modal-sheet');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
+var Icon = require('../../Icon_cjs_DRdjXL7T.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -24,16 +24,14 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
-require('../../Text_cjs_Co2XdYF-.js');
+require('../../Link_cjs_CmBw4h-N.js');
+require('../../Text_cjs_BJ9NgJkx.js');
 
 const modalSheetBottomAppearanceSize = {
     sizeL: {
-        size: 'l',
         titleTextSize: 'h4',
     },
     sizeM: {
-        size: 'm',
         titleTextSize: 'h5',
     },
 };
@@ -55,7 +53,6 @@ const ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
         setIsOpen(false);
         onCloseModalSheetBottom && onCloseModalSheetBottom();
     }, [onCloseModalSheetBottom]);
-    // Save ref things
     React.useImperativeHandle(ref, () => ({
         openModal: openModalSheetBottom,
         closeModal: closeModalSheetBottom,
@@ -66,7 +63,7 @@ const ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
     const { titleTextColor, titleTextColorHover, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWidth, titleTextWrap, zeroPadding, } = propsGenerator;
     // @ts-expect-error
     const { styles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs(reactModalSheet.Sheet, { className: "modal-sheet-bottom", "data-testid": dataTestId, "data-tour": dataTour, isOpen: isOpen, onClose: closeModalSheetBottom, ...props, children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "modal-sheet-bottom__header", children: closeButton && (jsxRuntime.jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })) }), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: "modal-sheet-bottom__content", children: jsxRuntime.jsxs("div", { className: clsx('modal-sheet-bottom__content-wrapper', zeroPadding && 'modal-sheet-bottom__content-reset-padding'), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), children] }) })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] }));
+    return (jsxRuntime.jsxs(reactModalSheet.Sheet, { ...props, className: "modal-sheet-bottom", "data-testid": dataTestId, "data-tour": dataTour, isOpen: isOpen, onClose: closeModalSheetBottom, children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "modal-sheet-bottom__header", children: closeButton && (jsxRuntime.jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })) }), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: "modal-sheet-bottom__content", children: jsxRuntime.jsxs("div", { className: clsx('modal-sheet-bottom__content-wrapper', zeroPadding && 'modal-sheet-bottom__content-reset-padding'), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), children] }) })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] }));
 });
 
 exports.ModalSheetBottom = ModalSheetBottom;

package/dist/cjs/components/Notification.js

@@ -2,13 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var Loader = require('../../Loader_cjs_CP1xKwb-.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Button = require('../../Button_cjs_BLuRWxbc.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Button = require('../../Button_cjs_Dvh0E0zz.js');
+var Icon = require('../../Icon_cjs_DRdjXL7T.js');
+var Loader = require('../../Loader_cjs_BHMB4c8f.js');
+var Text = require('../../Text_cjs_BJ9NgJkx.js');
 var _default = require('@itcase/icons/default');
 var Notifications = require('../context/Notifications.js');
 require('../context/UIContext.js');
@@ -24,7 +24,7 @@ require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
-require('../../Link_cjs_DqNtNI23.js');
+require('../../Link_cjs_CmBw4h-N.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
@@ -32,7 +32,7 @@ require('../context/UrlAssetPrefix.js');
 const notificationAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
+        fillHover: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
@@ -47,7 +47,7 @@ const notificationAppearanceDefault = {
 const notificationAppearanceError = {
     errorPrimary: {
         fill: 'errorPrimary',
-        fillHover: 'errorPrimaryHover',
+        fillHover: 'errorPrimary',
         titleTextColor: 'errorTextPrimary',
         descTextColor: 'errorTextPrimary',
         borderColor: 'errorBorderPrimary',
@@ -62,7 +62,7 @@ const notificationAppearanceError = {
 const notificationAppearanceInfo = {
     infoPrimary: {
         fill: 'infoPrimary',
-        fillHover: 'infoPrimaryHover',
+        fillHover: 'infoPrimary',
         titleTextColor: 'infoTextPrimary',
         descTextColor: 'infoTextPrimary',
         borderColor: 'infoBorderPrimary',
@@ -104,17 +104,15 @@ const notificationAppearanceSize = {
         size: 'm',
         titleTextSize: 'xxl',
         descTextSize: 'm',
-        iconSize: 24,
         loaderAppearanceSize: 'sizeS',
-        closeIconAppearanceSize: 'size_24_24',
+        closeIconAppearanceSize: 'size24_24',
     },
     sizeS: {
         size: 'm',
         titleTextSize: 'xl',
         descTextSize: 'm',
-        iconSize: 24,
         loaderAppearanceSize: 'sizeS',
-        closeIconAppearanceSize: 'size_24_24',
+        closeIconAppearanceSize: 'size24_24',
     },
 };
 
@@ -135,7 +133,7 @@ const notificationAppearanceStyle = {
 const notificationAppearanceSuccess = {
     successPrimary: {
         fill: 'successPrimary',
-        fillHover: 'successPrimaryHover',
+        fillHover: 'successPrimary',
         titleTextColor: 'successTextPrimary',
         descTextColor: 'successTextPrimary',
         borderColor: 'successBorderPrimary',
@@ -150,7 +148,7 @@ const notificationAppearanceSuccess = {
 const notificationAppearanceWarning = {
     warningPrimary: {
         fill: 'warningPrimary',
-        fillHover: 'warningPrimaryHover',
+        fillHover: 'warningPrimary',
         titleTextColor: 'warningTextPrimary',
         descTextColor: 'warningTextPrimary',
         borderColor: 'surfaceBorderPrimary',
@@ -183,7 +181,7 @@ function Notification(props) {
     const { id, appearance, className, dataTestId, dataTour, type = 'float', title, text, 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 = 'hug', shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, closeIconAppearanceSize, closeIconSrc, } = propsGenerator;
+    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'dot', 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', `notification__item_${type}`, 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-testid": 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] }));

package/dist/cjs/components/Overlay.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Overlay = require('../../Overlay_cjs_-hY4qbRG.js');
+var Overlay = require('../../Overlay_cjs_2az7kviY.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');

package/dist/cjs/components/Pagination.js

@@ -8,9 +8,9 @@ var ReactPaginate = require('react-paginate');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var DropdownItem = require('../../DropdownItem_cjs_DUtEvTHI.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var DropdownItem = require('../../DropdownItem_cjs_Aun30hgm.js');
+var Icon = require('../../Icon_cjs_DRdjXL7T.js');
+var Text = require('../../Text_cjs_BJ9NgJkx.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -25,20 +25,16 @@ require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
-require('../../Divider_cjs_1fwsCxEb.js');
+require('../../Divider_cjs_DmIeh3Jq.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
+require('../../Link_cjs_CmBw4h-N.js');
 
 const paginationAppearanceAccent = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-    },
     accentPrimary: {
         fill: 'accentPrimary',
-        fillActive: 'accentQuaternary',
+        fillActive: 'accentActiveQuaternary',
         fillInput: 'surfacePrimary',
         borderColor: 'accentBorderPrimary',
         textColor: 'accentTextPrimary',
@@ -46,13 +42,13 @@ const paginationAppearanceAccent = {
         nextIconFillIcon: 'accentItemPrimary',
         pageCountDescTextColor: 'surfaceTextPrimary',
         pageCountDropdownAlignment: 'topCenter',
-        pageCountDropdownElevation: 8,
+        pageCountDropdownElevation: '8',
         pageCountDropdownFill: 'surfacePrimary',
         pageCountDropdownItemDividerFill: 'surfaceSecondary',
         pageCountDropdownItemFill: 'surfacePrimary',
         pageCountDropdownItemFillActive: 'accentPrimary',
-        pageCountDropdownItemFillActiveHover: 'accentActiveHover',
-        pageCountDropdownItemFillHover: 'surfaceSecondary',
+        pageCountDropdownItemFillActiveHover: 'accentActiveHoverPrimary',
+        pageCountDropdownItemFillHover: 'surfaceHoverSecondary',
         pageCountDropdownItemLabelAlign: 'center',
         pageCountDropdownItemLabelColor: 'surfaceTextPrimary',
         pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
@@ -64,7 +60,7 @@ const paginationAppearanceAccent = {
     },
     accentSecondary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillHover: 'accentHoverPrimary',
         labelTextColor: 'accentTextSecondary',
         labelTextColorHover: 'accentTextSecondary',
         borderColor: 'accentBorderPrimary',
@@ -112,11 +108,7 @@ const paginationAppearanceSize = {
         size: 'l',
         labelTextSize: 'l',
         textSize: 'l',
-        builderIcon: _default.icons24.General.Dot,
-        iconAfterFillSize: '24',
-        iconAfterSize: '24',
-        iconBeforeFillSize: '24',
-        iconBeforeSize: '24',
+        builderIcon: _default.icons24.General.DotMedium,
         nextIcon: _default.icons24.Arrow.ChevronRightSmall,
         pageCountDescTextSize: 'l',
         pageCountDropdownItemDividerSize: 'xxs',
@@ -132,11 +124,7 @@ const paginationAppearanceSize = {
         size: 'm',
         labelTextSize: 'm',
         textSize: 'm',
-        builderIcon: _default.icons24.General.Dot,
-        iconAfterFillSize: '24',
-        iconAfterSize: '24',
-        iconBeforeFillSize: '24',
-        iconBeforeSize: '24',
+        builderIcon: _default.icons24.General.DotMedium,
         nextIcon: _default.icons24.Arrow.ChevronRightSmall,
         pageCountDescTextSize: 'm',
         pageCountDropdownItemDividerSize: 'xxs',
@@ -151,11 +139,7 @@ const paginationAppearanceSize = {
         size: 's',
         labelTextSize: 's',
         textSize: 's',
-        builderIcon: _default.icons24.General.Dot,
-        iconAfterFillSize: '20',
-        iconAfterSize: '20',
-        iconBeforeFillSize: '20',
-        iconBeforeSize: '20',
+        builderIcon: _default.icons24.General.DotMedium,
         nextIcon: _default.icons16.Arrow.ChevronRightSmall,
         pageCountDescTextSize: 's',
         pageCountDropdownItemDividerSize: 'xxs',
@@ -169,10 +153,7 @@ const paginationAppearanceSize = {
         size: 'xs',
         labelTextSize: 'xs',
         textSize: 'xs',
-        beforeSize: '16',
-        // TODO: replace builderIcon: icons24.General.Dot with an builderIcon: icons14.General.Dot,
-        builderIcon: _default.icons24.General.Dot,
-        iconAfterFillSize: '16',
+        builderIcon: _default.icons14.General.DotMedium,
         nextIcon: _default.icons14.Arrow.ChevronRightSmall,
         pageCountDescTextSize: 'xs',
         pageCountDropdownItemDividerSize: 'xxs',
@@ -201,27 +182,27 @@ const paginationAppearanceStyle = {
 const paginationAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfaceTertiary',
         fillActive: 'accentPrimary',
-        fillActiveHover: 'accentHoverPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'surfaceHoverTertiary',
         fillInput: 'surfacePrimary',
-        fillInputHover: 'surfaceTertiary',
+        fillInputHover: 'surfaceHoverTertiary',
         textColor: 'surfaceTextPrimary',
-        textColorHover: 'surfaceTextPrimary',
         textColorActive: 'accentTextPrimary',
         textColorActiveHover: 'accentTextPrimary',
+        textColorHover: 'surfaceTextPrimary',
         builderIconFillIcon: 'surfaceItemPrimary',
         nextIconFillIcon: 'surfaceItemPrimary',
         pageCountDescTextColor: 'surfaceTextPrimary',
         pageCountDropdownAlignment: 'topCenter',
-        pageCountDropdownElevation: 8,
+        pageCountDropdownElevation: '8',
         pageCountDropdownFill: 'surfacePrimary',
-        pageCountDropdownFillHover: 'surfaceTertiary',
+        pageCountDropdownFillHover: 'surfaceHoverTertiary',
         pageCountDropdownItemDividerFill: 'surfaceSecondary',
         pageCountDropdownItemFill: 'surfacePrimary',
         pageCountDropdownItemFillActive: 'accentPrimary',
-        pageCountDropdownItemFillActiveHover: 'accentActiveHover',
-        pageCountDropdownItemFillHover: 'surfaceSecondary',
+        pageCountDropdownItemFillActiveHover: 'accentPrimary',
+        pageCountDropdownItemFillHover: 'surfaceHoverSecondary',
         pageCountDropdownItemLabelAlign: 'center',
         pageCountDropdownItemLabelColor: 'surfaceTextPrimary',
         pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
@@ -248,15 +229,7 @@ const paginationConfig = {
     },
 };
 function Pagination(props) {
-    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
-     */
-    onPageChange, 
-    /**
-     * @deprecated The method should not be used
-     */
-    onPerPageCountChange, } = props;
+    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, onPageChange, onPerPageCountChange, } = props;
     const _onChangePage = React.useMemo(() => {
         if (onPageChange) {
             console.warn('@itcase/ui Pagination warning: "onPageChange" is deprecated, use "onChangePage" instead.');
@@ -278,7 +251,6 @@ function Pagination(props) {
             ? pageCountList?.reverse()
             : pageCountList;
     }, [isPageCountDropdownReversed, pageCountList]);
-    // Toggle command menu
     const onClickCommandMenuButton = React.useCallback(() => {
         setIsOpenDropdown((state) => !state);
     }, []);
@@ -288,18 +260,14 @@ function Pagination(props) {
         setActiveDropdownItem(item);
         setIsOpenDropdown(false);
     }, [_onChangePerPageCount]);
-    // Calculate count of pages for all items
     const paginationPagesCount = React.useMemo(() => {
         if (allItemsCount && allItemsCount > 0) {
-            // Round up. "perPageCount" may be is a query params "limit"
             return ceil(allItemsCount / perPageCount);
         }
         return 0;
     }, [allItemsCount, perPageCount]);
-    // Index for pagination state
     const paginationPageIndex = React.useMemo(() => {
-        const intPageNumber = parseInt(pageNumber);
-        // For pagination need index of page, not number
+        const intPageNumber = pageNumber;
         if (!isNaN(intPageNumber) && intPageNumber > 1) {
             return intPageNumber - 1;
         }
@@ -308,19 +276,15 @@ function Pagination(props) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, paginationConfig, isDisabled);
     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;
+    //@ts-expect-error
     const { styles: paginationStyles } = useStyles.useStyles(props);
     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-testid": 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 &&
-                    `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", 
-                // pages settings
-                forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), 
-                // 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 &&
+                    `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), 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, 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 &&