@itcase/ui 1.9.41 → 1.9.42

package/dist/components/Label.js

@@ -1,4 +1,4 @@
-export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_CbXFs_ts.js';
+export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_BHlo5f-u.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -18,9 +18,9 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Icon_es_DNVHNKFK.js';
+import '../Icon_es_DoAtUvPe.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 import '../Text_es_B85LGfjW.js';

package/dist/components/Link.js

@@ -1,4 +1,4 @@
-export { L as Link, a as LinkWrapper, b as linkAppearance, l as linkConfig } from '../Link_es_BwLH5S8y.js';
+export { L as Link, a as LinkWrapper, b as linkAppearance, l as linkConfig } from '../Link_es_DPZHTF38.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/List.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { L as Link } from '../Link_es_BwLH5S8y.js';
+import { L as Link } from '../Link_es_DPZHTF38.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Logo.js

@@ -5,7 +5,7 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { a as LinkWrapper } from '../Link_es_BwLH5S8y.js';
+import { a as LinkWrapper } from '../Link_es_DPZHTF38.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';
 import 'lodash/camelCase';

package/dist/components/MenuItem.js

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon, T as Tooltip } from '../Icon_es_DNVHNKFK.js';
-import { L as Link } from '../Link_es_BwLH5S8y.js';
+import { I as Icon, T as Tooltip } from '../Icon_es_DoAtUvPe.js';
+import { L as Link } from '../Link_es_DPZHTF38.js';
 import { T as Text } from '../Text_es_B85LGfjW.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Modal.js

@@ -7,7 +7,7 @@ import { mergeAppearanceKeys } from '../utils/mergeAppearanceKeys.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title, I as Icon } from '../Icon_es_DNVHNKFK.js';
+import { b as Title, I as Icon } from '../Icon_es_DoAtUvPe.js';
 import { O as Overlay } from '../Overlay_es_Dx6UIr2X.js';
 import { L as Loader } from '../Loader_es_DFSNJsLL.js';
 import 'lodash/camelCase';
@@ -26,7 +26,7 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 import '../Text_es_B85LGfjW.js';
 
 const modalAppearanceShape = {

package/dist/components/ModalSheetBottom.js

@@ -5,7 +5,7 @@ import { Sheet } from 'react-modal-sheet';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title } from '../Icon_es_DNVHNKFK.js';
+import { b as Title } from '../Icon_es_DoAtUvPe.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -22,7 +22,7 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 import '../Text_es_B85LGfjW.js';
 
 const modalSheetBottomAppearanceSize = {

package/dist/components/Notification.js

@@ -4,8 +4,8 @@ import { mergeAppearanceKeys } from '../utils/mergeAppearanceKeys.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_ul2sDicM.js';
-import { I as Icon } from '../Icon_es_DNVHNKFK.js';
+import { B as Button } from '../Button_es_C2vKuxE7.js';
+import { I as Icon } from '../Icon_es_DoAtUvPe.js';
 import { L as Loader } from '../Loader_es_DFSNJsLL.js';
 import { T as Text } from '../Text_es_B85LGfjW.js';
 import { icons24 } from '@itcase/icons/default';
@@ -23,7 +23,8 @@ import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
-import '../Link_es_BwLH5S8y.js';
+import '../hooks/useHoldProgress.js';
+import '../Link_es_DPZHTF38.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';

package/dist/components/Pagination.js

@@ -1,13 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo, useState, useCallback } from 'react';
+import { useMemo, useState, useCallback, useRef, useEffect } from 'react';
 import clsx from 'clsx';
-import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es__mygSEH6.js';
-import { I as Icon } from '../Icon_es_DNVHNKFK.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_QniQAKA2.js';
+import { I as Icon } from '../Icon_es_DoAtUvPe.js';
 import { T as Text } from '../Text_es_B85LGfjW.js';
 import { icons14, icons16, icons24 } from '@itcase/icons/default';
 import 'lodash/camelCase';
