@itcase/ui 1.2.23 → 1.2.24

package/dist/{Button-BLcVDStV.js → Button-AKN9f9n0.js}

@@ -3,7 +3,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { I as Icon } from './Icon-DQWyj5EO.js';
+import { I as Icon } from './Icon-Du1Nyea-.js';
 import { a as LinkWrapper } from './Link-CeQuavin.js';
 import { L as Loader } from './Loader-CJ8ZCdwy.js';
 import { T as Text } from './Text-CG3xPG27.js';

package/dist/{Button-DawNa85U.js → Button-Bf9kDDqK.js}

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Icon = require('./Icon-BeHO7N79.js');
+var Icon = require('./Icon-B1V8M_j9.js');
 var Link = require('./Link-CqWzwh8V.js');
 var Loader = require('./Loader-fA11tUEJ.js');
 var Text = require('./Text-_YhyTsQ1.js');

package/dist/{Icon-BeHO7N79.js → Icon-B1V8M_j9.js}

@@ -45,7 +45,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
         }
         return null;
     }, [SvgImage, width, height, imageSrc]);
-    var cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'cursor_',
         propsKey: 'cursor',
     });
@@ -107,7 +107,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
     });
     // @ts-expect-error
     var iconStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx(link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [before, ImageComponent, after, Badge, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }) }));
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
 });
 var removeFillStroke = function (code) {
     return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');

package/dist/{Icon-DQWyj5EO.js → Icon-Du1Nyea-.js}

@@ -43,7 +43,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
         }
         return null;
     }, [SvgImage, width, height, imageSrc]);
-    var cursorClass = useDeviceTargetClass(props, {
+    useDeviceTargetClass(props, {
         prefix: 'cursor_',
         propsKey: 'cursor',
     });
@@ -105,7 +105,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
     });
     // @ts-expect-error
     var iconStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: jsxs(LinkWrapper, { className: clsx(link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [before, ImageComponent, after, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }) }));
