@itcase/ui 1.9.51 → 1.9.52

package/dist/components/Checkmark.js

@@ -3,6 +3,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 } from '../Icon_es_BYViOa6l.js';
+import { icons14, icons20, icons24, icons32, icons40 } from '@itcase/icons/default';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -17,6 +19,11 @@ import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
+import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
+import '../Link_es_BDAmhIzd.js';
+import '../Text_es_DVNvU0m0.js';
 
 const checkmarkAppearanceAccent = {
     accentPrimary: {
@@ -24,7 +31,7 @@ const checkmarkAppearanceAccent = {
         fillActive: 'accentPrimary',
         borderColor: 'accentBorderPrimary',
         borderWidth: '2',
-        checkmarkFill: 'accentPrimary',
+        checkmarkIconFill: 'accentItemPrimary',
     },
 };
 
@@ -34,31 +41,48 @@ const checkmarkAppearanceDisabled = {
         fillActive: 'surfaceDisabled',
         borderColor: 'surfaceBorderDisabled',
         borderWidth: '2',
-        checkmarkFill: 'surfaceDisabled',
+        checkmarkIconFill: 'surfaceItemDisabled',
+    },
+};
+
+const checkmarkAppearanceError = {
+    errorPrimary: {
+        fill: 'extraPrimary',
+        fillActive: 'extraActivePrimary',
+        borderColor: 'extraBorderTertiary',
+        borderWidth: '2',
+        checkmarkIconFill: 'extraItemPrimary',
     },
 };
 
 const checkmarkAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
+        checkmarkIcon: icons40.General.Check,
     },
     sizeXL: {
         size: 'xl',
+        checkmarkIcon: icons40.General.Check,
     },
     sizeL: {
         size: 'l',
+        checkmarkIcon: icons32.General.Check,
     },
     sizeM: {
         size: 'm',
+        checkmarkIcon: icons24.Form.Check,
     },
     sizeS: {
         size: 's',
+        checkmarkIcon: icons24.Form.Check,
     },
     sizeXS: {
         size: 'xs',
+        checkmarkIcon: icons20.Form.Check,
     },
     sizeXXS: {
         size: 'xxs',
+        checkmarkIcon: icons14.Form.Check,
     },
 };
 
@@ -84,7 +108,7 @@ const checkmarkAppearanceSurface = {
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderPrimary',
         borderWidth: '2',
-        checkmarkFill: 'surfacePrimary',
+        checkmarkIconFill: 'surfaceItemPrimary',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
@@ -93,7 +117,7 @@ const checkmarkAppearanceSurface = {
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderPrimary',
         borderWidth: '2',
-        checkmarkFill: 'surfacePrimary',
+        checkmarkIconFill: 'surfaceItemPrimary',
     },
 };
 