@@ -27,7 +26,7 @@ import '../Divider_es_BR7ZO8w0.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 
 const paginationAppearanceAccent = {
     accentPrimary: {
@@ -236,11 +235,13 @@ function Pagination(props) {
         return onChangePage;
     }, [onChangePage, onPageChange]);
     const _onChangePerPageCount = useMemo(() => {
-        if (onPerPageCountChange) {
-            console.warn('@itcase/ui Pagination warning: "onPerPageCountChange" is deprecated, use "onChangePerPageCount" instead.');
-            return onPerPageCountChange;
-        }
-        return onChangePerPageCount;
+        return (perPageCount) => {
+            if (onPerPageCountChange) {
+                console.warn('@itcase/ui Pagination warning: "onPerPageCountChange" is deprecated, use "onChangePerPageCount" instead.');
+                return onPerPageCountChange(perPageCount);
+            }
+            return onChangePerPageCount(perPageCount);
+        };
     }, [onChangePerPageCount, onPerPageCountChange]);
     const [isOpenDropdown, setIsOpenDropdown] = useState(false);
     const [activeDropdownItem, setActiveDropdownItem] = useState(perPageCount);
@@ -254,13 +255,13 @@ function Pagination(props) {
     }, []);
     const handleDropdownItemClick = useCallback((event, item) => {
         event.stopPropagation();
-        _onChangePerPageCount && _onChangePerPageCount(item);
+        _onChangePerPageCount(item);
         setActiveDropdownItem(item);
         setIsOpenDropdown(false);
     }, [_onChangePerPageCount]);
     const paginationPagesCount = useMemo(() => {
         if (allItemsCount && allItemsCount > 0) {
-            return ceil(allItemsCount / perPageCount);
+            return Math.ceil(allItemsCount / perPageCount);
         }
         return 0;
     }, [allItemsCount, perPageCount]);
@@ -271,6 +272,42 @@ function Pagination(props) {
         }
         return 0;
     }, [pageNumber]);
