@itcase/ui 1.8.138 → 1.8.139

package/dist/{Button_cjs_BXEwg-En.js → Button_cjs_09OV2PKm.js}

@@ -61,7 +61,7 @@ const buttonAppearanceDanger = {
     },
     dangerPrimary: {
         fill: 'dangerPrimary',
-        fillHover: 'dangerHover',
+        fillHover: 'dangerHoverPrimary',
         labelTextColor: 'dangerTextPrimary',
         labelTextColorHover: 'dangerTextPrimary',
         iconAfterFillIcon: 'dangerItemPrimary',
@@ -109,9 +109,9 @@ const buttonAppearanceInfo = {
     info: {
         fill: 'infoPrimary',
         fillHover: 'infoPrimaryHover',
-        borderColor: 'infoBorderPrimary',
         labelTextColor: 'infoTextPrimary',
         labelTextColorHover: 'infoTextPrimary',
+        borderColor: 'infoBorderPrimary',
         iconAfterFillIcon: 'infoItemPrimary',
         iconBeforeFillIcon: 'infoItemPrimary',
         iconFillIcon: 'infoItemPrimary',
@@ -120,9 +120,9 @@ const buttonAppearanceInfo = {
     infoMutedPrimary: {
         fill: 'infoTertiary',
         fillHover: 'infoTertiaryHover',
-        borderColor: 'infoBorderSecondary',
         labelTextColor: 'infoTextSecondary',
         labelTextColorHover: 'infoTextSecondary',
+        borderColor: 'infoBorderSecondary',
         iconAfterFillIcon: 'infoItemSecondary',
         iconBeforeFillIcon: 'infoItemSecondary',
         iconFillIcon: 'infoItemSecondaryPrimary',
@@ -131,9 +131,9 @@ const buttonAppearanceInfo = {
     infoPrimary: {
         fill: 'infoPrimary',
         fillHover: 'infoPrimaryHover',
-        borderColor: 'infoBorderPrimary',
         labelTextColor: 'infoTextPrimary',
         labelTextColorHover: 'infoTextPrimary',
+        borderColor: 'infoBorderPrimary',
         iconAfterFillIcon: 'infoItemPrimary',
         iconBeforeFillIcon: 'infoItemPrimary',
         iconFillIcon: 'infoItemPrimary',
@@ -142,9 +142,9 @@ const buttonAppearanceInfo = {
     infoSecondary: {
         fill: 'infoPrimary',
         fillHover: 'infoPrimaryHover',
-        borderColor: 'infoBorderPrimary',
         labelTextColor: 'infoTextSecondary',
         labelTextColorHover: 'infoTextSecondary',
+        borderColor: 'infoBorderPrimary',
         iconAfterFillIcon: 'infoItemPrimary',
         iconBeforeFillIcon: 'infoItemPrimary',
         iconFillIcon: 'infoItemPrimary',
@@ -357,8 +357,8 @@ const buttonAppearanceSurface = {
     surfaceMutedPrimary: {
         fill: 'surfaceTertiary',
         fillHover: 'surfaceTertiary',
-        borderColor: 'surfaceBorderQuaternary',
         labelTextColor: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderQuaternary',
         iconAfterFillIcon: 'surfaceItemQuaternary',
         iconBeforeFillIcon: 'surfaceItemQuaternary',
         iconFillIcon: 'surfaceItemQuaternary',
@@ -367,36 +367,36 @@ const buttonAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfaceSecondary',
-        borderColor: 'surfaceBorderTertiary',
         labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
         iconFillIcon: 'surfaceItemPrimary',
         loaderAppearance: 'surfacePrimary',
     },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondary',
-        borderColor: 'surfaceBorderTertiary',
+    surfaceQuaternary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
         labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
         iconFillIcon: 'surfaceItemPrimary',
         loaderAppearance: 'surfacePrimary',
     },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
         fillHover: 'surfaceSecondary',
         labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
         iconFillIcon: 'surfaceItemPrimary',
         loaderAppearance: 'surfacePrimary',
     },
-    surfaceQuaternary: {
+    surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
-        borderColor: 'surfaceBorderTertiary',
+        fillHover: 'surfaceSecondary',
         labelTextColor: 'surfaceTextPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',

package/dist/{Button_es_DEn6z83v.js → Button_es_CVZPF_rz.js}

@@ -59,7 +59,7 @@ const buttonAppearanceDanger = {
     },
     dangerPrimary: {
         fill: 'dangerPrimary',
-        fillHover: 'dangerHover',
+        fillHover: 'dangerHoverPrimary',
         labelTextColor: 'dangerTextPrimary',
         labelTextColorHover: 'dangerTextPrimary',
         iconAfterFillIcon: 'dangerItemPrimary',
@@ -107,9 +107,9 @@ const buttonAppearanceInfo = {
     info: {
         fill: 'infoPrimary',
         fillHover: 'infoPrimaryHover',
-        borderColor: 'infoBorderPrimary',
         labelTextColor: 'infoTextPrimary',
         labelTextColorHover: 'infoTextPrimary',
+        borderColor: 'infoBorderPrimary',
         iconAfterFillIcon: 'infoItemPrimary',
         iconBeforeFillIcon: 'infoItemPrimary',
         iconFillIcon: 'infoItemPrimary',
@@ -118,9 +118,9 @@ const buttonAppearanceInfo = {
     infoMutedPrimary: {
         fill: 'infoTertiary',
         fillHover: 'infoTertiaryHover',
-        borderColor: 'infoBorderSecondary',
         labelTextColor: 'infoTextSecondary',
         labelTextColorHover: 'infoTextSecondary',
+        borderColor: 'infoBorderSecondary',
         iconAfterFillIcon: 'infoItemSecondary',
         iconBeforeFillIcon: 'infoItemSecondary',
         iconFillIcon: 'infoItemSecondaryPrimary',
@@ -129,9 +129,9 @@ const buttonAppearanceInfo = {
     infoPrimary: {
         fill: 'infoPrimary',
         fillHover: 'infoPrimaryHover',
-        borderColor: 'infoBorderPrimary',
         labelTextColor: 'infoTextPrimary',
         labelTextColorHover: 'infoTextPrimary',
+        borderColor: 'infoBorderPrimary',
         iconAfterFillIcon: 'infoItemPrimary',
         iconBeforeFillIcon: 'infoItemPrimary',
         iconFillIcon: 'infoItemPrimary',
@@ -140,9 +140,9 @@ const buttonAppearanceInfo = {
     infoSecondary: {
         fill: 'infoPrimary',
         fillHover: 'infoPrimaryHover',
-        borderColor: 'infoBorderPrimary',
         labelTextColor: 'infoTextSecondary',
         labelTextColorHover: 'infoTextSecondary',
+        borderColor: 'infoBorderPrimary',
         iconAfterFillIcon: 'infoItemPrimary',
         iconBeforeFillIcon: 'infoItemPrimary',
         iconFillIcon: 'infoItemPrimary',
@@ -355,8 +355,8 @@ const buttonAppearanceSurface = {
     surfaceMutedPrimary: {
         fill: 'surfaceTertiary',
         fillHover: 'surfaceTertiary',
-        borderColor: 'surfaceBorderQuaternary',
         labelTextColor: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderQuaternary',
         iconAfterFillIcon: 'surfaceItemQuaternary',
         iconBeforeFillIcon: 'surfaceItemQuaternary',
         iconFillIcon: 'surfaceItemQuaternary',
@@ -365,36 +365,36 @@ const buttonAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfaceSecondary',
-        borderColor: 'surfaceBorderTertiary',
         labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
         iconFillIcon: 'surfaceItemPrimary',
         loaderAppearance: 'surfacePrimary',
     },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondary',
-        borderColor: 'surfaceBorderTertiary',
+    surfaceQuaternary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
         labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
         iconFillIcon: 'surfaceItemPrimary',
         loaderAppearance: 'surfacePrimary',
     },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
         fillHover: 'surfaceSecondary',
         labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
         iconFillIcon: 'surfaceItemPrimary',
         loaderAppearance: 'surfacePrimary',
     },
-    surfaceQuaternary: {
+    surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
-        borderColor: 'surfaceBorderTertiary',
+        fillHover: 'surfaceSecondary',
         labelTextColor: 'surfaceTextPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',

package/dist/{DatePicker_cjs_Dxbyx8GV.js → DatePicker_cjs_DIiwwZKt.js}

@@ -8,7 +8,7 @@ var DatePicker = require('react-datepicker');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Button = require('./Button_cjs_BXEwg-En.js');
+var Button = require('./Button_cjs_09OV2PKm.js');
 var Icon = require('./Icon_cjs_DKzT-zmQ.js');
 var Input = require('./Input_cjs_DDi5JVAV.js');
 var Label = require('./Label_cjs_D2YMjCoS.js');

package/dist/{DatePicker_es_mX0NSjO5.js → DatePicker_es_BmxQxJ2u.js}

@@ -6,7 +6,7 @@ import DatePicker from 'react-datepicker';
 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_DEn6z83v.js';
+import { B as Button } from './Button_es_CVZPF_rz.js';
 import { I as Icon } from './Icon_es_5JUPM7bP.js';
 import { I as Input } from './Input_es_BnCXATnh.js';
 import { L as Label } from './Label_es_B5uGQwNN.js';

package/dist/cjs/components/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button_cjs_BXEwg-En.js');
+var Button = require('../../Button_cjs_09OV2PKm.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/CookiesWarning.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var Cookies = require('js-cookie');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Button = require('../../Button_cjs_BXEwg-En.js');
+var Button = require('../../Button_cjs_09OV2PKm.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 require('lodash/camelCase');
 require('lodash/castArray');

package/dist/cjs/components/DatePeriod.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var common = require('@itcase/common');
-var DatePicker = require('../../DatePicker_cjs_Dxbyx8GV.js');
+var DatePicker = require('../../DatePicker_cjs_DIiwwZKt.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var ChipsGroup = require('../../ChipsGroup_cjs_BNfzAmhc.js');
@@ -22,7 +22,7 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Button_cjs_BXEwg-En.js');
+require('../../Button_cjs_09OV2PKm.js');
 require('../../Icon_cjs_DKzT-zmQ.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');

package/dist/cjs/components/DatePicker.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('../../DatePicker_cjs_Dxbyx8GV.js');
+var DatePicker = require('../../DatePicker_cjs_DIiwwZKt.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -22,7 +22,7 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Button_cjs_BXEwg-En.js');
+require('../../Button_cjs_09OV2PKm.js');
 require('../../Icon_cjs_DKzT-zmQ.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');

package/dist/cjs/components/Drawer.js

@@ -83,7 +83,7 @@ function Drawer(props) {
     const isOpenPrevRef = React.useRef(Boolean(_isOpen));
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, drawerConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { direction, size, titleTextColor, titleTextSize, descTextColor, descTextSize, divider, dividerSize, zeroPadding, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
+    const { direction, size, titleTextColor, titleTextSize, titleTextWeight, descTextColor, descTextSize, divider, dividerSize, zeroPadding, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
     React.useEffect(() => {
         const isFromOpenToClose = isOpenPrevRef.current === true && !_isOpen;
         if (isFromOpenToClose && onClose) {
@@ -98,7 +98,7 @@ function Drawer(props) {
     }, [_isOpen, onClose]);
     return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), dataTour: dataTour, direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
-        customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
+        customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 exports.Drawer = Drawer;

package/dist/cjs/components/Modal.js

@@ -137,7 +137,7 @@ const getOrCreateModalElement = (modalQuerySelector, className = '') => {
 };
 // Modal component that is an abstraction around the portal API.
 const Modal = React.forwardRef(function Modal(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, title, modalQuerySelector = '#modal-global', scroll = false, stickyHeader = false, absoluteHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalQuerySelector = '#modal-global', scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
     // Query DOM element
     const [modalElement, setModalElement] = React.useState(null);
     const [isOpen, setIsOpen] = React.useState(initialIsOpen);
@@ -228,7 +228,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     return (modalElement &&
         ReactDOM.createPortal(
         // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
+        isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, flex: "1", children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
         // A DOM element

package/dist/cjs/components/ModalSheetBottom.js

@@ -27,7 +27,7 @@ require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_qKXVfU8e.js');
 require('../../Text_cjs_DaH5tVvz.js');
 
-const modalSheetBottomAppearance = {
+const modalSheetBottomAppearanceSize = {
     sizeL: {
         size: 'l',
         titleTextSize: 'h4',
@@ -36,9 +36,10 @@ const modalSheetBottomAppearance = {
         size: 'm',
         titleTextSize: 'h5',
     },
-    dev: {
-        fill: 'accentPrimary',
-    },
+};
+
+const modalSheetBottomAppearance = {
+    ...modalSheetBottomAppearanceSize,
 };
 
 const modalSheetBottomConfig = {

package/dist/cjs/components/Response.js

@@ -8,7 +8,7 @@ var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Button = require('../../Button_cjs_BXEwg-En.js');
+var Button = require('../../Button_cjs_09OV2PKm.js');
 var Group = require('../../Group_cjs_DxyobxPf.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 require('@itcase/common');
@@ -266,6 +266,17 @@ const RESPONSE_MESSAGES = {
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         secondaryButtonLabel: 'Отмена',
     },
+    errorAccessDenied: {
+        appearance: 'unableLoadData ghost',
+        title: 'Доступ ограничен',
+        desc: 'Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com',
+        code: '401/403',
+        imageSrc: index.responseIcon.UnableLoadData,
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        primaryButtonLabel: 'Повторить',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        secondaryButtonLabel: 'Отмена',
+    },
     errorNetwork: {
         appearance: 'unableLoadData ghost',
         title: 'Ошибка соединения',
@@ -289,7 +300,7 @@ const RESPONSE_MESSAGES = {
         secondaryButtonLabel: 'Отмена',
     },
     empty: {
-        appearance: 'refresh ghost',
+        appearance: 'empty ghost',
         title: 'Список пуст',
         desc: 'Нет данных по заданным параметрам',
         code: '200',
@@ -297,17 +308,6 @@ const RESPONSE_MESSAGES = {
         primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         primaryButtonLabel: 'ОК',
     },
-    errorAccessDenied: {
-        appearance: 'unableLoadData ghost',
-        title: 'Доступ ограничен',
-        desc: 'Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com',
-        code: '401/403',
-        imageSrc: index.responseIcon.UnableLoadData,
-        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        primaryButtonLabel: 'Повторить',
-        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        secondaryButtonLabel: 'Отмена',
-    },
     warning: {
         appearance: 'warning ghost',
         title: 'Внимание',

package/dist/components/Button.js

@@ -1,4 +1,4 @@
-export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_DEn6z83v.js';
+export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_CVZPF_rz.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/CookiesWarning.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { B as Button } from '../Button_es_DEn6z83v.js';
+import { B as Button } from '../Button_es_CVZPF_rz.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/DatePeriod.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_mX0NSjO5.js';
+import { D as DatePickerInput } from '../DatePicker_es_BmxQxJ2u.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_UTiUhYs7.js';
@@ -20,7 +20,7 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Button_es_DEn6z83v.js';
+import '../Button_es_CVZPF_rz.js';
 import '../Icon_es_5JUPM7bP.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_mX0NSjO5.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_BmxQxJ2u.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -20,7 +20,7 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Button_es_DEn6z83v.js';
+import '../Button_es_CVZPF_rz.js';
 import '../Icon_es_5JUPM7bP.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';

package/dist/components/Drawer.js

@@ -81,7 +81,7 @@ function Drawer(props) {
     const isOpenPrevRef = useRef(Boolean(_isOpen));
     const appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { direction, size, titleTextColor, titleTextSize, descTextColor, descTextSize, divider, dividerSize, zeroPadding, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
+    const { direction, size, titleTextColor, titleTextSize, titleTextWeight, descTextColor, descTextSize, divider, dividerSize, zeroPadding, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
     useEffect(() => {
         const isFromOpenToClose = isOpenPrevRef.current === true && !_isOpen;
         if (isFromOpenToClose && onClose) {
@@ -96,7 +96,7 @@ function Drawer(props) {
     }, [_isOpen, onClose]);
     return (jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), dataTour: dataTour, direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
-        customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _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, 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 })] }));
+        customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _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/Modal.js

@@ -135,7 +135,7 @@ const getOrCreateModalElement = (modalQuerySelector, className = '') => {
 };
 // Modal component that is an abstraction around the portal API.
 const Modal = React.forwardRef(function Modal(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, title, modalQuerySelector = '#modal-global', scroll = false, stickyHeader = false, absoluteHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalQuerySelector = '#modal-global', scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
     // Query DOM element
     const [modalElement, setModalElement] = useState(null);
     const [isOpen, setIsOpen] = useState(initialIsOpen);
@@ -226,7 +226,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     return (modalElement &&
         ReactDOM.createPortal(
         // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIcon) && (jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
+        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIcon) && (jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsx(Title, { width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, flex: "1", children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
         // A DOM element

package/dist/components/ModalSheetBottom.js

@@ -25,7 +25,7 @@ import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
 import '../Text_es_RDU9GLCV.js';
 
-const modalSheetBottomAppearance = {
+const modalSheetBottomAppearanceSize = {
     sizeL: {
         size: 'l',
         titleTextSize: 'h4',
@@ -34,9 +34,10 @@ const modalSheetBottomAppearance = {
         size: 'm',
         titleTextSize: 'h5',
     },
-    dev: {
-        fill: 'accentPrimary',
-    },
+};
+
+const modalSheetBottomAppearance = {
+    ...modalSheetBottomAppearanceSize,
 };
 
 const modalSheetBottomConfig = {

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_DEn6z83v.js';
+import { B as Button } from '../Button_es_CVZPF_rz.js';
 import { G as Group } from '../Group_es_DJ6GHMrs.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import '@itcase/common';
@@ -264,6 +264,17 @@ const RESPONSE_MESSAGES = {
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         secondaryButtonLabel: 'Отмена',
     },
+    errorAccessDenied: {
+        appearance: 'unableLoadData ghost',
+        title: 'Доступ ограничен',
+        desc: 'Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com',
+        code: '401/403',
+        imageSrc: responseIcon.UnableLoadData,
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        primaryButtonLabel: 'Повторить',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        secondaryButtonLabel: 'Отмена',
+    },
     errorNetwork: {
         appearance: 'unableLoadData ghost',
         title: 'Ошибка соединения',
@@ -287,7 +298,7 @@ const RESPONSE_MESSAGES = {
         secondaryButtonLabel: 'Отмена',
     },
     empty: {
-        appearance: 'refresh ghost',
+        appearance: 'empty ghost',
         title: 'Список пуст',
         desc: 'Нет данных по заданным параметрам',
         code: '200',
@@ -295,17 +306,6 @@ const RESPONSE_MESSAGES = {
         primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         primaryButtonLabel: 'ОК',
     },
-    errorAccessDenied: {
-        appearance: 'unableLoadData ghost',
-        title: 'Доступ ограничен',
-        desc: 'Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com',
-        code: '401/403',
-        imageSrc: responseIcon.UnableLoadData,
-        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        primaryButtonLabel: 'Повторить',
-        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        secondaryButtonLabel: 'Отмена',
-    },
     warning: {
         appearance: 'warning ghost',
         title: 'Внимание',

package/dist/css/components/Drawer/Drawer.css

@@ -53,14 +53,6 @@
   &__after {
     z-index: 10;
   }
-  &_sticky-button {
-    ^^&__after {
-      width: 100%;
-      position: sticky;
-      left: 0;
-      bottom: 0;
-    }
-  }
 }
 .drawer {
   &_reset-padding {
@@ -69,6 +61,19 @@
     }
   }
 }
+.drawer {
+  &_sticky-button {
+    ^&__wrapper {
+      padding-bottom: 0;
+    }
+    ^&__after {
+      width: 100%;
+      position: sticky;
+      left: 0;
+      bottom: 0;
+    }
+  }
+}
 :root {
   --drawer-overlay-background: rgb(116, 116, 116, 0.5);
   --drawer-overlay-filter: blur(10px);

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

@@ -7,7 +7,4 @@ export declare const modalSheetBottomAppearance: {
         size: string;
         titleTextSize: string;
     };
-    dev: {
-        fill: string;
-    };
 };

package/dist/types/components/ModalSheetBottom/appearance/modalSheetBottomSize.d.ts

@@ -0,0 +1,11 @@
+declare const modalSheetBottomAppearanceSize: {
+    sizeL: {
+        size: string;
+        titleTextSize: string;
+    };
+    sizeM: {
+        size: string;
+        titleTextSize: string;
+    };
+};
+export { modalSheetBottomAppearanceSize };

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

@@ -1,2 +1,2 @@
-export { modalSheetBottomAppearance } from './ModalSheetBottom.appearance';
 export { ModalSheetBottom } from './ModalSheetBottom';
+export { modalSheetBottomAppearance } from './ModalSheetBottom.appearance';

package/dist/types/components/Response/Response.constant.d.ts

@@ -9,17 +9,18 @@ declare const RESPONSE_MESSAGES: {
         secondaryButtonAppearance: string;
         secondaryButtonLabel: string;
     };
-    errorNetwork: {
+    errorAccessDenied: {
         appearance: string;
         title: string;
         desc: string;
+        code: string;
         imageSrc: any;
         primaryButtonAppearance: string;
         primaryButtonLabel: string;
         secondaryButtonAppearance: string;
         secondaryButtonLabel: string;
     };
-    nothingFound: {
+    errorNetwork: {
         appearance: string;
         title: string;
         desc: string;
@@ -29,16 +30,17 @@ declare const RESPONSE_MESSAGES: {
         secondaryButtonAppearance: string;
         secondaryButtonLabel: string;
     };
-    empty: {
+    nothingFound: {
         appearance: string;
         title: string;
         desc: string;
-        code: string;
         imageSrc: any;
         primaryButtonAppearance: string;
         primaryButtonLabel: string;
+        secondaryButtonAppearance: string;
+        secondaryButtonLabel: string;
     };
-    errorAccessDenied: {
+    empty: {
         appearance: string;
         title: string;
         desc: string;
@@ -46,8 +48,6 @@ declare const RESPONSE_MESSAGES: {
         imageSrc: any;
         primaryButtonAppearance: string;
         primaryButtonLabel: string;
-        secondaryButtonAppearance: string;
-        secondaryButtonLabel: string;
     };
     warning: {
         appearance: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.138",
+  "version": "1.8.139",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",