+    return (jsxs("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
 });
 var removeFillStroke = function (code) {
     return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');

package/dist/cjs/components/Accordion.js

@@ -8,7 +8,7 @@ var castArray = require('lodash/castArray');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 var Divider = require('../../Divider-BjB5MD6u.js');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/camelCase');
 require('../context/UIContext.js');

package/dist/cjs/components/Avatar.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 var Image = require('../../Image-DrUlRMHa.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');

package/dist/cjs/components/Breadcrumbs.js

@@ -7,7 +7,7 @@ var clsx = require('clsx');
 var camelCase = require('lodash/camelCase');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 var Link = require('../../Link-CqWzwh8V.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');

package/dist/cjs/components/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button-DawNa85U.js');
+var Button = require('../../Button-Bf9kDDqK.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -15,7 +15,7 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-BeHO7N79.js');
+require('../../Icon-B1V8M_j9.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');

package/dist/cjs/components/Cell.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 var Label = require('../../Label-B0O9q0E4.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('react');

package/dist/cjs/components/Choice.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 var Loader = require('../../Loader-fA11tUEJ.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');

package/dist/cjs/components/ContextMenu.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var Divider = require('../../Divider-BjB5MD6u.js');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('react');
 require('lodash/castArray');

package/dist/cjs/components/CookiesWarning.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var Cookies = require('js-cookie');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Button = require('../../Button-DawNa85U.js');
+var Button = require('../../Button-Bf9kDDqK.js');
 var Group = require('../../Group-B2oTJg0t.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
@@ -18,7 +18,7 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-BeHO7N79.js');
+require('../../Icon-B1V8M_j9.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');

package/dist/cjs/components/DatePicker.js

@@ -7,8 +7,8 @@ var clsx = require('clsx');
 var DatePicker = require('react-datepicker');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Button = require('../../Button-DawNa85U.js');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Button = require('../../Button-Bf9kDDqK.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 var Input = require('../../Input-BSpFMsrf.js');
 var Label = require('../../Label-B0O9q0E4.js');
 var Text = require('../../Text-_YhyTsQ1.js');

package/dist/cjs/components/Icon.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/InputPassword.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');

package/dist/cjs/components/LanguageSelector.js

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 require('react');
 require('react-inlinesvg');
 require('../hooks/useDeviceTargetClass.js');

package/dist/cjs/components/Pagination.js

@@ -7,7 +7,7 @@ var ceil = require('lodash/ceil');
 var ReactPaginate = require('react-paginate');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var DropdownItem = require('../../DropdownItem-D52wxY6I.js');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -26,8 +26,14 @@ require('react-inlinesvg');
 require('../../Tooltip-xGmgUzGr.js');
 require('../../Title-zwP6c2U2.js');
 
+var paginationConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        paginationConfig.appearance = newComponent;
+    },
+};
 function Pagination(props) {
-    var isPageCount = props.isPageCount, _a = props.isPageCountDropdownReversed, isPageCountDropdownReversed = _a === void 0 ? false : _a, _b = props.allItemsCount, allItemsCount = _b === void 0 ? 0 : _b, className = props.className, marginPagesDisplayed = props.marginPagesDisplayed, nextLabel = props.nextLabel, _c = props.pageCountArray, pageCountArray = _c === void 0 ? [10, 20, 50, 100] : _c, pageCountDesc = props.pageCountDesc, pageCountDescTextColor = props.pageCountDescTextColor, pageCountDescTextSize = props.pageCountDescTextSize, pageCountDropdownAlignment = props.pageCountDropdownAlignment, pageCountDropdownElevation = props.pageCountDropdownElevation, pageCountDropdownFill = props.pageCountDropdownFill, pageCountDropdownItemDividerDirection = props.pageCountDropdownItemDividerDirection, pageCountDropdownItemDividerFill = props.pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize = props.pageCountDropdownItemDividerSize, pageCountDropdownItemFill = props.pageCountDropdownItemFill, pageCountDropdownItemFillActive = props.pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover = props.pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover = props.pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign = props.pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor = props.pageCountDropdownItemLabelColor, _d = props.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActive = _d === void 0 ? '' : _d, pageCountDropdownItemLabelSize = props.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = props.pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider = props.pageCountDropdownItemShowDivider, pageCountDropdownItemSize = props.pageCountDropdownItemSize, pageCountDropdownItemWidth = props.pageCountDropdownItemWidth, pageCountDropdownSet = props.pageCountDropdownSet, pageCountDropdownShape = props.pageCountDropdownShape, pageCountInputIcon = props.pageCountInputIcon, pageCountInputIconColor = props.pageCountInputIconColor, pageCountInputIconFillSize = props.pageCountInputIconFillSize, pageCountInputTextColor = props.pageCountInputTextColor, pageCountInputTextSize = props.pageCountInputTextSize, _e = props.pageNumber, pageNumber = _e === void 0 ? 0 : _e, pageRangeDisplayed = props.pageRangeDisplayed, _f = props.perPageCount, perPageCount = _f === void 0 ? 0 : _f, previousLabel = props.previousLabel, onChangePage = props.onChangePage, onChangePerPageCount = props.onChangePerPageCount, 
+    var isPageCount = props.isPageCount, _a = props.isPageCountDropdownReversed, isPageCountDropdownReversed = _a === void 0 ? false : _a, _b = props.allItemsCount, allItemsCount = _b === void 0 ? 0 : _b, appearance = props.appearance, className = props.className, marginPagesDisplayed = props.marginPagesDisplayed, nextLabel = props.nextLabel, _c = props.pageCountArray, pageCountArray = _c === void 0 ? [10, 20, 50, 100] : _c, pageCountDesc = props.pageCountDesc, pageCountDescTextColor = props.pageCountDescTextColor, pageCountDescTextSize = props.pageCountDescTextSize, pageCountDropdownAlignment = props.pageCountDropdownAlignment, pageCountDropdownElevation = props.pageCountDropdownElevation, pageCountDropdownFill = props.pageCountDropdownFill, pageCountDropdownItemDividerDirection = props.pageCountDropdownItemDividerDirection, pageCountDropdownItemDividerFill = props.pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize = props.pageCountDropdownItemDividerSize, pageCountDropdownItemFill = props.pageCountDropdownItemFill, pageCountDropdownItemFillActive = props.pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover = props.pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover = props.pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign = props.pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor = props.pageCountDropdownItemLabelColor, _d = props.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActive = _d === void 0 ? '' : _d, pageCountDropdownItemLabelSize = props.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = props.pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider = props.pageCountDropdownItemShowDivider, pageCountDropdownItemSize = props.pageCountDropdownItemSize, pageCountDropdownItemWidth = props.pageCountDropdownItemWidth, pageCountDropdownSet = props.pageCountDropdownSet, pageCountDropdownShape = props.pageCountDropdownShape, pageCountInputIcon = props.pageCountInputIcon, pageCountInputIconColor = props.pageCountInputIconColor, pageCountInputIconFillSize = props.pageCountInputIconFillSize, pageCountInputTextColor = props.pageCountInputTextColor, pageCountInputTextSize = props.pageCountInputTextSize, _e = props.pageNumber, pageNumber = _e === void 0 ? 0 : _e, pageRangeDisplayed = props.pageRangeDisplayed, _f = props.perPageCount, perPageCount = _f === void 0 ? 0 : _f, previousLabel = props.previousLabel, onChangePage = props.onChangePage, onChangePerPageCount = props.onChangePerPageCount, 
     /**
      * @deprecated The method should not be used
      */
@@ -98,19 +104,46 @@ function Pagination(props) {
         }
         return 0;
     }, [pageNumber]);
-    return (jsxRuntime.jsxs("div", { className: "pagination", children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: "pagination__item_state_active cursor_type_default", breakClassName: "pagination__item pagination__item_break", disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", marginPagesDisplayed: marginPagesDisplayed, nextClassName: "pagination__item pagination__item_next", pageCount: paginationPagesCount, pageLinkClassName: "pagination__item-link", pageRangeDisplayed: pageRangeDisplayed, previousClassName: "pagination__item pagination__item_previous", activeLinkClassName: "pagination__item-link_state_active", 
-                // previous button
-                previousLabel: previousLabel, breakLinkClassName: "pagination__item-link", 
-                // pages settings
-                forcePage: paginationPageIndex, containerClassName: clsx(className, 'pagination__container', justifyContentClass), 
-                // page item
-                pageClassName: "pagination__item", nextLinkClassName: "pagination__item-link", 
+    var appearanceConfig = appearance && paginationConfig.appearance && paginationConfig.appearance[appearance];
+    return (jsxRuntime.jsxs("div", { className: "pagination", children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: "pagination__item_state_active cursor_type_default", activeLinkClassName: "pagination__item-link_state_active", breakClassName: "pagination__item pagination__item_break", 
                 // break element
-                breakLabel: "...", previousLinkClassName: "pagination__item-link", 
+                breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", 
+                // pages settings
+                forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.marginPagesDisplayed), nextClassName: "pagination__item pagination__item_next", 
                 // next button
-                nextLabel: nextLabel, onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count', gapClass), children: [jsxRuntime.jsx(Text.Text, { size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass, fillHoverClass), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { fill: pageCountDropdownFill, alignment: pageCountDropdownAlignment, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, isOpen: isOpenDropdown, set: pageCountDropdownSet, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
-                                    return activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, labelTextColor: pageCountDropdownItemLabelColor, labelTextSize: pageCountDropdownItemLabelSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize, showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, isActive: true, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item)) : (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, labelTextColor: pageCountDropdownItemLabelColor, labelTextSize: pageCountDropdownItemLabelSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize, showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, isActive: false, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item));
+                nextLabel: nextLabel, nextLinkClassName: "pagination__item-link", 
+                // page item
+                pageClassName: "pagination__item", pageCount: paginationPagesCount, pageLinkClassName: "pagination__item-link", pageRangeDisplayed: pageRangeDisplayed || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageRangeDisplayed), previousClassName: "pagination__item pagination__item_previous", 
+                // previous button
+                previousLabel: previousLabel, previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count', gapClass ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.gap) &&
+                        "gap_".concat(appearanceConfig.gap).replace(/([A-Z])/g, '-$1').toLowerCase())), children: [jsxRuntime.jsx(Text.Text, { size: pageCountDescTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDescTextSize), textColor: pageCountDescTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDescTextColor), children: pageCountDesc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDesc) }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                                "fill_hover_".concat(appearanceConfig.fillHover)
+                                    .replace(/([A-Z])/g, '-$1')
+                                    .toLowerCase())), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputTextSize), textColor: pageCountInputTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputTextColor), children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputIconFillSize), iconFill: pageCountInputIconColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputIconColor), SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { fill: pageCountDropdownFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownFill), alignment: pageCountDropdownAlignment || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownAlignment), elevation: pageCountDropdownElevation || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownElevation), shape: pageCountDropdownShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownShape), isOpen: isOpenDropdown, set: pageCountDropdownSet || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownSet), setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
+                                    return activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemWidth), labelTextColor: pageCountDropdownItemLabelColor ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColor), labelTextSize: pageCountDropdownItemLabelSize ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelSize), fill: pageCountDropdownItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFill), fillHover: pageCountDropdownItemFillHover ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillHover), dividerDirection: pageCountDropdownItemDividerDirection, label: item.toString(), labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemSize), dividerFill: pageCountDropdownItemDividerFill ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemDividerFill), dividerSize: pageCountDropdownItemDividerSize ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemDividerSize), fillActive: pageCountDropdownItemFillActive ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillActive), fillActiveHover: pageCountDropdownItemFillActiveHover ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillActiveHover), labelTextAlign: pageCountDropdownItemLabelAlign ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelAlign), labelTextColorActive: pageCountDropdownItemLabelColorActive ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColorActive), showDivider: index < pageCountArray.length - 1 &&
+                                            (pageCountDropdownItemShowDivider ||
+                                                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemShowDivider)), isActive: true, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item)) : (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemWidth), labelTextColor: pageCountDropdownItemLabelColor ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColor), labelTextSize: pageCountDropdownItemLabelSize ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelSize), fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillHover), dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, label: item.toString(), labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemSize), dividerSize: pageCountDropdownItemDividerSize ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemDividerSize), labelTextAlign: pageCountDropdownItemLabelAlign ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelAlign), labelTextColorActive: pageCountDropdownItemLabelColorActive ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColorActive), showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, isActive: false, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item));
                                 }) })] })] }))] }));
 }
 
 exports.Pagination = Pagination;
