@itcase/ui 1.2.23 → 1.2.25

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-CkynFJm4.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -23,11 +23,17 @@ require('../../Divider-BjB5MD6u.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react-inlinesvg');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.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,10 +6,10 @@ 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-COsywjkv.js');
 var Group = require('../../Group-B2oTJg0t.js');
 var Text = require('../../Text-_YhyTsQ1.js');
-var Title = require('../../Title-zwP6c2U2.js');
+var Title = require('../../Title-B-N0qkn3.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -19,10 +19,10 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-BeHO7N79.js');
+require('../../Icon-CkynFJm4.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-xGmgUzGr.js');
+require('../../Tooltip-DsTCGS6h.js');
 require('../../Loader-fA11tUEJ.js');
 
 var responseConfig = {

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-CkynFJm4.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 var Scrollbar = require('../../Scrollbar-DVlIZzvz.js');
 require('lodash/castArray');
@@ -20,8 +20,8 @@ require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.js');
 require('react-scrollbars-custom');
 
 var searchInputConfig = {

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-CkynFJm4.js');
 var React = require('react');
 var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');
@@ -23,8 +23,8 @@ require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.js');
 require('lodash/castArray');
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>

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-CkynFJm4.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
@@ -19,8 +19,8 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-xGmgUzGr.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Tooltip-DsTCGS6h.js');
+require('../../Title-B-N0qkn3.js');
 
 function SiteMenu(props) {
     var children = props.children, className = props.className, closeText = props.closeText, closeTextSize = props.closeTextSize, closeTextColor = props.closeTextColor, closeTextColorHover = props.closeTextColorHover, iconCloseBgFill = props.iconCloseBgFill, iconCloseFill = props.iconCloseFill, iconCloseSize = props.iconCloseSize, iconClose = props.iconClose, onClose = props.onClose;

package/dist/cjs/components/Swiper.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var react = require('swiper/react');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Title = require('../../Title-zwP6c2U2.js');
+var Title = require('../../Title-B-N0qkn3.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');

package/dist/cjs/components/Tile.js

@@ -6,7 +6,7 @@ var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 var Badge = require('../../Badge-2JkquAEb.js');
 var Text = require('../../Text-_YhyTsQ1.js');
-var Title = require('../../Title-zwP6c2U2.js');
+var Title = require('../../Title-B-N0qkn3.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');

package/dist/cjs/components/Title.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Title = require('../../Title-zwP6c2U2.js');
+var Title = require('../../Title-B-N0qkn3.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/Tooltip.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Tooltip = require('../../Tooltip-xGmgUzGr.js');
+var Tooltip = require('../../Tooltip-DsTCGS6h.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -16,7 +16,7 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Text-_YhyTsQ1.js');
-require('../../Title-zwP6c2U2.js');
+require('../../Title-B-N0qkn3.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-CliIEdbp.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -18,8 +18,8 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
-import '../Tooltip-aaDRYNWY.js';
-import '../Title-BfSFPJtJ.js';
+import '../Tooltip-B2vv4OAX.js';
+import '../Title-CqwqEtm7.js';
 
 var ChevronDown16 = function ChevronDown16(props) {
   return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {

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-CliIEdbp.js';
 import { I as Image } from '../Image-8t6PvsaZ.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
@@ -18,8 +18,8 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-aaDRYNWY.js';
-import '../Title-BfSFPJtJ.js';
+import '../Tooltip-B2vv4OAX.js';
+import '../Title-CqwqEtm7.js';
 
 function Avatar(props) {
     var className = props.className, Dot = props.Dot, icon = props.icon, _a = props.size, size = _a === void 0 ? '96' : _a, after = props.after, before = props.before, src = props.src, type = props.type, mode = props.mode, onClick = props.onClick, _b = props.textSize, textSize = _b === void 0 ? 'l' : _b, _c = props.textColor, textColor = _c === void 0 ? 'surfaceTextTertiary' : _c, _d = props.textWeight, textWeight = _d === void 0 ? '600' : _d, iconSrc = props.iconSrc, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, _e = props.firstName, firstName = _e === void 0 ? '' : _e, _f = props.secondName, secondName = _f === void 0 ? '' : _f;

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-CliIEdbp.js';
 import { a as LinkWrapper } from '../Link-CeQuavin.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
@@ -17,8 +17,8 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Tooltip-aaDRYNWY.js';
-import '../Title-BfSFPJtJ.js';
+import '../Tooltip-B2vv4OAX.js';
+import '../Title-CqwqEtm7.js';
 
 function BreadcrumbsItem(props) {
     var children = props.children, className = props.className, cursor = props.cursor, _a = props.set, set = _a === void 0 ? 'default' : _a, text = props.text, textSize = props.textSize, textColor = props.textColor, textColorHover = props.textColorHover, href = props.href, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, onClick = props.onClick;

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-C0M-Ap20.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -13,11 +13,11 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-DQWyj5EO.js';
+import '../Icon-CliIEdbp.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-aaDRYNWY.js';
+import '../Tooltip-B2vv4OAX.js';
 import '../Text-CG3xPG27.js';
-import '../Title-BfSFPJtJ.js';
+import '../Title-CqwqEtm7.js';
 import '../Loader-CJ8ZCdwy.js';

package/dist/components/Cell.js

@@ -2,8 +2,8 @@ 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 { L as Label } from '../Label-D8DRdqad.js';
+import { I as Icon } from '../Icon-CliIEdbp.js';
+import { L as Label } from '../Label-ukXod6pv.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'react';
 import 'lodash/castArray';
@@ -18,8 +18,8 @@ import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-aaDRYNWY.js';
-import '../Title-BfSFPJtJ.js';
+import '../Tooltip-B2vv4OAX.js';
+import '../Title-CqwqEtm7.js';
 
 function Cell(props) {
     var isActive = props.isActive, isDisabled = props.isDisabled, isEqual = props.isEqual, after = props.after, before = props.before, className = props.className, mode = props.mode, reverse = props.reverse, set = props.set, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize, titleLabelTextSize = props.titleLabelTextSize, titleTag = props.titleTag, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize, valueLabelTextSize = props.valueLabelTextSize, valueTag = props.valueTag, valueTextAlign = props.valueTextAlign, valueTextColor = props.valueTextColor, valueTextSize = props.valueTextSize, valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;

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-CliIEdbp.js';
 import { L as Loader } from '../Loader-CJ8ZCdwy.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
@@ -18,8 +18,8 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-aaDRYNWY.js';
-import '../Title-BfSFPJtJ.js';
+import '../Tooltip-B2vv4OAX.js';
+import '../Title-CqwqEtm7.js';
 
 var choiceConfig = {
     appearance: {},

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-CliIEdbp.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'react';
 import 'lodash/castArray';
@@ -18,8 +18,8 @@ import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-aaDRYNWY.js';
-import '../Title-BfSFPJtJ.js';
+import '../Tooltip-B2vv4OAX.js';
+import '../Title-CqwqEtm7.js';
 
 function ContextMenu(props) {
     var id = props.id, children = props.children, className = props.className, set = props.set, onClick = props.onClick;

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-C0M-Ap20.js';
 import { G as Group } from '../Group-CVUfaHaS.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
@@ -16,12 +16,12 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-DQWyj5EO.js';
+import '../Icon-CliIEdbp.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-aaDRYNWY.js';
-import '../Title-BfSFPJtJ.js';
+import '../Tooltip-B2vv4OAX.js';
+import '../Title-CqwqEtm7.js';
 import '../Loader-CJ8ZCdwy.js';
 
 function CookiesWarning(props) {

package/dist/components/DatePicker.js

@@ -5,10 +5,10 @@ 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-C0M-Ap20.js';
+import { I as Icon } from '../Icon-CliIEdbp.js';
 import { I as Input } from '../Input-UkM-ag48.js';
-import { L as Label } from '../Label-D8DRdqad.js';
+import { L as Label } from '../Label-ukXod6pv.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -22,8 +22,8 @@ import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../Loader-CJ8ZCdwy.js';
 import 'react-inlinesvg';
-import '../Tooltip-aaDRYNWY.js';
-import '../Title-BfSFPJtJ.js';
+import '../Tooltip-B2vv4OAX.js';
+import '../Title-CqwqEtm7.js';
 
 function buildFormatLongFn(args) {
   return (options = {}) => {

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-CliIEdbp.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -16,6 +16,6 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-aaDRYNWY.js';
+import '../Tooltip-B2vv4OAX.js';
 import '../Text-CG3xPG27.js';
-import '../Title-BfSFPJtJ.js';
+import '../Title-CqwqEtm7.js';

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-CliIEdbp.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -16,9 +16,9 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-aaDRYNWY.js';
+import '../Tooltip-B2vv4OAX.js';
 import '../Text-CG3xPG27.js';
-import '../Title-BfSFPJtJ.js';
+import '../Title-CqwqEtm7.js';
 
 var inputPasswordConfig = {
     appearance: undefined,

package/dist/components/Label.js

@@ -1,4 +1,4 @@
-export { L as Label, l as labelConfig } from '../Label-D8DRdqad.js';
+export { L as Label, l as labelConfig } from '../Label-ukXod6pv.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -14,5 +14,5 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Text-CG3xPG27.js';
-import '../Tooltip-aaDRYNWY.js';
-import '../Title-BfSFPJtJ.js';
+import '../Tooltip-B2vv4OAX.js';
+import '../Title-CqwqEtm7.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-CliIEdbp.js';
 import 'react';
 import 'react-inlinesvg';
 import '../hooks/useDeviceTargetClass.js';
@@ -16,9 +16,9 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-aaDRYNWY.js';
+import '../Tooltip-B2vv4OAX.js';
 import '../Text-CG3xPG27.js';
-import '../Title-BfSFPJtJ.js';
+import '../Title-CqwqEtm7.js';
 
 function LanguageSelectorItem(props) {
     var label = props.label, iconSize = props.iconSize, SvgImage = props.SvgImage, isActive = props.isActive, onClick = props.onClick;

package/dist/components/Notification.js

@@ -1,20 +1,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { useStyles } from '../hooks/useStyles.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { T as Text } from '../Text-CG3xPG27.js';
-import { T as Title } from '../Title-BfSFPJtJ.js';
+import { T as Title } from '../Title-CqwqEtm7.js';
 import { useNotifications, useNotificationsAPI } from '../context/Notifications.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
-import 'lodash/maxBy';
-import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+import 'lodash/castArray';
 import '../tslib.es6-5FtW-kfi.js';
 import 'uuid';
 
@@ -30,18 +30,17 @@ function NotificationItem(props) {
         prefix: 'fill_',
         propsKey: 'fill',
     });
-    var appearanceConfig = appearance &&
-        notificationItemConfig.appearance &&
-        notificationItemConfig.appearance[appearance];
-    return (jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), set && "notification__item_set_".concat(set), size && "notification__item_set_".concat(size), closeButton && 'notification__item_type_close-button', fillClass ||
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var appearanceConfig = appearance && notificationItemConfig.appearance && notificationItemConfig.appearance[appearance];
+    var notificationStyles = useStyles(props).styles;
+    return (jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), set && "notification__item_set_".concat(set), size && "notification__item_set_".concat(size), closeButton && 'notification__item_type_close-button', widthClass, fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())), "data-tour": dataTour, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Title, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor ||
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())), style: notificationStyles, "data-tour": dataTour, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Title, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor ||
                             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor) && appearanceConfig.titleTextColor), children: title })), text && (jsx(Text, { className: "notification__item-text", size: textSize, textColor: textColor || ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) && appearanceConfig.textColor), children: text })), closeButton && (jsx("div", { className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'), onClick: function () { return onClickClose && onClickClose(id); }, children: closeButton }))] }), after] }));
 }
-NotificationItem.defaultProps = {
-    titleTextSize: 'h5',
-    textSize: 's',
-};
 
 function NotificationList(props) {
     var notifications = useNotifications();