@itcase/ui 1.2.23 → 1.2.25

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-CliIEdbp.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -21,11 +21,17 @@ import '../Divider-U5UdY-ef.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
-import '../Tooltip-aaDRYNWY.js';
-import '../Title-BfSFPJtJ.js';
+import '../Tooltip-B2vv4OAX.js';
+import '../Title-CqwqEtm7.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,10 +4,10 @@ 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-C0M-Ap20.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';
+import { T as Title } from '../Title-CqwqEtm7.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -17,10 +17,10 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-DQWyj5EO.js';
+import '../Icon-CliIEdbp.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-aaDRYNWY.js';
+import '../Tooltip-B2vv4OAX.js';
 import '../Loader-CJ8ZCdwy.js';
 
 var responseConfig = {

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-CliIEdbp.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import { S as Scrollbar } from '../Scrollbar-CrGXCZ_F.js';
 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';
 import 'react-scrollbars-custom';
 
 var searchInputConfig = {

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-CliIEdbp.js';
 import React, { useMemo, useRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
@@ -21,8 +21,8 @@ import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
-import '../Tooltip-aaDRYNWY.js';
-import '../Title-BfSFPJtJ.js';
+import '../Tooltip-B2vv4OAX.js';
+import '../Title-CqwqEtm7.js';
 import 'lodash/castArray';
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>

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-CliIEdbp.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
@@ -17,8 +17,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 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/components/Swiper.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { T as Title } from '../Title-BfSFPJtJ.js';
+import { T as Title } from '../Title-CqwqEtm7.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';

package/dist/components/Tile.js

@@ -4,7 +4,7 @@ import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { B as Badge } from '../Badge-CrhdvxY6.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 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { T as Title, t as titleConfig } from '../Title-BfSFPJtJ.js';
+export { T as Title, t as titleConfig } from '../Title-CqwqEtm7.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, t as tooltipConfig } from '../Tooltip-aaDRYNWY.js';
+export { T as Tooltip, t as tooltipConfig } from '../Tooltip-B2vv4OAX.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -14,4 +14,4 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Text-CG3xPG27.js';
-import '../Title-BfSFPJtJ.js';
+import '../Title-CqwqEtm7.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/components/Swiper/Swiper.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.1.14
+ * Swiper 11.1.15
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: September 12, 2024
+ * Released on: November 18, 2024
  */
 
 /* FONT_START */

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/stories/appearance.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Appearance / Overview" />
+
+# Overview

package/dist/stories/colors.mdx

@@ -0,0 +1,239 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'
+
+<Meta title="Tokens / Colors" />
+
+# Colors
+
+<ColorPalette>
+  <ColorItem
+    title="Accent"
+    subtitle="--color-accent"
+    colors={{
+      Primary: 'hsla(92, 49%, 47%, 1)',
+      PrimaryHover: 'hsla(92, 29%, 62%, 1)',
+      Active: 'hsla(92, 46%, 40%, 1)',
+      Secondary: 'hsla(92, 29%, 62%, 1)',
+      Tertiary: 'hsla(93, 53%, 93%, 1)',
+      Disabled: 'hsla(93, 45%, 80%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Accent Text"
+    subtitle="--color-accent-text"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+      Disabled: 'hsla(92, 49%, 47%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Accent Item"
+    subtitle="--color-accent-item"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+      Secondary: 'hsla(92, 49%, 47%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Accent Border"
+    subtitle="--color-accent-border"
+    colors={{
+      Primary: 'hsla(92, 49%, 47%, 1)',
+      Secondary: 'hsla(92, 29%, 62%, 1)',
+      Quaternary: 'hsla(92, 37%, 35%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Primary"
+    subtitle="--color-primary"
+    colors={{
+      Primary: 'hsla(36, 95%, 45%, 1)',
+      PrimaryHover: 'hsla(40, 75%, 58%, 1)',
+      Active: 'hsla(36, 95%, 40%, 1)',
+      Disabled: 'hsla(36, 13%, 80%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Primary Text"
+    subtitle="--color-primary-text"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+      Disabled: 'hsla(36, 60%, 65%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Primary Item"
+    subtitle="--color-primary-item"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Secondary"
+    subtitle="--color-secondary"
+    colors={{
+      Primary: 'hsla(349, 96%, 44%, 1)',
+      PrimaryHover: 'hsla(349, 100%, 51%, 1)',
+      Active: 'hsla(349, 96%, 34%, 1)',
+      Disabled: 'hsla(349, 59%, 90%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Secondary Text"
+    subtitle="--color-secondary-text"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+      Secondary: 'hsla(349, 96%, 44%, 1)',
+      Disabled: 'hsla(349, 53%, 68%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Secondary Item"
+    subtitle="--color-secondary-item"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Surface"
+    subtitle="--color-surface"
+    colors={{
+      Primary: 'hsla(0, 0%, 100%, 1)',
+      PrimaryHover: 'hsla(0, 0%, 83%, 1)',
+      Secondary: 'hsla(220, 14%, 96%, 1)',
+      SecondaryHover: 'hsla(0, 0%, 78%, 1)',
+      Accent: 'hsla(92, 54%, 93%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Surface"
+    subtitle="--color-surface"
+    colors={{
+      Tertiary: 'hsla(0, 0%, 85%, 1)',
+      TertiaryHover: 'hsla(0, 0%, 73%, 1)',
+      Quaternary: 'hsla(0, 0%, 45%, 1)',
+      Active: 'hsla(0, 0%, 64%, 1)',
+      Disabled: 'hsla(0, 0%, 79%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Surface Text"
+    subtitle="--color-surface-text"
+    colors={{
+      Primary: 'hsla(0, 0%, 9%, 1)',
+      Accent: 'hsla(92, 49%, 47%, 1)',
+      Secondary: 'hsla(0, 0%, 45%, 1)',
+      Tertiary: 'hsla(213, 5%, 45%, 1)',
+      Quaternary: 'hsla(0, 0%, 75%, 1)',
+      Disabled: 'hsla(0, 0%, 47%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Surface Item"
+    subtitle="--color-surface-item"
+    colors={{
+      Primary: 'hsla(35, 71%, 13%, 1)',
+      Secondary: 'hsla(0, 0%, 93%, 1)',
+      Tertiary: 'hsla(0, 0%, 85%, 1)',
+      Accent: 'hsla(92, 49%, 47%, 1)',
+      Disabled: 'hsla(0, 0%, 61%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Surface Border"
+    subtitle="--color-surface-border"
+    colors={{
+      Primary: 'hsla(36, 71%, 13%, 1)',
+      Tertiary: 'hsla(0, 0%, 85%, 1)',
+      Quaternary: 'hsla(0, 0%, 45%, 1)',
+      Accent: 'hsla(92, 49%, 47%, 1)',
+      Active: 'hsla(40, 75%, 58%, 1)',
+      Disabled: 'hsla(0, 0%, 61%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Error"
+    subtitle="--color-error"
+    colors={{
+      Primary: 'hsla(0, 100%, 44%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Error Text"
+    subtitle="--color-error-text"
+    colors={{
+      Primary: 'hsla(0, 100%, 44%, 1)',
+      PrimaryHover: 'hsla(0, 100%, 60%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Error Item"
+    subtitle="--color-error-item"
+    colors={{
+      Primary: 'hsla(0, 100%, 44%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Error Border"
+    subtitle="--color-error-border"
+    colors={{
+      Primary: 'hsla(0, 100%, 44%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Success"
+    subtitle="--color-success"
+    colors={{
+      Primary: 'hsla(108, 46%, 34%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Success Text"
+    subtitle="--color-success-text"
+    colors={{
+      Primary: 'hsla(108, 46%, 34%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Success Item"
+    subtitle="--color-success-item"
+    colors={{
+      Primary: 'hsla(108, 46%, 34%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Success Border"
+    subtitle="--color-success-border"
+    colors={{
+      Primary: 'hsla(108, 46%, 34%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Active"
+    subtitle="--color-active"
+    colors={{
+      Primary: 'hsla(40, 75%, 58%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Active Text"
+    subtitle="--color-active-text"
+    colors={{
+      Primary: 'hsla(40, 75%, 58%, 1)',
+      Secondary: 'hsla(0, 0%, 100%, 1)',
+    }}
+  />
+  <ColorItem
+    title="Active Border"
+    subtitle="--color-active-border"
+    colors={{
+      Primary: 'hsla(40, 75%, 58%, 1)',
+    }}
+  />
+</ColorPalette>

package/dist/stories/elevation.mdx

@@ -0,0 +1,80 @@
+import { Meta, Typeset } from '@storybook/blocks'
+import { Divider } from '@itcase/ui/components/Divider'
+import { Group } from '@itcase/ui/components/Group'
+import { Text } from '@itcase/ui/components/Text'
+
+<Meta title="Tokens / Elevation" />
+
+# Elevation
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="1" height="64" width="64" />
+    <Text>elevation 1</Text>
+    <Text>box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.24);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="2" height="64" width="64" />
+    <Text>elevation 2</Text>
+    <Text>box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.24);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="4" height="64" width="64" />
+    <Text>elevation 4</Text>
+    <Text>box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="6" height="64" width="64" />
+    <Text>elevation 6</Text>
+    <Text>box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.24);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="8" height="64" width="64" />
+    <Text>elevation 8</Text>
+    <Text>box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="12" height="64" width="64" />
+    <Text>elevation 12</Text>
+    <Text>box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="16" height="64" width="64" />
+    <Text>elevation 16</Text>
+    <Text>box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.16);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>
+
+<Group>
+  <Group alignItems="center" direction="horizontal" gap="40" padding="10">
+    <Group elevation="24" height="64" width="64" />
+    <Text>elevation 24</Text>
+    <Text>box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.12);</Text>
+  </Group>
+  <Divider width="fill" />
+</Group>