+exports.paginationConfig = paginationConfig;

package/dist/cjs/components/Response.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Button = require('../../Button-DawNa85U.js');
+var Button = require('../../Button-Bf9kDDqK.js');
 var Group = require('../../Group-B2oTJg0t.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 var Title = require('../../Title-zwP6c2U2.js');
@@ -19,7 +19,7 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-BeHO7N79.js');
+require('../../Icon-B1V8M_j9.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('../../Tooltip-xGmgUzGr.js');

package/dist/cjs/components/Search.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 var Scrollbar = require('../../Scrollbar-DVlIZzvz.js');
 require('lodash/castArray');

package/dist/cjs/components/Select.js

@@ -3,7 +3,7 @@
 var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Select = require('react-select');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 var React = require('react');
 var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');

package/dist/cjs/components/SiteMenu.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var UIContext = require('../context/UIContext.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-BeHO7N79.js');
+var Icon = require('../../Icon-B1V8M_j9.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');

package/dist/components/Accordion.js

@@ -6,7 +6,7 @@ import castArray from 'lodash/castArray';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { D as Divider } from '../Divider-U5UdY-ef.js';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/camelCase';
 import '../context/UIContext.js';

package/dist/components/Avatar.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import { I as Image } from '../Image-8t6PvsaZ.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';

package/dist/components/Breadcrumbs.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import camelCase from 'lodash/camelCase';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import { a as LinkWrapper } from '../Link-CeQuavin.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';

package/dist/components/Button.js

@@ -1,4 +1,4 @@
-export { B as Button, b as buttonConfig } from '../Button-BLcVDStV.js';
+export { B as Button, b as buttonConfig } from '../Button-AKN9f9n0.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -13,7 +13,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-DQWyj5EO.js';
+import '../Icon-Du1Nyea-.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';

package/dist/components/Cell.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import { L as Label } from '../Label-D8DRdqad.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'react';

package/dist/components/Choice.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import { L as Loader } from '../Loader-CJ8ZCdwy.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';

package/dist/components/ContextMenu.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { D as Divider } from '../Divider-U5UdY-ef.js';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'react';
 import 'lodash/castArray';

package/dist/components/CookiesWarning.js

@@ -3,7 +3,7 @@ import { useRef, useMemo, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { B as Button } from '../Button-BLcVDStV.js';
+import { B as Button } from '../Button-AKN9f9n0.js';
 import { G as Group } from '../Group-CVUfaHaS.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
@@ -16,7 +16,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-DQWyj5EO.js';
+import '../Icon-Du1Nyea-.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';

package/dist/components/DatePicker.js

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import DatePicker from 'react-datepicker';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Button } from '../Button-BLcVDStV.js';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { B as Button } from '../Button-AKN9f9n0.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import { I as Input } from '../Input-UkM-ag48.js';
 import { L as Label } from '../Label-D8DRdqad.js';
 import { T as Text } from '../Text-CG3xPG27.js';

package/dist/components/Icon.js

@@ -1,4 +1,4 @@
-export { I as Icon, i as iconConfig } from '../Icon-DQWyj5EO.js';
+export { I as Icon, i as iconConfig } from '../Icon-Du1Nyea-.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/InputPassword.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';

package/dist/components/LanguageSelector.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import 'react';
 import 'react-inlinesvg';
 import '../hooks/useDeviceTargetClass.js';

package/dist/components/Pagination.js

@@ -5,7 +5,7 @@ import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { D as Dropdown, a as DropdownItem } from '../DropdownItem-D0dOP4NL.js';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -24,8 +24,14 @@ import 'react-inlinesvg';
 import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 
+var paginationConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        paginationConfig.appearance = newComponent;
+    },
+};
 function Pagination(props) {
-    var isPageCount = props.isPageCount, _a = props.isPageCountDropdownReversed, isPageCountDropdownReversed = _a === void 0 ? false : _a, _b = props.allItemsCount, allItemsCount = _b === void 0 ? 0 : _b, className = props.className, marginPagesDisplayed = props.marginPagesDisplayed, nextLabel = props.nextLabel, _c = props.pageCountArray, pageCountArray = _c === void 0 ? [10, 20, 50, 100] : _c, pageCountDesc = props.pageCountDesc, pageCountDescTextColor = props.pageCountDescTextColor, pageCountDescTextSize = props.pageCountDescTextSize, pageCountDropdownAlignment = props.pageCountDropdownAlignment, pageCountDropdownElevation = props.pageCountDropdownElevation, pageCountDropdownFill = props.pageCountDropdownFill, pageCountDropdownItemDividerDirection = props.pageCountDropdownItemDividerDirection, pageCountDropdownItemDividerFill = props.pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize = props.pageCountDropdownItemDividerSize, pageCountDropdownItemFill = props.pageCountDropdownItemFill, pageCountDropdownItemFillActive = props.pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover = props.pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover = props.pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign = props.pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor = props.pageCountDropdownItemLabelColor, _d = props.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActive = _d === void 0 ? '' : _d, pageCountDropdownItemLabelSize = props.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = props.pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider = props.pageCountDropdownItemShowDivider, pageCountDropdownItemSize = props.pageCountDropdownItemSize, pageCountDropdownItemWidth = props.pageCountDropdownItemWidth, pageCountDropdownSet = props.pageCountDropdownSet, pageCountDropdownShape = props.pageCountDropdownShape, pageCountInputIcon = props.pageCountInputIcon, pageCountInputIconColor = props.pageCountInputIconColor, pageCountInputIconFillSize = props.pageCountInputIconFillSize, pageCountInputTextColor = props.pageCountInputTextColor, pageCountInputTextSize = props.pageCountInputTextSize, _e = props.pageNumber, pageNumber = _e === void 0 ? 0 : _e, pageRangeDisplayed = props.pageRangeDisplayed, _f = props.perPageCount, perPageCount = _f === void 0 ? 0 : _f, previousLabel = props.previousLabel, onChangePage = props.onChangePage, onChangePerPageCount = props.onChangePerPageCount, 
+    var isPageCount = props.isPageCount, _a = props.isPageCountDropdownReversed, isPageCountDropdownReversed = _a === void 0 ? false : _a, _b = props.allItemsCount, allItemsCount = _b === void 0 ? 0 : _b, appearance = props.appearance, className = props.className, marginPagesDisplayed = props.marginPagesDisplayed, nextLabel = props.nextLabel, _c = props.pageCountArray, pageCountArray = _c === void 0 ? [10, 20, 50, 100] : _c, pageCountDesc = props.pageCountDesc, pageCountDescTextColor = props.pageCountDescTextColor, pageCountDescTextSize = props.pageCountDescTextSize, pageCountDropdownAlignment = props.pageCountDropdownAlignment, pageCountDropdownElevation = props.pageCountDropdownElevation, pageCountDropdownFill = props.pageCountDropdownFill, pageCountDropdownItemDividerDirection = props.pageCountDropdownItemDividerDirection, pageCountDropdownItemDividerFill = props.pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize = props.pageCountDropdownItemDividerSize, pageCountDropdownItemFill = props.pageCountDropdownItemFill, pageCountDropdownItemFillActive = props.pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover = props.pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover = props.pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign = props.pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor = props.pageCountDropdownItemLabelColor, _d = props.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActive = _d === void 0 ? '' : _d, pageCountDropdownItemLabelSize = props.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = props.pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider = props.pageCountDropdownItemShowDivider, pageCountDropdownItemSize = props.pageCountDropdownItemSize, pageCountDropdownItemWidth = props.pageCountDropdownItemWidth, pageCountDropdownSet = props.pageCountDropdownSet, pageCountDropdownShape = props.pageCountDropdownShape, pageCountInputIcon = props.pageCountInputIcon, pageCountInputIconColor = props.pageCountInputIconColor, pageCountInputIconFillSize = props.pageCountInputIconFillSize, pageCountInputTextColor = props.pageCountInputTextColor, pageCountInputTextSize = props.pageCountInputTextSize, _e = props.pageNumber, pageNumber = _e === void 0 ? 0 : _e, pageRangeDisplayed = props.pageRangeDisplayed, _f = props.perPageCount, perPageCount = _f === void 0 ? 0 : _f, previousLabel = props.previousLabel, onChangePage = props.onChangePage, onChangePerPageCount = props.onChangePerPageCount, 
     /**
      * @deprecated The method should not be used
      */
@@ -96,19 +102,45 @@ function Pagination(props) {
         }
         return 0;
     }, [pageNumber]);
