@itcase/ui 1.8.101 → 1.8.103

package/dist/{Overlay_cjs_B2KA85nC.js → Overlay_cjs_CcfJYN5o.js}

@@ -9,12 +9,12 @@ var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
 
 var overlayAppearanceDefault = {
     blackout: {
-        fill: 'surfaceInverse',
-        opacity: 50,
+        fill: 'black',
+        opacity: '50',
     },
     blur: {
         fill: 'surfaceQuaternary',
-        blur: 10,
+        blur: '10',
     },
 };
 
@@ -27,12 +27,13 @@ var overlayConfig = {
     },
 };
 function Overlay(props) {
-    var className = props.className, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, isOverlay = props.isOverlay, onClick = props.onClick;
+    var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, isOverlay = props.isOverlay, onClick = props.onClick;
     var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, overlayConfig);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, blurClass = propsGenerator.blurClass, opacityClass = propsGenerator.opacityClass;
+    // @ts-expect-error - TODO: сделать useStyles на ts
     var overlayStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'overlay', opacityClass && "opacity_".concat(opacityClass), blurClass && "blur_".concat(blurClass), isOverlay && 'overlay_state_visible', fillClass && "fill_".concat(fillClass)), dataTestId: dataTestId, dataTour: dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'overlay', opacityClass && "opacity_".concat(opacityClass), blurClass && "blur_".concat(blurClass), isOverlay && 'overlay_state_visible', fillClass && "fill_".concat(fillClass)), "data-test-id": dataTestId, "data-tour": dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));
 }
 
 exports.Overlay = Overlay;

package/dist/{Overlay_es_BvehRqIP.js → Overlay_es_DF3DAdxS.js}

@@ -7,12 +7,12 @@ import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
 
 var overlayAppearanceDefault = {
     blackout: {
-        fill: 'surfaceInverse',
-        opacity: 50,
+        fill: 'black',
+        opacity: '50',
     },
     blur: {
         fill: 'surfaceQuaternary',
-        blur: 10,
+        blur: '10',
     },
 };
 
@@ -25,12 +25,13 @@ var overlayConfig = {
     },
 };
 function Overlay(props) {
-    var className = props.className, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, isOverlay = props.isOverlay, onClick = props.onClick;
+    var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, isOverlay = props.isOverlay, onClick = props.onClick;
     var appearanceConfig = useAppearanceConfig(appearance, overlayConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, blurClass = propsGenerator.blurClass, opacityClass = propsGenerator.opacityClass;
+    // @ts-expect-error - TODO: сделать useStyles на ts
     var overlayStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'overlay', opacityClass && "opacity_".concat(opacityClass), blurClass && "blur_".concat(blurClass), isOverlay && 'overlay_state_visible', fillClass && "fill_".concat(fillClass)), dataTestId: dataTestId, dataTour: dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));
+    return (jsx("div", { className: clsx(className, 'overlay', opacityClass && "opacity_".concat(opacityClass), blurClass && "blur_".concat(blurClass), isOverlay && 'overlay_state_visible', fillClass && "fill_".concat(fillClass)), "data-test-id": dataTestId, "data-tour": dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));
 }
 
 export { Overlay as O, overlayAppearance as a, overlayConfig as o };

package/dist/cjs/components/Modal.js

@@ -8,7 +8,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Icon = require('../../Icon_cjs_LSfBwmrG.js');
-var Overlay = require('../../Overlay_cjs_B2KA85nC.js');
+var Overlay = require('../../Overlay_cjs_CcfJYN5o.js');
 var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var _default = require('@itcase/icons/default');
 var Loader = require('../../Loader_cjs_Db9diKuF.js');