@@ -103,6 +127,7 @@ const checkmarkAppearance = {
     ...checkmarkAppearanceStyle,
     ...checkmarkAppearanceSurface,
     ...checkmarkAppearanceSize,
+    ...checkmarkAppearanceError,
 };
 
 const checkmarkConfig = {
@@ -115,7 +140,7 @@ function Checkmark(props) {
     const { appearance, className, dataTestId, dataTour, isActive, isChecked, isDisabled = false, onClick, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, checkmarkConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, checkmarkFillClass, sizeClass, } = propsGenerator;
+    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, checkmarkFill, checkmarkIcon, checkmarkIconFill, checkmarkIconShape, checkmarkIconSize, checkmarkIconSrc, sizeClass, } = propsGenerator;
     const { styles: checkmarkStyles } = useStyles(props);
     return (jsx("div", { className: clsx(className, 'checkmark', sizeClass && `checkmark_size_${sizeClass}`, !isChecked || !isActive
             ? fillClass && `fill_${fillClass}`
@@ -128,7 +153,7 @@ function Checkmark(props) {
             ? borderColorHoverClass &&
                 `border-color_hover_${borderColorHoverClass}`
             : borderColorActiveHoverClass &&
-                `border-color_active_hover_${borderColorActiveHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, isDisabled), "data-testid": dataTestId, "data-tour": dataTour, style: checkmarkStyles, onClick: onClick, children: (isChecked || isActive) && (jsx("div", { className: clsx('checkmark__icon', `svg_path_fill_${checkmarkFillClass}`), children: jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { fill: checkmarkFillClass, d: "M28.0896 0.706312L11.4967 18.1772L3.9104 10.1895C3.01576 9.24775 1.56549 9.24775 0.670845 10.1895C-0.223615 11.1315 -0.223615 12.6585 0.670845 13.6005L9.87695 23.2936C10.3243 23.7644 10.9105 24 11.4967 24C12.083 24 12.6692 23.7644 13.1165 23.2936L31.3292 4.11744C32.2236 3.17547 32.2236 1.64848 31.3292 0.706504C30.4345 -0.235469 28.9841 -0.235469 28.0896 0.706312Z" }) }) })) }));
+                `border-color_active_hover_${borderColorActiveHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, isDisabled), "data-testid": dataTestId, "data-tour": dataTour, style: checkmarkStyles, onClick: onClick, children: (isChecked || isActive) && (jsx(Icon, { fill: checkmarkFill, iconFill: checkmarkIconFill, iconSize: checkmarkIconSize, imageSrc: checkmarkIconSrc, shape: checkmarkIconShape, SvgImage: checkmarkIcon })) }));
 }
 
 export { Checkmark, checkmarkAppearance, checkmarkConfig };

package/dist/components/Chips.js

@@ -1,4 +1,4 @@
-export { C as Chips, a as ChipsGroup, c as chipsAppearance, b as chipsConfig } from '../ChipsGroup_es_C_dgXLfC.js';
+export { C as Chips, a as ChipsGroup, c as chipsAppearance, b as chipsConfig } from '../ChipsGroup_es_CxqwFgoo.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

package/dist/components/DatePeriod.js

@@ -3,28 +3,27 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { mergeAppearanceKeys } from '../utils/mergeAppearanceKeys.js';
-import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { a as ChipsGroup, C as Chips } from '../ChipsGroup_es_C_dgXLfC.js';
-import { D as DatePickerInput } from '../DatePicker_es_ungoFvip.js';
+import { a as ChipsGroup, C as Chips } from '../ChipsGroup_es_CxqwFgoo.js';
+import { D as DatePickerInput } from '../DatePicker_es_BP0iWHMt.js';
 import 'react-select';
 import '../Icon_es_BYViOa6l.js';
-import { S as SelectContainer } from '../SelectContainer_es_BQ3-SqL2.js';
+import { S as SelectContainer } from '../SelectContainer_es_kRH4DsEh.js';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import '../context/UIContext.js';
 import '../Group_es_Y1qBBLZU.js';
-import 'lodash/castArray';
+import { mergeAppearanceKeys } from '../utils/mergeAppearanceKeys.js';
+import '../hooks/useStyles/useStyles.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'uuid';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import '../hooks/useStyles/useStyles.js';
 import '../Text_es_DVNvU0m0.js';
 import 'date-fns/locale';
 import 'react-datepicker';
@@ -40,6 +39,7 @@ import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import 'react-select/creatable';
 import '../Divider_es_D2snK_vn.js';
+import 'lodash/castArray';
 
 const datePeriodAppearanceShape = {
     circular: {

package/dist/components/DatePicker.js

@@ -1,9 +1,11 @@
-export { D as DatePickerInput, d as datePickerAppearance, a as datePickerConfig } from '../DatePicker_es_ungoFvip.js';
+export { D as DatePickerInput, d as datePickerAppearance, a as datePickerConfig } from '../DatePicker_es_BP0iWHMt.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import 'date-fns/locale';
 import 'react-datepicker';
+import '../Button_es_Dk6_9N-r.js';
+import '../utils/mergeAppearanceKeys.js';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
@@ -18,11 +20,9 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
+import '../hooks/useHoldProgress.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Button_es_Dk6_9N-r.js';
-import '../utils/mergeAppearanceKeys.js';
-import '../hooks/useHoldProgress.js';
 import '../Icon_es_BYViOa6l.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';

package/dist/components/Drawer.js

@@ -2,14 +2,15 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
 import clsx from 'clsx';
 import ReactDrawer from 'react-modern-drawer';
-import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { D as Divider } from '../Divider_es_D2snK_vn.js';
 import { I as Icon, b as Title } from '../Icon_es_BYViOa6l.js';
 import { T as Text } from '../Text_es_DVNvU0m0.js';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { icons24 } from '@itcase/icons/default';
+import '../hooks/useStyles/useStyles.js';
 import 'lodash/camelCase';
-import 'lodash/castArray';
+import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import 'uuid';
@@ -20,12 +21,11 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../hooks/useStyles/useStyles.js';
-import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../Link_es_BDAmhIzd.js';
+import 'lodash/castArray';
 
 const drawerAppearanceSize = {
     sizeH3: {
@@ -72,51 +72,50 @@ const drawerConfig = {
     },
 };
 function Drawer(props) {
-    const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen, isOpenModal, onClickClose, onClose, children, } = props;
-    const _onClickClose = onClickClose ?? onClose;
-    const _isOpen = isOpen ?? isOpenModal;
-    const isOpenPrevRef = useRef(Boolean(_isOpen));
+    const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen = false, isOpenModal, onClickClose, onClose, children, } = props;
+    const isOpenPrevRef = useRef(isOpen);
     const isFirstRenderRef = useRef(true);
     const appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { direction, size, titleTextColor, titleTextSize, titleTextWeight, descTextColor, descTextSize, divider, dividerSize, zeroPadding, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
-    const [animationState, setAnimationState] = useState(_isOpen
+    const [animationState, setAnimationState] = useState(isOpen
         ? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
         : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH);
     useEffect(() => {
-        const isFromOpenToClose = isOpenPrevRef.current === true && !_isOpen;
-        if (isFromOpenToClose && onClose) {
-            onClose();
-        }
-        isOpenPrevRef.current = Boolean(_isOpen);
+        /* TODO: Remove error after some time */
         const isNeedShowWarning = process.env.NODE_ENV === 'development' &&
             typeof isOpenModal !== 'undefined';
         if (isNeedShowWarning) {
-            console.warn('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
+            throw new Error('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [_isOpen, onClose]);
-    useEffect(() => {
         if (isFirstRenderRef.current) {
             isFirstRenderRef.current = false;
             return;
         }
+        const isPrevStateOpen = Boolean(isOpenPrevRef.current) === true;
+        const isNewStateClose = Boolean(isOpen) === false;
+        if (isPrevStateOpen && isNewStateClose && onClose) {
+            onClose();
+        }
+        isOpenPrevRef.current = isOpen;
         setAnimationState(ANIMATION_STATE_SNAPSHOTS.DEFAULT);
         const startTransitionDelay = 16;
-        const timeoutDelay = _isOpen ? startTransitionDelay : ANIMATION_DURATION;
+        const timeoutDelay = isOpen ? startTransitionDelay : ANIMATION_DURATION;
         const timeout = setTimeout(() => {
-            setAnimationState(_isOpen
+            const newAnimationState = isOpen
                 ? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
-                : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH);
+                : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH;
+            setAnimationState(newAnimationState);
         }, timeoutDelay);
         return () => {
             clearTimeout(timeout);
         };
-    }, [_isOpen]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
     if (!animationState.isInDOM) {
         return null;
     }
-    return (jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, "data-testid": dataTestId, "data-tour": dataTour, duration: ANIMATION_DURATION, enableOverlay: enableOverlay, lockBackgroundScroll: lockBackgroundScroll, overlayClassName: "drawer__overlay", open: animationState.isOpen, onClose: _onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: _onClickClose }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
+    return (jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, "data-testid": dataTestId, "data-tour": dataTour, duration: ANIMATION_DURATION, enableOverlay: enableOverlay, lockBackgroundScroll: lockBackgroundScroll, overlayClassName: "drawer__overlay", open: animationState.isOpen, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 export { Drawer, drawerAppearance, drawerConfig };

package/dist/components/Image.js

@@ -1,4 +1,4 @@
-export { I as Image } from '../Image_es_Ca7UQOkj.js';
+export { I as Image } from '../Image_es_DpOCNWpn.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/InputPassword.js

@@ -231,7 +231,7 @@ function InputPassword(props) {
         return isRevealed ? 'text' : 'password';
     }, [isRevealed]);
     const onClickIconReveal = useCallback((event) => {
-        event.preventDefault();
+        event?.preventDefault();
         setIsRevealed((prev) => !prev);
     }, []);
     const appearanceConfig = useAppearanceConfig(appearance, inputPasswordConfig, isDisabled);

package/dist/components/Select/stories/__mock__.js

@@ -18,12 +18,12 @@ const SelectDefaultMock = {
     }]
   }, {
     label: 'Томат',
-    isDisabled: true,
-    value: '2'
+    value: '2',
+    isDisabled: true
   }, {
     label: 'Томат красный',
-    isDisabled: true,
-    value: '3'
+    value: '3',
+    isDisabled: true
   }, {
     label: 'Томат среднеплодный (круглый)',
     value: '4',

package/dist/components/Select.js

@@ -1,9 +1,10 @@
-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_BQ3-SqL2.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_kRH4DsEh.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import 'react-select';
 import 'react-select/creatable';
+import '../Group_es_Y1qBBLZU.js';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
@@ -18,7 +19,6 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Group_es_Y1qBBLZU.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../Text_es_DVNvU0m0.js';

package/dist/components/Tile.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
+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';
@@ -168,7 +169,7 @@ function Tile(props) {
     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, onClick: iconClick }))] })] }), 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: mergeAppearanceKeys(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/context/Notifications.js

@@ -142,7 +142,7 @@ function createNotification(notification, onClose) {
     let after = null;
     let isLoading = false;
     let closeIconAppearance = '';
-    let onClickButton = null;
+    let onClickButton = () => { };
     if (typeof notification === 'string') {
         text = notification;
     }

package/dist/context/UIContext.js

@@ -11,6 +11,8 @@ const UserDeviceContext = createContext({
     isTablet: false,
     isDesktop: false,
     deviceCurrentMainType: '',
+    deviceCurrentType: '',
+    deviceTypesList: [],
 });
 const UIProvider = memo(function UIProvider(props) {
     const { userDeviceState = {}, children } = props;
@@ -61,7 +63,11 @@ const UIProvider = memo(function UIProvider(props) {
     return (jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
 });
 function useUserDeviceContext() {
-    return useContext(UserDeviceContext);
+    const context = useContext(UserDeviceContext);
+    if (!context) {
+        throw new Error('useUserDeviceContext is not defined');
+    }
+    return context;
 }
 
 export { UIProvider, useUserDeviceContext };