-    return (jsxs("div", { className: "pagination", children: [jsx(ReactPaginate, { activeClassName: "pagination__item_state_active cursor_type_default", breakClassName: "pagination__item pagination__item_break", disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", marginPagesDisplayed: marginPagesDisplayed, nextClassName: "pagination__item pagination__item_next", pageCount: paginationPagesCount, pageLinkClassName: "pagination__item-link", pageRangeDisplayed: pageRangeDisplayed, previousClassName: "pagination__item pagination__item_previous", activeLinkClassName: "pagination__item-link_state_active", 
-                // previous button
-                previousLabel: previousLabel, breakLinkClassName: "pagination__item-link", 
-                // pages settings
-                forcePage: paginationPageIndex, containerClassName: clsx(className, 'pagination__container', justifyContentClass), 
-                // page item
-                pageClassName: "pagination__item", nextLinkClassName: "pagination__item-link", 
+    var appearanceConfig = appearance && paginationConfig.appearance && paginationConfig.appearance[appearance];
+    return (jsxs("div", { className: "pagination", children: [jsx(ReactPaginate, { activeClassName: "pagination__item_state_active cursor_type_default", activeLinkClassName: "pagination__item-link_state_active", breakClassName: "pagination__item pagination__item_break", 
                 // break element
-                breakLabel: "...", previousLinkClassName: "pagination__item-link", 
+                breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", 
+                // pages settings
+                forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.marginPagesDisplayed), nextClassName: "pagination__item pagination__item_next", 
                 // next button
-                nextLabel: nextLabel, onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count', gapClass), children: [jsx(Text, { size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass, fillHoverClass), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, SvgImage: pageCountInputIcon }), jsx(Dropdown, { fill: pageCountDropdownFill, alignment: pageCountDropdownAlignment, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, isOpen: isOpenDropdown, set: pageCountDropdownSet, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
-                                    return activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, labelTextColor: pageCountDropdownItemLabelColor, labelTextSize: pageCountDropdownItemLabelSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize, showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, isActive: true, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth, labelTextColor: pageCountDropdownItemLabelColor, labelTextSize: pageCountDropdownItemLabelSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize, showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, isActive: false, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item));
+                nextLabel: nextLabel, nextLinkClassName: "pagination__item-link", 
+                // page item
+                pageClassName: "pagination__item", pageCount: paginationPagesCount, pageLinkClassName: "pagination__item-link", pageRangeDisplayed: pageRangeDisplayed || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageRangeDisplayed), previousClassName: "pagination__item pagination__item_previous", 
+                // previous button
+                previousLabel: previousLabel, previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count', gapClass ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.gap) &&
+                        "gap_".concat(appearanceConfig.gap).replace(/([A-Z])/g, '-$1').toLowerCase())), children: [jsx(Text, { size: pageCountDescTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDescTextSize), textColor: pageCountDescTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDescTextColor), children: pageCountDesc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDesc) }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                                "fill_hover_".concat(appearanceConfig.fillHover)
+                                    .replace(/([A-Z])/g, '-$1')
+                                    .toLowerCase())), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputTextSize), textColor: pageCountInputTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputTextColor), children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputIconFillSize), iconFill: pageCountInputIconColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputIconColor), SvgImage: pageCountInputIcon }), jsx(Dropdown, { fill: pageCountDropdownFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownFill), alignment: pageCountDropdownAlignment || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownAlignment), elevation: pageCountDropdownElevation || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownElevation), shape: pageCountDropdownShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownShape), isOpen: isOpenDropdown, set: pageCountDropdownSet || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownSet), setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
+                                    return activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemWidth), labelTextColor: pageCountDropdownItemLabelColor ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColor), labelTextSize: pageCountDropdownItemLabelSize ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelSize), fill: pageCountDropdownItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFill), fillHover: pageCountDropdownItemFillHover ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillHover), dividerDirection: pageCountDropdownItemDividerDirection, label: item.toString(), labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemSize), dividerFill: pageCountDropdownItemDividerFill ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemDividerFill), dividerSize: pageCountDropdownItemDividerSize ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemDividerSize), fillActive: pageCountDropdownItemFillActive ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillActive), fillActiveHover: pageCountDropdownItemFillActiveHover ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillActiveHover), labelTextAlign: pageCountDropdownItemLabelAlign ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelAlign), labelTextColorActive: pageCountDropdownItemLabelColorActive ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColorActive), showDivider: index < pageCountArray.length - 1 &&
+                                            (pageCountDropdownItemShowDivider ||
+                                                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemShowDivider)), isActive: true, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemWidth), labelTextColor: pageCountDropdownItemLabelColor ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColor), labelTextSize: pageCountDropdownItemLabelSize ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelSize), fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillHover), dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, label: item.toString(), labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemSize), dividerSize: pageCountDropdownItemDividerSize ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemDividerSize), labelTextAlign: pageCountDropdownItemLabelAlign ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelAlign), labelTextColorActive: pageCountDropdownItemLabelColorActive ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColorActive), showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, isActive: false, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item));
                                 }) })] })] }))] }));
 }
 