+    // Keep track of previous perPageCount value
+    const prevPageCountRef = useRef(perPageCount);
+    // When perPageCount changes and current pageNumber is invalid (even if in range).
+    useEffect(() => {
+        // If page number is 5 and perPageCount is 10 and there is 200 items in total,
+        // then user is seeing items from 41 to 50.
+        // Without this effect, when perPageCount changes to 20, pageNumber remains 5,
+        // which mean user will see items from 81 to 100, which is not expected.
+        // So we recalculate pageNumber to make sure user sees items from 41 to 60.
+        // pageNumber 1, perPageCount 10 -> items 1-10
+        // pageNumber 2, perPageCount 10 -> items 11-20
+        // pageNumber 3, perPageCount 10 -> items 21-30
+        // pageNumber 4, perPageCount 10 -> items 31-40
+        // pageNumber 5, perPageCount 10 -> items 41-50
+        // pageNumber 1, perPageCount 20 -> items 1-20
+        // pageNumber 2, perPageCount 20 -> items 21-40
+        // pageNumber 3, perPageCount 20 -> items 41-60
+        // pageNumber 4, perPageCount 20 -> items 61-80
+        // pageNumber 5, perPageCount 20 -> items 81-100
+        const prevPageCount = prevPageCountRef.current;
+        // Update previous perPageCount value
+        prevPageCountRef.current = perPageCount;
+        const firstItemIndex = (pageNumber - 1) * prevPageCount + 1;
+        const newPageNumber = Math.ceil(firstItemIndex / perPageCount);
+        if (newPageNumber !== pageNumber) {
+            _onChangePage({ selected: newPageNumber - 1 });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [perPageCount]);
+    // When allItemsCount changes and current pageNumber is out of range
+    useEffect(() => {
+        if (pageNumber > paginationPagesCount && paginationPagesCount > 0) {
+            _onChangePage({ selected: paginationPagesCount - 1 });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [allItemsCount]);
     const appearanceConfig = useAppearanceConfig(appearance, paginationConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;

package/dist/components/Response.js

@@ -6,7 +6,7 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_ul2sDicM.js';
+import { B as Button } from '../Button_es_C2vKuxE7.js';
 import { G as Group } from '../Group_es_BVpRj4LR.js';
 import { T as Text } from '../Text_es_B85LGfjW.js';
 import '@itcase/common';
@@ -24,9 +24,10 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 import '../utils/mergeAppearanceKeys.js';
-import '../Icon_es_DNVHNKFK.js';
+import '../hooks/useHoldProgress.js';
+import '../Icon_es_DoAtUvPe.js';
 import 'react-inlinesvg';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 import '../Loader_es_DFSNJsLL.js';
 
 const responseAppearanceConfirm = {
@@ -53,7 +54,7 @@ const responseAppearanceDanger = {
         primaryButtonAppearance: 'dangerPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'dangerPrimary',
-        svgPathFill: 'dangerItemPrimary',
+        svgPathFill: 'dangerPrimary',
     },
 };
 
@@ -67,7 +68,7 @@ const responseAppearanceEmpty = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 

package/dist/components/Search.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_DNVHNKFK.js';
+import { I as Icon } from '../Icon_es_DoAtUvPe.js';
 import { T as Text } from '../Text_es_B85LGfjW.js';
 import { S as Scrollbar } from '../Scrollbar_es_CKTh3pew.js';
 import 'lodash/camelCase';
@@ -24,7 +24,7 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 import 'react-scrollbars-custom';
 
 const searchAppearanceDefault = {

package/dist/components/Segmented.js

@@ -3,7 +3,7 @@ import { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon } from '../Icon_es_DNVHNKFK.js';
+import { I as Icon } from '../Icon_es_DoAtUvPe.js';
 import { T as Text } from '../Text_es_B85LGfjW.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -22,7 +22,7 @@ import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 
 const segmentedAppearanceDefault = {
     defaultPrimary: {

package/dist/components/Select.js

@@ -1,4 +1,4 @@
-export { S as Select, a as SelectClearIndicator, b as SelectControl, c as SelectDropdownIndicator, d as SelectGroupHeading, e as SelectIndicatorsContainer, f as SelectInput, g as SelectMenu, h as SelectMultiValueContainer, i as SelectMultiValueLabel, j as SelectMultiValueRemove, k as SelectOption, l as SelectPlaceholder, m as SelectSingleValue, n as SelectValueContainer, s as selectConfig } from '../SelectContainer_es_Bqek7tN5.js';
+export { S as Select, a as SelectClearIndicator, b as SelectControl, c as SelectDropdownIndicator, d as SelectGroupHeading, e as SelectIndicatorsContainer, f as SelectInput, g as SelectMenu, h as SelectMultiValueContainer, i as SelectMultiValueLabel, j as SelectMultiValueRemove, k as SelectOption, l as SelectPlaceholder, m as SelectSingleValue, n as SelectValueContainer, s as selectConfig } from '../SelectContainer_es_Cr3Zset9.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -23,11 +23,11 @@ import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../Text_es_B85LGfjW.js';
 import '@itcase/icons/default';
-import '../Icon_es_DNVHNKFK.js';
+import '../Icon_es_DoAtUvPe.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 import '../Loader_es_DFSNJsLL.js';
 import '../utils/mergeAppearanceKeys.js';
 import '../Divider_es_BR7ZO8w0.js';

package/dist/components/Swiper.js

@@ -6,7 +6,7 @@ import { G as Group } from '../Group_es_BVpRj4LR.js';
 import { T as Text } from '../Text_es_B85LGfjW.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title } from '../Icon_es_DNVHNKFK.js';
+import { b as Title } from '../Icon_es_DoAtUvPe.js';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -24,7 +24,7 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 
 function Swiper(props) {
     const { id, className, dataTestId, dataTour, direction, minZoom = 1, maxZoom = 5, title, titleAfter, titleSize, titleTextColor, titleWeight, activeSlideIndex = 0, allowTouchMove, autoHeight, breakpoints, forwardedRef, freeMode, items, keyboard, loop, modules, mousewheel, nextButton, normalizeSlideIndex, pagination, prevButton, preventClicks, preventClicksPropagation, simulateTouch, slidesPerView, spaceBetween, speed, swiperClass, swiperSlideClass, isChangeOnClickSlide, isInit, isNavigation = false, isScrollbar, isShowOriginalLink = false, isZoomEnabled = false, setNextBtnDisabled, setPrevBtnDisabled, onSlideNextTransitionEnd, onSlidePrevTransitionEnd, onSwiper, onUpdate, children, } = props;

package/dist/components/Tab.js

@@ -6,9 +6,9 @@ import { useActiveClasses } from '../hooks/useActiveClasses/useActiveClasses.js'
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge, I as Icon } from '../Icon_es_DNVHNKFK.js';
+import { B as Badge, I as Icon } from '../Icon_es_DoAtUvPe.js';
 import { D as Divider } from '../Divider_es_BR7ZO8w0.js';
-import { L as Link } from '../Link_es_BwLH5S8y.js';
+import { L as Link } from '../Link_es_DPZHTF38.js';
 import { T as Text } from '../Text_es_B85LGfjW.js';
 import '../hooks/useActiveClasses/useActiveClasses.helpers.js';
 import 'lodash/camelCase';

package/dist/components/Tile.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title, B as Badge, I as Icon } from '../Icon_es_DNVHNKFK.js';
+import { b as Title, B as Badge, I as Icon } from '../Icon_es_DoAtUvPe.js';
 import { T as Text } from '../Text_es_B85LGfjW.js';
 import 'react';
 import 'lodash/camelCase';
@@ -22,7 +22,7 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 
 const tileAppearanceShape = {
     circular: {
@@ -56,7 +56,7 @@ const tileAppearanceSize = {
         descTextSize: 'l',
         badgeAppearanceSize: 'sizeM',
         iconFillSize: '32',
-        iconSize: '32',
+        iconSize: '24',
     },
     sizeL: {
         size: 'l',
@@ -163,12 +163,12 @@ const tileConfig = {
     },
 };
 function Tile(props) {
-    const { appearance, className, dataTestId, dataTour, type, title, desc, badgeValue, before, after, isSkeleton, onClick, children, } = props;
+    const { appearance, className, dataTestId, dataTour, type, title, desc, badgeValue, iconClick, before, after, isSkeleton, onClick, children, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, tileConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, alignClass, alignDirectionClass, fillClass, titleTextAlign, titleTextColor, titleTextSize, titleTextWeight, titleTextWrap, descTextColor, descTextSize, descTextWrap, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, icon, iconAppearance, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     const { styles: tileStyles } = useStyles(props);
-    return (jsx("div", { className: clsx('tile', className, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, alignClass && `align_${alignClass}`, directionClass && `direction_${directionClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `tile_size_${sizeClass}`, type && `tile_type_${type}`, badgeValue && `tile_state_badge`, widthClass && `width_${widthClass}`, isSkeleton && `tile_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, jsxs("div", { className: "tile__header", children: [jsxs("div", { className: "tile__header-inner", children: [title && (jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), desc && (jsx(Text, { className: "tile__text", size: descTextSize, textColor: descTextColor, textWrap: descTextWrap, children: desc }))] }), jsxs("div", { className: "tile__header-actions", children: [badgeValue && (jsx(Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: "tile__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { appearance: iconAppearance, className: "tile__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] })] }), children, after] }) }));
+    return (jsx("div", { className: clsx('tile', className, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, alignClass && `align_${alignClass}`, directionClass && `direction_${directionClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `tile_size_${sizeClass}`, type && `tile_type_${type}`, badgeValue && `tile_state_badge`, widthClass && `width_${widthClass}`, isSkeleton && `tile_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, jsxs("div", { className: "tile__header", children: [jsxs("div", { className: "tile__header-inner", children: [title && (jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), desc && (jsx(Text, { className: "tile__text", size: descTextSize, textColor: descTextColor, textWrap: descTextWrap, children: desc }))] }), jsxs("div", { className: "tile__header-actions", children: [badgeValue && (jsx(Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: "tile__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { appearance: iconAppearance, className: "tile__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: iconClick }))] })] }), children, after] }) }));
 }
 
 export { Tile, tileAppearance, tileConfig };

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_DNVHNKFK.js';
+export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_DoAtUvPe.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -21,5 +21,5 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 import '../Text_es_B85LGfjW.js';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_DNVHNKFK.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_DoAtUvPe.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -21,5 +21,5 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 import '../Text_es_B85LGfjW.js';

package/dist/components/Warning.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_DNVHNKFK.js';
+import { I as Icon } from '../Icon_es_DoAtUvPe.js';
 import { T as Text } from '../Text_es_B85LGfjW.js';
 import { icons16 } from '@itcase/icons/default';
 import 'lodash/camelCase';
@@ -23,7 +23,7 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BwLH5S8y.js';
+import '../Link_es_DPZHTF38.js';
 
 const warningAppearanceAccent = {
     accentMutedPrimary: {

package/dist/css/mixins/mixin_typography.css

@@ -217,7 +217,7 @@
 
 @define-mixin email-text-xs $weight: normal {
   @mixin font-fixed $weight, var(--typography-email-text-xs),
-    var(--typography-email-text-xs-line-height), var(--font-email);
+    var(--typographyemail-text-xs-line-height), var(--font-email);
 }
 
 @define-mixin email-text-xxs $weight: normal {

package/dist/css/styles/bundles.css

@@ -47362,10 +47362,38 @@ div.avatar-stack {
     top: 0;
     z-index: 1;
   }
+  &_state {
+    &_holding {
+      & .button__indication {
+        &-item {
+          transform: translate(0%, 0) !important;
+        }
+      }
+    }
+  }
   &__wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
+    ^&__indication {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      overflow: hidden;
+      &-item {
+        transition: 0.5s ease-out;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        opacity: 50%;
+        background: #000;
+        opacity: 10%;
+        transform: translate(-100%, 0);
+      }
+    }
     ^&__label {
       text-decoration: none;
       text-align: center;
@@ -80357,15 +80385,14 @@ div.label {
         width: auto;
         height: auto;
         position: absolute;
+        display: flex;
         left: 50%;
         top: 50%;
-        display: flex;
         transform: translate(-50%, -50%);
       }
       ^^&__item {
         border-radius: 100%;
         display: inline-block;
-        border-radius: 50%;
         animation: loaderSimple 1.4s infinite ease-in-out both;
         &:first-child {
           animation-delay: -0.32s;

package/dist/hooks/useHoldProgress.js

@@ -0,0 +1,59 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+
+const FRAME_DURATION = 16; // Approximate duration of a frame in milliseconds
+const HOLD_STATE = {
+    HOLDING: 'holding',
+    IDLE: 'idle',
+};
+function useHoldProgress(options) {
+    const { holdDurationMs = 500, onHoldComplete } = options;
+    const animationFrameIdRef = useRef(null);
+    const onHoldCompleteRef = useRef(onHoldComplete);
+    const [holdState, setState] = useState(HOLD_STATE.IDLE);
+    // const [holdProgress, setProgress] = useState(0) // Progress from 0 to 1
+    const holdProgressRef = useRef(0);
+    // onHoldCompleteRef is not used in render, so it's safe to ignore lint rule here
+    // eslint-disable-next-line react-hooks/refs
+    onHoldCompleteRef.current = onHoldComplete;
+    useEffect(() => {
+        function updateProgress() {
+            if (holdState === HOLD_STATE.HOLDING && holdProgressRef.current === 1) {
+                onHoldCompleteRef.current && onHoldCompleteRef.current();
+            }
+            if (holdState === HOLD_STATE.HOLDING && holdProgressRef.current < 1) {
+                const prevProgress = holdProgressRef.current;
+                const newProgress = Math.min(prevProgress + FRAME_DURATION / holdDurationMs, 1);
+                holdProgressRef.current = newProgress;
+                animationFrameIdRef.current = requestAnimationFrame(updateProgress);
+            }
+            if (holdState === HOLD_STATE.IDLE && holdProgressRef.current > 0) {
+                const prevProgress = holdProgressRef.current;
+                const newProgress = Math.max(prevProgress - FRAME_DURATION / holdDurationMs, 0);
+                holdProgressRef.current = newProgress;
+                animationFrameIdRef.current = requestAnimationFrame(updateProgress);
+            }
+        }
+        animationFrameIdRef.current = requestAnimationFrame(updateProgress);
+        return () => {
+            if (animationFrameIdRef.current) {
+                cancelAnimationFrame(animationFrameIdRef.current);
+            }
+        };
+    }, [holdState, holdDurationMs]);
+    const onHoldStart = useCallback((event) => {
+        // Only proceed if it's a touch event or left mouse button (button 0)
+        if (event.pointerType === 'touch' || event.button === 0) {
+            setState(HOLD_STATE.HOLDING);
+        }
+    }, []);
+    const onHoldEnd = useCallback((_event) => {
+        setState(HOLD_STATE.IDLE);
+    }, []);
+    return {
+        holdState,
+        onHoldEnd,
+        onHoldStart,
+    };
+}
+
+export { useHoldProgress };

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

@@ -54,7 +54,7 @@ declare const Button: React.ForwardRefExoticComponent<{
     wrap?: import("@itcase/types").WrapProps;
     zeroGap?: boolean;
     zeroPadding?: boolean;
-} & import("../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+} & Pick<import("../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
     after?: string;
     appearance?: import("@itcase/types").CompositeAppearanceKey;
     Badge?: React.ReactNode;
@@ -67,6 +67,7 @@ declare const Button: React.ForwardRefExoticComponent<{
     href?: import("../Link/Link.interface").LinkWrapperProps["href"];
     htmlType?: import("../Link/Link.interface").LinkWrapperProps["type"];
     isDisabled?: import("../Link/Link.interface").LinkWrapperProps["disabled"];
+    isHolding?: boolean;
     isLoading?: boolean;
     isSkeleton?: boolean;
     label?: string;

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

@@ -1,5 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { AlignProps, AppearanceIconSizeKey, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKey, ElevationProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, WrapProps } from '@itcase/types';
+import { UseHoldProgressOptions } from '../../hooks/useHoldProgress';
 import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 import { IconProps } from '../Icon/Icon.interface';
 import { LinkWrapperProps } from '../Link/Link.interface';
@@ -59,7 +60,7 @@ type ButtonAppearanceProps = {
     zeroGap?: boolean;
     zeroPadding?: boolean;
 };
-type ButtonProps = ButtonAppearanceProps & StyleAttributes & {
+type ButtonProps = ButtonAppearanceProps & Pick<UseHoldProgressOptions, 'onHoldComplete'> & StyleAttributes & {
     after?: string;
     appearance?: CompositeAppearanceKey;
     Badge?: ReactNode;
@@ -72,6 +73,7 @@ type ButtonProps = ButtonAppearanceProps & StyleAttributes & {
     href?: LinkWrapperProps['href'];
     htmlType?: LinkWrapperProps['type'];
     isDisabled?: LinkWrapperProps['disabled'];
+    isHolding?: boolean;
     isLoading?: boolean;
     isSkeleton?: boolean;
     label?: string;

package/dist/types/components/Button/stories/ButtonDefault.stories.d.ts

@@ -54,7 +54,7 @@ declare const meta: {
         wrap?: import("@itcase/types").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
         appearance?: import("@itcase/types").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
@@ -67,6 +67,7 @@ declare const meta: {
         href?: import("../../Link/Link.interface").LinkWrapperProps["href"];
         htmlType?: import("../../Link/Link.interface").LinkWrapperProps["type"];
         isDisabled?: import("../../Link/Link.interface").LinkWrapperProps["disabled"];
+        isHolding?: boolean;
         isLoading?: boolean;
         isSkeleton?: boolean;
         label?: string;