@itcase/ui 1.2.32 → 1.2.34

package/dist/{Badge-DBeSKfoF.js → Badge-DBjlLLfX.js}

@@ -107,4 +107,4 @@ Badge.defaultProps = {
     size: 'm',
 };
 
-export { Badge as B, badgeConfig as b };
+export { Badge as B, badgeConfig as a, badgeAppearance as b };

package/dist/{Badge-CHeBPRrf.js → Badge-_xQzAcyN.js}

@@ -110,4 +110,5 @@ Badge.defaultProps = {
 };
 
 exports.Badge = Badge;
+exports.badgeAppearance = badgeAppearance;
 exports.badgeConfig = badgeConfig;

package/dist/cjs/components/Badge.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Badge = require('../../Badge-CHeBPRrf.js');
+var Badge = require('../../Badge-_xQzAcyN.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
@@ -19,4 +19,5 @@ require('../../Text-R6XNq6Ca.js');
 
 
 exports.Badge = Badge.Badge;
+exports.badgeAppearance = Badge.badgeAppearance;
 exports.badgeConfig = Badge.badgeConfig;

package/dist/cjs/components/Pagination.js

@@ -25,14 +25,49 @@ require('react-inlinesvg');
 require('../../Tooltip-BswHy19O.js');
 require('../../Title-DWIc05TX.js');
 
+var paginationAppearance = {
+    default: {
+        gap: '8',
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceSecondary',
+        marginPagesDisplayed: 10,
+        pageCountDesc: 'кол-во строк',
+        pageCountDescTextColor: 'surfaceTextPrimary',
+        pageCountDescTextSize: 'm',
+        pageCountDropdownAlignment: 'topCenter',
+        pageCountDropdownElevation: '8',
+        pageCountDropdownFill: 'surfacePrimary',
+        pageCountDropdownItemDividerFill: 'surfaceSecondary',
+        pageCountDropdownItemDividerSize: 'xxs',
+        pageCountDropdownItemFill: 'surfacePrimary',
+        pageCountDropdownItemFillActive: 'accentPrimary',
+        pageCountDropdownItemFillActiveHover: 'accentActive',
+        pageCountDropdownItemFillHover: 'surfaceSecondary',
+        pageCountDropdownItemLabelAlign: 'center',
+        pageCountDropdownItemLabelColor: 'surfaceTextPrimary',
+        pageCountDropdownItemLabelColorActive: 'surfaceTextInverse',
+        pageCountDropdownItemLabelSize: 'm',
+        pageCountDropdownItemShowDivider: true,
+        pageCountDropdownItemSize: 'l',
+        pageCountDropdownItemWidth: 'hug',
+        pageCountDropdownSet: 'default',
+        pageCountDropdownShape: 'rounded',
+        pageCountInputIconColor: 'surfaceItemPrimary',
+        pageCountInputIconFillSize: '24',
+        pageCountInputTextColor: 'surfaceTextPrimary',
+        pageCountInputTextSize: 'm',
+        pageRangeDisplayed: 8,
+    },
+};
+
 var paginationConfig = {
-    appearance: undefined,
+    appearance: paginationAppearance,
     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, 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, 
+    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, pageCountInputIconSrc = props.pageCountInputIconSrc, 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
      */
@@ -122,7 +157,7 @@ function Pagination(props) {
                             ((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) {
+                                    .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), imageSrc: pageCountInputIconSrc, 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 ||

package/dist/cjs/components/Select.js

@@ -9,7 +9,7 @@ var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var Text = require('../../Text-R6XNq6Ca.js');
-var Badge = require('../../Badge-CHeBPRrf.js');
+var Badge = require('../../Badge-_xQzAcyN.js');
 var Group = require('../../Group-u6YDbMxn.js');
 var Divider = require('../../Divider-BoB-f9Gr.js');
 require('react-inlinesvg');

package/dist/cjs/components/Tab.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 Badge = require('../../Badge-CHeBPRrf.js');
+var Badge = require('../../Badge-_xQzAcyN.js');
 var Divider = require('../../Divider-BoB-f9Gr.js');
 var Link = require('../../Link-CqWzwh8V.js');
 var Text = require('../../Text-R6XNq6Ca.js');

package/dist/cjs/components/Tile.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 Badge = require('../../Badge-CHeBPRrf.js');
+var Badge = require('../../Badge-_xQzAcyN.js');
 var Text = require('../../Text-R6XNq6Ca.js');
 var Title = require('../../Title-DWIc05TX.js');
 require('react');

package/dist/cjs/hooks/useStyles.js

@@ -110,8 +110,7 @@ function useStyles(props) {
       if (value) {
         // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
         const HAS_UNIT = /\D/;
-        // prettier-ignore
-        const ignorePX = styleAttributeKey.includes('zIndex') || styleAttributeKey.includes('order');
+        const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
         if (!HAS_UNIT.test(value) && !ignorePX) {
           value = `${value}px`;
         }

package/dist/components/Badge.js

@@ -1,4 +1,4 @@
-export { B as Badge, b as badgeConfig } from '../Badge-DBeSKfoF.js';
+export { B as Badge, b as badgeAppearance, a as badgeConfig } from '../Badge-DBjlLLfX.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';

package/dist/components/Pagination.js

@@ -23,14 +23,49 @@ import 'react-inlinesvg';
 import '../Tooltip--c-4Qp04.js';
 import '../Title-YVzIwk68.js';
 
+var paginationAppearance = {
+    default: {
+        gap: '8',
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceSecondary',
+        marginPagesDisplayed: 10,
+        pageCountDesc: 'кол-во строк',
+        pageCountDescTextColor: 'surfaceTextPrimary',
+        pageCountDescTextSize: 'm',
+        pageCountDropdownAlignment: 'topCenter',
+        pageCountDropdownElevation: '8',
+        pageCountDropdownFill: 'surfacePrimary',
+        pageCountDropdownItemDividerFill: 'surfaceSecondary',
+        pageCountDropdownItemDividerSize: 'xxs',
+        pageCountDropdownItemFill: 'surfacePrimary',
+        pageCountDropdownItemFillActive: 'accentPrimary',
+        pageCountDropdownItemFillActiveHover: 'accentActive',
+        pageCountDropdownItemFillHover: 'surfaceSecondary',
+        pageCountDropdownItemLabelAlign: 'center',
+        pageCountDropdownItemLabelColor: 'surfaceTextPrimary',
+        pageCountDropdownItemLabelColorActive: 'surfaceTextInverse',
+        pageCountDropdownItemLabelSize: 'm',
+        pageCountDropdownItemShowDivider: true,
+        pageCountDropdownItemSize: 'l',
+        pageCountDropdownItemWidth: 'hug',
+        pageCountDropdownSet: 'default',
+        pageCountDropdownShape: 'rounded',
+        pageCountInputIconColor: 'surfaceItemPrimary',
+        pageCountInputIconFillSize: '24',
+        pageCountInputTextColor: 'surfaceTextPrimary',
+        pageCountInputTextSize: 'm',
+        pageRangeDisplayed: 8,
+    },
+};
+
 var paginationConfig = {
-    appearance: undefined,
+    appearance: paginationAppearance,
     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, 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, 
+    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, pageCountInputIconSrc = props.pageCountInputIconSrc, 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
      */
@@ -120,7 +155,7 @@ function Pagination(props) {
                             ((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) {
+                                    .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), imageSrc: pageCountInputIconSrc, 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 ||

package/dist/components/Select.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { T as Text } from '../Text-C4Bg2Mv6.js';
-import { B as Badge } from '../Badge-DBeSKfoF.js';
+import { B as Badge } from '../Badge-DBjlLLfX.js';
 import { G as Group } from '../Group-BCvs5UxK.js';
 import { D as Divider } from '../Divider-DHIuQUsH.js';
 import 'react-inlinesvg';

package/dist/components/Tab.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 { B as Badge } from '../Badge-DBeSKfoF.js';
+import { B as Badge } from '../Badge-DBjlLLfX.js';
 import { D as Divider } from '../Divider-DHIuQUsH.js';
 import { L as Link } from '../Link-CeQuavin.js';
 import { T as Text } from '../Text-C4Bg2Mv6.js';

package/dist/components/Tile.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Badge } from '../Badge-DBeSKfoF.js';
+import { B as Badge } from '../Badge-DBjlLLfX.js';
 import { T as Text } from '../Text-C4Bg2Mv6.js';
 import { T as Title } from '../Title-YVzIwk68.js';
 import 'react';

package/dist/css/components/Avatar/Avatar.css

@@ -76,14 +76,18 @@
     @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144, 240 {
       &_$(size) {
         ^^&__wrapper {
-          width: $(size)px;
-          height: $(size)px;
+          width: $(size) px;
+          height: $(size) px;
           display: flex;
           justify-content: center;
           align-items: center;
           ^^^&__image {
-            width: $(size)px;
-            height: $(size)px;
+            width: $(size) px;
+            height: $(size) px;
+            & .image__item {
+              width: $(size) px;
+              height: $(size) px;
+            }
           }
         }
       }

package/dist/css/components/Label/Label.tokens.css

@@ -7,13 +7,13 @@
   --label-size-m-shape-rounded: 12px;
   --label-size-s-shape-rounded: 12px;
   --label-size-xs-shape-rounded: 12px;
-  --label-size-xxs-shape-rounded: 12px;
+  --label-size-xxs-shape-rounded: 6px;
 
   --label-size-xxl-padding: 10px 10px;
   --label-size-xl-padding: 7px 8px;
   --label-size-l-padding: 4px 6px;
   --label-size-m-padding: 2px 8px;
   --label-size-s-padding: 2px 6px;
-  --label-size-xs-padding: 0px 4px;
-  --label-size-xxs-padding: 0px 4px;
+  --label-size-xs-padding: 1px 4px;
+  --label-size-xxs-padding: 1px 4px;
 }

package/dist/css/components/Search/Search.tokens.css

@@ -5,4 +5,9 @@
 
   --search-input-compact-padding: 8px;
   --search-input-compact-gap: 4px;
+
+  --search-input-l-padding: 6px 12px;
+  --search-input-l-gap: 4px;
+
+  --search-shape-rounded: 4px;
 }

package/dist/hooks/useStyles.js

@@ -108,8 +108,7 @@ function useStyles(props) {
       if (value) {
         // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
         const HAS_UNIT = /\D/;
-        // prettier-ignore
-        const ignorePX = styleAttributeKey.includes('zIndex') || styleAttributeKey.includes('order');
+        const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
         if (!HAS_UNIT.test(value) && !ignorePX) {
           value = `${value}px`;
         }

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

@@ -1 +1,2 @@
+export { badgeAppearance } from './Badge.appearance';
 export { Badge, badgeConfig } from './Badge';

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

@@ -0,0 +1,2 @@
+import { paginationAppearanceType } from './Pagination.interface';
+export declare const paginationAppearance: paginationAppearanceType;

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

@@ -53,6 +53,7 @@ interface iPaginationProps extends IPaginationThemeColor, iStyleAttributes {
     pageCountDropdownItemDividerDirection?: tDirectionProps;
     pageCountDropdownItemLabelWrap?: tTextWrapProps;
     pageCountInputIcon?: ReactNode;
+    pageCountInputIconSrc?: ReactNode;
     pageNumber: string | string;
     pageRangeDisplayed?: number;
     perPageCount?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.2.32",
+  "version": "1.2.34",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -130,7 +130,7 @@
     "@chromatic-com/storybook": "^3.2.2",
     "@commitlint/cli": "^19.6.0",
     "@commitlint/config-conventional": "^19.6.0",
-    "@itcase/lint": "^1.0.31",
+    "@itcase/lint": "^1.0.33",
     "@lehoczky/postcss-fluid": "^1.0.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
@@ -142,17 +142,17 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.0.1",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-links": "^8.4.5",
-    "@storybook/addon-onboarding": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-interactions": "^8.4.6",
+    "@storybook/addon-links": "^8.4.6",
+    "@storybook/addon-onboarding": "^8.4.6",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^8.4.5",
+    "@storybook/addon-themes": "^8.4.6",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/react": "^8.4.5",
-    "@storybook/react-webpack5": "^8.4.5",
-    "@storybook/test": "^8.4.5",
+    "@storybook/blocks": "^8.4.6",
+    "@storybook/react": "^8.4.6",
+    "@storybook/react-webpack5": "^8.4.6",
+    "@storybook/test": "^8.4.6",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18",
@@ -164,7 +164,7 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-react-docgen": "^4.2.1",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "9.15.0",
+    "eslint": "9.16.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
     "npm": "^10.9.1",
@@ -190,13 +190,13 @@
     "postcss-pxtorem": "^6.1.0",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.4.1",
-    "rollup": "^4.27.4",
+    "rollup": "^4.28.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.0",
-    "storybook": "^8.4.5",
+    "storybook": "^8.4.6",
     "stylelint": "^16.11.0",
     "typescript": "^5.7.2"
   }