-export { Pagination };
+export { Pagination, paginationConfig };

package/dist/components/Response.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Button } from '../Button-BLcVDStV.js';
+import { B as Button } from '../Button-AKN9f9n0.js';
 import { G as Group } from '../Group-CVUfaHaS.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import { T as Title } from '../Title-BfSFPJtJ.js';
@@ -17,7 +17,7 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-DQWyj5EO.js';
+import '../Icon-Du1Nyea-.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
 import '../Tooltip-aaDRYNWY.js';

package/dist/components/Search.js

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import { S as Scrollbar } from '../Scrollbar-CrGXCZ_F.js';
 import 'lodash/castArray';

package/dist/components/Select.js

@@ -1,7 +1,7 @@
 import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import React, { useMemo, useRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';

package/dist/components/SiteMenu.js

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { useSiteMenuContext } from '../context/UIContext.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-DQWyj5EO.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';

package/dist/css/components/DatePicker/DatePicker.css

@@ -1111,7 +1111,7 @@ h2.react-datepicker__current-month {
   &__clear-label {
     width: 100%;
   }
-  &__input-icon {
+  &__input-icon.icon {
     background: #fff;
     position: absolute;
     top: 50%;

package/dist/css/components/Icon/Icon.css

@@ -1,4 +1,5 @@
 .icon {
+  position: relative;
   &__item {
     position: relative;
     display: flex;

package/dist/css/mixins/mixin_utils.css

@@ -1,18 +1,25 @@
 @define-mixin font $fontWeight, $minFontSize, $maxFontSize, $minLetterSpacing, $minLineHeight,
   $maxLineHeight, $maxLetterSpacing, $fontFamily {
-  font-size: responsive $minFontSize $maxFontSize;
-  font-range: var(--min-max);
+  font-size: fluid(
+    $minFontSize,
+    $maxFontSize,
+    var(--typography-min-viewport, 360px),
+    var(--typography-max-viewport, 1920px)
+  );
   font-weight: $fontWeight;
+  line-height: fluid(
+    $minLineHeight,
+    $maxLineHeight,
+    var(--typography-min-viewport, 360px),
+    var(--typography-max-viewport, 1920px)
+  );
+  letter-spacing: fluid(
+    $minLetterSpacing,
+    $maxLetterSpacing,
+    var(--typography-min-viewport, 360px),
+    var(--typography-max-viewport, 1920px)
+  );
   font-family: $fontFamily;
-  line-height: responsive $minLineHeight $maxLineHeight;
-  line-height-range: var(--min-max);
-  letter-spacing: responsive $minLetterSpacing $maxLetterSpacing;
-  letter-spacing-range: var(--min-max);
-  @media (--desktop-super-huge) {
-    font-size: $maxFontSize;
-    line-height: $maxLineHeight;
-    letter-spacing: $maxLetterSpacing;
-  }
 }
 
 @define-mixin font-fixed $weight, $size, $line, $family {

package/dist/css/styles/mediaqueries.css

@@ -12,7 +12,7 @@
   --desktop-large: 80em; /* 1280px */
   --desktop-extra-large: 90em; /* 1441px */
   --desktop-super-extra-large: 120em; /* 1920px */
-  --desktop-huge: 160em; /* 560px */
+  --desktop-huge: 160em; /* 2560px */
 }
 
 @custom-media --warning (width <= 15em);

package/dist/css/tokens/typography.css

@@ -1,4 +1,7 @@
 :root {
+  --typography-min-viewport: 360px;
+  --typography-max-viewport: 1920px;
+
   --typography-h1-min: 32px;
   --typography-h1-max: 38px;
   --typography-h1-min-line-height: 64px;

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

@@ -1,3 +1,4 @@
-import { iPaginationProps } from './Pagination.interface';
+import { IPaginationConfig, iPaginationProps } from './Pagination.interface';
+declare const paginationConfig: IPaginationConfig;
 declare function Pagination(props: iPaginationProps): import("react/jsx-runtime").JSX.Element;
-export { Pagination };
+export { Pagination, paginationConfig };

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

@@ -1,45 +1,62 @@
 import { type ReactNode } from 'react';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
 import { alignmentPropsType, elevationPropsType, iconFillSizePropsType, tDirectionProps, tFillHoverProps, tFillProps, tItemColorProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorActiveProps, tTextColorProps, tTextSizeProps, tTextWrapProps } from '../../types';
-interface iPaginationProps extends iStyleAttributes {
-    allItemsCount?: number;
-    className?: string;
+import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
+export interface IPaginationThemeColor {
+    fill?: tFillProps;
+    fillHover?: tFillHoverProps;
+    gap?: string;
     marginPagesDisplayed?: number;
-    nextLabel?: ReactNode;
-    pageCountArray?: number[];
     pageCountDesc?: string;
-    pageCountDropdownItemLabelAlign?: tTextAlignProps;
-    pageCountDropdownItemWidth?: string;
     pageCountDescTextColor?: tTextColorProps;
     pageCountDescTextSize?: tTextSizeProps;
     pageCountDropdownAlignment?: alignmentPropsType;
     pageCountDropdownElevation?: elevationPropsType;
     pageCountDropdownFill?: tFillProps;
-    pageCountDropdownItemDividerDirection?: tDirectionProps;
     pageCountDropdownItemDividerFill?: tFillProps;
     pageCountDropdownItemDividerSize?: tSizeProps;
     pageCountDropdownItemFill?: tFillProps;
     pageCountDropdownItemFillActive?: tFillProps;
     pageCountDropdownItemFillActiveHover?: tFillHoverProps;
     pageCountDropdownItemFillHover?: tFillHoverProps;
+    pageCountDropdownItemLabelAlign?: tTextAlignProps;
     pageCountDropdownItemLabelColor?: tTextColorProps;
     pageCountDropdownItemLabelColorActive?: tTextColorActiveProps;
     pageCountDropdownItemLabelSize?: tTextSizeProps;
-    pageCountDropdownItemLabelWrap?: tTextWrapProps;
-    pageCountDropdownItemSize?: tSizeProps;
     pageCountDropdownItemShowDivider?: boolean;
+    pageCountDropdownItemSize?: tSizeProps;
+    pageCountDropdownItemWidth?: string;
     pageCountDropdownSet?: string;
     pageCountDropdownShape?: tShapeProps;
-    pageCountInputIcon?: ReactNode;
     pageCountInputIconColor?: tItemColorProps;
     pageCountInputIconFillSize?: iconFillSizePropsType;
     pageCountInputTextColor?: tTextColorProps;
     pageCountInputTextSize?: tTextSizeProps;
-    pageNumber: string;
+    pageRangeDisplayed?: number;
+    isPageCount?: boolean;
+}
+type appearanceKeysType = {} & tAppearanceKeysDefault;
+export type paginationAppearanceType = {
+    [key in appearanceKeysType]?: IPaginationThemeColor;
+};
+export interface IPaginationConfig {
+    appearance: paginationAppearanceType | undefined;
+    setAppearance: (newComponent: paginationAppearanceType) => void;
+}
+interface iPaginationProps extends IPaginationThemeColor, iStyleAttributes {
+    allItemsCount?: number;
+    appearance?: appearanceKeysType;
+    className?: string;
+    marginPagesDisplayed?: number;
+    nextLabel?: ReactNode;
+    pageCountArray?: number[];
+    pageCountDropdownItemDividerDirection?: tDirectionProps;
+    pageCountDropdownItemLabelWrap?: tTextWrapProps;
+    pageCountInputIcon?: ReactNode;
+    pageNumber: string | string;
     pageRangeDisplayed?: number;
     perPageCount?: number;
     previousLabel?: ReactNode;
-    isPageCount?: boolean;
     isPageCountDropdownReversed?: boolean;
     onChangePage?: () => void;
     onChangePerPageCount?: (perPageCount: number) => void;

package/dist/types/components/Pagination/index.d.ts

@@ -1 +1 @@
-export { Pagination } from './Pagination';
+export { Pagination, paginationConfig } from './Pagination';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.2.23",
+  "version": "1.2.24",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -113,9 +113,9 @@
     "react-responsive": "^10.0.0",
     "react-scroll": "^1.9.0",
     "react-scrollbars-custom": "^4.1.1",
-    "react-select": "^5.8.2",
+    "react-select": "^5.8.3",
     "swiper": "^11.1.14",
-    "uuid": "^11.0.2"
+    "uuid": "^11.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -126,7 +126,8 @@
     "@chromatic-com/storybook": "^3.2.2",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@itcase/lint": "^1.0.14",
+    "@itcase/lint": "^1.0.16",
+    "@lehoczky/postcss-fluid": "^1.0.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
@@ -164,7 +165,7 @@
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
     "npm": "^10.9.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
@@ -182,12 +183,11 @@
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^13.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^10.0.9",
+    "postcss-preset-env": "^10.1.0",
     "postcss-pxtorem": "^6.1.0",
-    "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.3.3",
-    "rollup": "^4.24.4",
+    "rollup": "^4.25.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",