@@ -37,21 +37,21 @@ var modalAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-    roundedM: {
+    roundedXL: {
         shape: 'rounded',
-        shapeStrength: '1m',
+        shapeStrength: '2m',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
     },
-    roundedXL: {
+    roundedM: {
         shape: 'rounded',
-        shapeStrength: '2m',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -134,10 +134,10 @@ var getOrCreateModalElement = function (modalQuerySelector, className) {
 };
 // Modal component that is an abstraction around the portal API.
 var Modal = React.forwardRef(function Modal(props, ref) {
-    var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, title = props.title, contentClassName = props.contentClassName, _a = props.modalQuerySelector, modalQuerySelector = _a === void 0 ? '#modal-global' : _a, scroll = props.scroll, _b = props.stickyHeader, stickyHeader = _b === void 0 ? false : _b, _c = props.isCloseOnBlur, isCloseOnBlur = _c === void 0 ? true : _c, _d = props.isOpen, initialIsOpen = _d === void 0 ? false : _d, _e = props.isOverlay, isOverlay = _e === void 0 ? true : _e, _f = props.isScrollOnOpen, isScrollOnOpen = _f === void 0 ? true : _f, _g = props.isSetFocusOnOpen, isSetFocusOnOpen = _g === void 0 ? true : _g, isSkeleton = props.isSkeleton, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal, children = props.children;
+    var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, title = props.title, contentClassName = props.contentClassName, _a = props.modalQuerySelector, modalQuerySelector = _a === void 0 ? '#modal-global' : _a, _b = props.scroll, scroll = _b === void 0 ? false : _b, _c = props.stickyHeader, stickyHeader = _c === void 0 ? false : _c, _d = props.isCloseOnBlur, isCloseOnBlur = _d === void 0 ? true : _d, _e = props.isOpen, initialIsOpen = _e === void 0 ? false : _e, _f = props.isOverlay, isOverlay = _f === void 0 ? true : _f, _g = props.isScrollOnOpen, isScrollOnOpen = _g === void 0 ? true : _g, _h = props.isSetFocusOnOpen, isSetFocusOnOpen = _h === void 0 ? true : _h, isSkeleton = props.isSkeleton, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal, children = props.children;
     // Query DOM element
-    var _h = React.useState(null), modalElement = _h[0], setModalElement = _h[1];
-    var _j = React.useState(initialIsOpen), isOpen = _j[0], setIsOpen = _j[1];
+    var _j = React.useState(null), modalElement = _j[0], setModalElement = _j[1];
+    var _k = React.useState(initialIsOpen), isOpen = _k[0], setIsOpen = _k[1];
     var modalContentRef = React.useRef(null);
     // const modalOverlayRef = useRef(null)
     var addModalProps = React.useCallback(function (element) {
@@ -173,18 +173,18 @@ var Modal = React.forwardRef(function Modal(props, ref) {
             onOpenModal();
         }
         /* SHOW TARGET POPUP ABOVE OTHERS POPUPS F TARGET ALREADY OPENED
-          // If current modal is already opened
-          // Move content to end of modal root container. For order in DOM.
-          const modalContentElement = modalContentRef.current
-          if (modalContentElement) {
-            modalContentElement.parentNode.appendChild(modalContentElement)
-          }
-          // Also move overlay to end of modal root container after container
-          const modalOverlayElement = modalOverlayRef.current
-          if (modalOverlayElement) {
-            modalOverlayElement.parentNode.appendChild(modalOverlayElement)
-          }
-        */
+        // If current modal is already opened
+        // Move content to end of modal root container. For order in DOM.
+        const modalContentElement = modalContentRef.current
+        if (modalContentElement) {
+          modalContentElement.parentNode.appendChild(modalContentElement)
+        }
+        // Also move overlay to end of modal root container after container
+        const modalOverlayElement = modalOverlayRef.current
+        if (modalOverlayElement) {
+          modalOverlayElement.parentNode.appendChild(modalOverlayElement)
+        }
+      */
     }, [onOpenModal]);
     // Hide modal and unmount children content
     var closeModal = React.useCallback(function (event) {
@@ -225,7 +225,7 @@ var 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', contentClassName, fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), shapeClass && "shape_".concat(shapeClass), sizeClass && "modal_size_".concat(sizeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), scroll && !stickyHeader && "modal-scroll_".concat(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, children: [(title || closeIconImage) && (jsxRuntime.jsxs("div", { className: clsx('modal__header'), 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 })), closeIconImage && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: "".concat(closeIconAppearance, " ").concat(closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage }) }))] })), 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', contentClassName, fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), shapeClass && "shape_".concat(shapeClass), sizeClass && "modal_size_".concat(sizeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), scroll && !stickyHeader && "modal-scroll_".concat(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 || closeIconImage) && (jsxRuntime.jsxs("div", { className: clsx('modal__header'), 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 })), closeIconImage && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: "".concat(closeIconAppearance, " ").concat(closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage }) }))] })), 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/Overlay.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Overlay = require('../../Overlay_cjs_B2KA85nC.js');
+var Overlay = require('../../Overlay_cjs_CcfJYN5o.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');

package/dist/components/Modal.js

@@ -6,7 +6,7 @@ import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceC
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { b as Title, I as Icon } from '../Icon_es_BYO1LdXJ.js';
-import { O as Overlay } from '../Overlay_es_BvehRqIP.js';
+import { O as Overlay } from '../Overlay_es_DF3DAdxS.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { icons24, icons32, icons40 } from '@itcase/icons/default';
 import { L as Loader } from '../Loader_es_AhHU-s7_.js';
@@ -35,21 +35,21 @@ var modalAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-    roundedM: {
+    roundedXL: {
         shape: 'rounded',
-        shapeStrength: '1m',
+        shapeStrength: '2m',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
     },
-    roundedXL: {
+    roundedM: {
         shape: 'rounded',
-        shapeStrength: '2m',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -132,10 +132,10 @@ var getOrCreateModalElement = function (modalQuerySelector, className) {
 };
 // Modal component that is an abstraction around the portal API.
 var Modal = React.forwardRef(function Modal(props, ref) {
-    var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, title = props.title, contentClassName = props.contentClassName, _a = props.modalQuerySelector, modalQuerySelector = _a === void 0 ? '#modal-global' : _a, scroll = props.scroll, _b = props.stickyHeader, stickyHeader = _b === void 0 ? false : _b, _c = props.isCloseOnBlur, isCloseOnBlur = _c === void 0 ? true : _c, _d = props.isOpen, initialIsOpen = _d === void 0 ? false : _d, _e = props.isOverlay, isOverlay = _e === void 0 ? true : _e, _f = props.isScrollOnOpen, isScrollOnOpen = _f === void 0 ? true : _f, _g = props.isSetFocusOnOpen, isSetFocusOnOpen = _g === void 0 ? true : _g, isSkeleton = props.isSkeleton, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal, children = props.children;
+    var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, title = props.title, contentClassName = props.contentClassName, _a = props.modalQuerySelector, modalQuerySelector = _a === void 0 ? '#modal-global' : _a, _b = props.scroll, scroll = _b === void 0 ? false : _b, _c = props.stickyHeader, stickyHeader = _c === void 0 ? false : _c, _d = props.isCloseOnBlur, isCloseOnBlur = _d === void 0 ? true : _d, _e = props.isOpen, initialIsOpen = _e === void 0 ? false : _e, _f = props.isOverlay, isOverlay = _f === void 0 ? true : _f, _g = props.isScrollOnOpen, isScrollOnOpen = _g === void 0 ? true : _g, _h = props.isSetFocusOnOpen, isSetFocusOnOpen = _h === void 0 ? true : _h, isSkeleton = props.isSkeleton, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal, children = props.children;
     // Query DOM element
-    var _h = useState(null), modalElement = _h[0], setModalElement = _h[1];
-    var _j = useState(initialIsOpen), isOpen = _j[0], setIsOpen = _j[1];
+    var _j = useState(null), modalElement = _j[0], setModalElement = _j[1];
+    var _k = useState(initialIsOpen), isOpen = _k[0], setIsOpen = _k[1];
     var modalContentRef = useRef(null);
     // const modalOverlayRef = useRef(null)
     var addModalProps = useCallback(function (element) {
@@ -171,18 +171,18 @@ var Modal = React.forwardRef(function Modal(props, ref) {
             onOpenModal();
         }
         /* SHOW TARGET POPUP ABOVE OTHERS POPUPS F TARGET ALREADY OPENED
-          // If current modal is already opened
-          // Move content to end of modal root container. For order in DOM.
-          const modalContentElement = modalContentRef.current
-          if (modalContentElement) {
-            modalContentElement.parentNode.appendChild(modalContentElement)
-          }
-          // Also move overlay to end of modal root container after container
-          const modalOverlayElement = modalOverlayRef.current
-          if (modalOverlayElement) {
-            modalOverlayElement.parentNode.appendChild(modalOverlayElement)
-          }
-        */
+        // If current modal is already opened
+        // Move content to end of modal root container. For order in DOM.
+        const modalContentElement = modalContentRef.current
+        if (modalContentElement) {
+          modalContentElement.parentNode.appendChild(modalContentElement)
+        }
+        // Also move overlay to end of modal root container after container
+        const modalOverlayElement = modalOverlayRef.current
+        if (modalOverlayElement) {
+          modalOverlayElement.parentNode.appendChild(modalOverlayElement)
+        }
+      */
     }, [onOpenModal]);
     // Hide modal and unmount children content
     var closeModal = useCallback(function (event) {
@@ -223,7 +223,7 @@ var 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', contentClassName, fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), shapeClass && "shape_".concat(shapeClass), sizeClass && "modal_size_".concat(sizeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), scroll && !stickyHeader && "modal-scroll_".concat(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, children: [(title || closeIconImage) && (jsxs("div", { className: clsx('modal__header'), children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIconImage && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: "".concat(closeIconAppearance, " ").concat(closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage }) }))] })), 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', contentClassName, fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), shapeClass && "shape_".concat(shapeClass), sizeClass && "modal_size_".concat(sizeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), scroll && !stickyHeader && "modal-scroll_".concat(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 || closeIconImage) && (jsxs("div", { className: clsx('modal__header'), children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIconImage && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: "".concat(closeIconAppearance, " ").concat(closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage }) }))] })), 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/Overlay.js

@@ -1,4 +1,4 @@
-export { O as Overlay, a as overlayAppearance, o as overlayConfig } from '../Overlay_es_BvehRqIP.js';
+export { O as Overlay, a as overlayAppearance, o as overlayConfig } from '../Overlay_es_DF3DAdxS.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';

package/dist/css/components/Group/Group.css

@@ -148,12 +148,12 @@
         }
       }
       @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-        pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum,
+        pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
         orange, clementine, apricot, papaya, kumquat, light-orange, peach,
         flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
         mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
         dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
-        light-blue, cerulian, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
         blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
         ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
         lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,

package/dist/css/components/Icon/Icon.css

@@ -58,11 +58,11 @@
     }
   }
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
-    pomagranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
     pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
     pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulian, surf-blue,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
     pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
     deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
     delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
@@ -104,11 +104,11 @@
     }
   }
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
-    pomagranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
     pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
     pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulian, surf-blue,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
     pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
     deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
     delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
@@ -162,11 +162,11 @@
       }
     }
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
       rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
       canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
@@ -222,11 +222,11 @@
         }
       }
       @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-        pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+        pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
         clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
         rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
         canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-        spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+        spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
         surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
         denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
         lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,

package/dist/css/styles/blur/blur.css

@@ -1,6 +1,6 @@
 .blur {
-  @each $val in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85,
-    90, 95 {
+  @each $val in 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85,
+    90, 95, 100 {
     &_$(val) {
       /* stylelint-disable-next-line prettier/prettier */
       backdrop-filter: blur($(val)px);

package/dist/css/styles/border-color/border-color.css

@@ -19,11 +19,11 @@
     }
   }
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
-    pomagranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
     pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
     pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulian, surf-blue,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
     pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
     deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
     delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,

package/dist/css/styles/border-color/border-color_active.css

@@ -15,11 +15,11 @@
       }
     }
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
       rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
       canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,

package/dist/css/styles/border-color/border-color_focus.css

@@ -18,11 +18,11 @@
       }
     }
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
       rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
       canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,

package/dist/css/styles/border-color/border-color_hover.css

@@ -27,11 +27,11 @@
       }
     }
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
       rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
       canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,

package/dist/css/styles/fill/fill.css

@@ -29,11 +29,11 @@
     }
   }
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
-    pomagranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
     pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
     pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulian, surf-blue,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
     pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
     deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
     delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,

package/dist/css/styles/fill/fill_active.css

@@ -19,11 +19,11 @@
       }
     }
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
       rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
       canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,

package/dist/css/styles/fill/fill_active_hover.css

@@ -80,12 +80,12 @@
         }
       }
       @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-        pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum,
+        pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
         orange, clementine, apricot, papaya, kumquat, light-orange, peach,
         flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
         mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
         dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
-        light-blue, cerulian, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
         blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
         ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
         lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,

package/dist/css/styles/fill/fill_hover.css

@@ -54,11 +54,11 @@
       }
     }
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
       rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
       canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,

package/dist/css/styles/text-color/text-color.css

@@ -13,11 +13,11 @@
       }
     }
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
       rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
       canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,

package/dist/css/styles/text-color/text-color_active.css

@@ -14,12 +14,12 @@
         }
       }
       @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-        pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum,
+        pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
         orange, clementine, apricot, papaya, kumquat, light-orange, peach,
         flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
         mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
         dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
-        light-blue, cerulian, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
         blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
         ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
         lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,

package/dist/css/styles/text-color/text-color_active_hover.css

@@ -17,12 +17,12 @@
           }
         }
         @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-          pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum,
+          pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
           orange, clementine, apricot, papaya, kumquat, light-orange, peach,
           flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
           mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
           dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
-          light-blue, cerulian, surf-blue, pacific-green, blue-cobalt,
+          light-blue, cerulean, surf-blue, pacific-green, blue-cobalt,
           dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
           midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue,
           indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,