@cube-dev/ui-kit 0.0.0-canary-23bc0fd → 0.0.0-canary-9ea74e0

package/es/components/organisms/StatsCard/StatsCard.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/other/Base64Upload/Base64Upload.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/other/CloudLogo/CloudLogo.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/AlertDialog.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/AlertDialogApiProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/AlertDialogZone.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/AlertDialog/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/Dialog.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -14,70 +14,71 @@ import { FocusScope } from '@react-aria/focus';
 import { forwardRef } from 'react';
 import { useDialog } from '@react-aria/dialog';
 import { useMessageFormatter } from '@react-aria/i18n';
-import { Base } from '../../Base';
 import { CloseOutlined } from '@ant-design/icons';
-import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, extractStyles, } from '../../../tasty';
+import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, extractStyles, tasty, } from '../../../tasty';
 import { mergeProps, SlotProvider } from '../../../utils/react';
-import { useContextStyles } from '../../../providers/StyleProvider';
 const STYLES_LIST = [...BASE_STYLES, ...DIMENSION_STYLES, ...BLOCK_STYLES];
-const DEFAULT_STYLES = {
-    pointerEvents: 'auto',
-    position: 'relative',
-    display: 'flex',
-    placeItems: 'stretch',
-    placeContent: 'stretch',
-    width: {
-        '': '288px @dialog-size 90vw',
-        '[data-type="fullscreen"]': '90vw 90vw',
-        '[data-type="fullscreenTakeover"]': '100vw 100vw',
-        '[data-type="panel"]': '100vw 100vw',
-    },
-    height: {
-        '': 'max 90vh',
-        '[data-type="fullscreenTakeover"] | [data-type="panel"]': 'max 100vh',
-    },
-    gap: 0,
-    flow: 'column',
-    radius: {
-        '': '2r',
-        '[data-type="tray"]': '2r top',
-        '[data-type="fullscreenTakeover"] | [data-type="panel"]': '0r',
-    },
-    fill: '#white',
-    shadow: {
-        '': '0 20px 30px #shadow',
-        '[data-type="popover"]': '0px 4px 16px #shadow',
-    },
-    transform: {
-        '': false,
-        '[data-type="modal"]': 'translate(0, ((50vh - 50%) / -3))',
-    },
-    placeSelf: 'stretch',
-    '@dialog-heading-padding-v': {
-        '': '2x',
-        '[data-type="popover"]': '1x',
-    },
-    '@dialog-content-padding-v': {
-        '': '3x',
-        '[data-type="popover"]': '2x',
-    },
-    '@dialog-padding-h': {
-        '': '3x',
-        '[data-type="popover"]': '2x',
-    },
-    '@dialog-footer-v': {
-        '': '2x',
-        '[data-type="popover"]': '1x',
+const DialogElement = tasty({
+    as: 'section',
+    styles: {
+        pointerEvents: 'auto',
+        position: 'relative',
+        display: 'flex',
+        placeItems: 'stretch',
+        placeContent: 'stretch',
+        width: {
+            '': '288px @dialog-size 90vw',
+            '[data-type="fullscreen"]': '90vw 90vw',
+            '[data-type="fullscreenTakeover"]': '100vw 100vw',
+            '[data-type="panel"]': '100vw 100vw',
+        },
+        height: {
+            '': 'max 90vh',
+            '[data-type="fullscreenTakeover"] | [data-type="panel"]': 'max 100vh',
+        },
+        gap: 0,
+        flow: 'column',
+        radius: {
+            '': '2r',
+            '[data-type="tray"]': '2r top',
+            '[data-type="fullscreenTakeover"] | [data-type="panel"]': '0r',
+        },
+        fill: '#white',
+        shadow: {
+            '': '0 20px 30px #shadow',
+            '[data-type="popover"]': '0px 4px 16px #shadow',
+        },
+        transform: {
+            '': false,
+            '[data-type="modal"]': 'translate(0, ((50vh - 50%) / -3))',
+        },
+        placeSelf: 'stretch',
+        '@dialog-heading-padding-v': {
+            '': '2x',
+            '[data-type="popover"]': '1x',
+        },
+        '@dialog-content-padding-v': {
+            '': '3x',
+            '[data-type="popover"]': '2x',
+        },
+        '@dialog-padding-h': {
+            '': '3x',
+            '[data-type="popover"]': '2x',
+        },
+        '@dialog-footer-v': {
+            '': '2x',
+            '[data-type="popover"]': '1x',
+        },
+        '@dialog-content-gap': '3x',
     },
-    '@dialog-content-gap': '3x',
-};
+});
 const CLOSE_BUTTON_STYLES = {
+    display: 'flex',
     position: 'absolute',
     top: '1x',
     right: '1x',
     width: '5x',
     height: '5x',
-    display: 'flex',
     placeContent: 'center',
 };
 const sizeMap = {
@@ -102,14 +103,9 @@ const intlMessages = {
  */
 export const Dialog = forwardRef(function Dialog(props, ref) {
     let { type = 'modal', ...contextProps } = useDialogContext();
-    let { qa, children, size = 'S', isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, ...otherProps } = props;
+    let { qa, children, size = 'S', isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, closeButtonStyles, ...otherProps } = props;
     size = sizeMap[size.toUpperCase()] || size;
-    const styles = {
-        ...DEFAULT_STYLES,
-        ...useContextStyles('Dialog', props),
-        ...extractStyles(otherProps, STYLES_LIST),
-        '@dialog-size': `${sizePxMap[size] || 288}px`,
-    };
+    const styles = extractStyles(otherProps, STYLES_LIST);
     let formatMessage = useMessageFormatter(intlMessages);
     let domRef = useDOMRef(ref);
     let { dialogProps, titleProps } = useDialog(mergeProps(contextProps, props), domRef);
@@ -160,8 +156,10 @@ export const Dialog = forwardRef(function Dialog(props, ref) {
             },
         },
     };
-    return (_jsx(FocusScope, { contain: true, restoreFocus: true, children: _jsxs(Base, { "data-id": "Dialog", "data-qa": qa || 'Dialog', styles: styles, as: "section", ...dialogProps, mods: {
+    return (_jsx(FocusScope, { contain: true, restoreFocus: true, children: _jsxs(DialogElement, { "data-id": "Dialog", "data-qa": qa || 'Dialog', styles: styles, as: "section", ...dialogProps, mods: {
                 dismissable: isDismissable,
+            }, style: {
+                '--dialog-size': `${sizePxMap[size] || 288}px`,
             }, "data-type": type, "data-size": size, ref: domRef, children: [dismissButton, _jsxs(SlotProvider, { slots: slots, children: [isDismissable && (_jsx(Button, { qa: "ModalCloseButton", type: "neutral", styles: CLOSE_BUTTON_STYLES, icon: closeIcon || _jsx(CloseOutlined, {}, void 0), label: formatMessage('dismiss'), onPress: () => onDismiss && onDismiss() }, void 0)), children] }, void 0)] }, void 0) }, void 0));
 });
 

package/es/components/overlays/Dialog/DialogContainer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/DialogForm.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/DialogTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Modal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -12,9 +12,8 @@ import { Overlay } from './Overlay';
 import { forwardRef } from 'react';
 import { Underlay } from './Underlay';
 import { useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';
-import { Base } from '../../Base';
+import { tasty } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
-import { useContextStyles } from '../../../providers/StyleProvider';
 export const OVERLAY_WRAPPER_STYLES = {
     position: 'fixed',
     display: 'grid',
@@ -32,30 +31,36 @@ export const OVERLAY_WRAPPER_STYLES = {
     zIndex: 2,
     transition: 'visibility 0ms linear .13s',
 };
-const MODAL_STYLES = {
-    display: 'grid',
-    zIndex: 2,
-    height: {
-        '': 'max (@cube-visual-viewport-height * .9)',
-        '[data-type="fullscreenTakeover"] | [data-type="panel"]': '@cube-visual-viewport-height @cube-visual-viewport-height',
-        '[data-type="fullscreen"]': '(@cube-visual-viewport-height * .9) (@cube-visual-viewport-height * .9)',
-        '[data-type="fullscreenTakeover"]': '@cube-visual-viewport-height @cube-visual-viewport-height',
-    },
-    width: {
-        width: '288px 90vw',
-    },
-    pointerEvents: 'none',
-    transition: 'opacity .25s linear, visibility 0ms linear, transform .25s ease-in-out',
-    transform: {
-        '': 'translate(0, 0) scale(1, 1)',
-        '[data-type="modal"] & !open': 'translate(0, -3x) scale(1, 1)',
-        '[data-type^="fullscreen"] & !open': 'translate(0, 0) scale(1.02, 1.02)',
-    },
-    opacity: {
-        '': 0,
-        open: 0.9999,
+const ModalWrapperElement = tasty({
+    qa: 'ModalWrapper',
+    styles: OVERLAY_WRAPPER_STYLES,
+});
+const ModalElement = tasty({
+    styles: {
+        display: 'grid',
+        zIndex: 2,
+        height: {
+            '': 'max (@cube-visual-viewport-height * .9)',
+            '[data-type="fullscreenTakeover"] | [data-type="panel"]': '@cube-visual-viewport-height @cube-visual-viewport-height',
+            '[data-type="fullscreen"]': '(@cube-visual-viewport-height * .9) (@cube-visual-viewport-height * .9)',
+            '[data-type="fullscreenTakeover"]': '@cube-visual-viewport-height @cube-visual-viewport-height',
+        },
+        width: {
+            width: '288px 90vw',
+        },
+        pointerEvents: 'none',
+        transition: 'opacity .25s linear, visibility 0ms linear, transform .25s ease-in-out',
+        transform: {
+            '': 'translate(0, 0) scale(1, 1)',
+            '[data-type="modal"] & !open': 'translate(0, -3x) scale(1, 1)',
+            '[data-type^="fullscreen"] & !open': 'translate(0, 0) scale(1.02, 1.02)',
+        },
+        opacity: {
+            '': 0,
+            open: 0.9999,
+        },
     },
-};
+});
 function Modal(props, ref) {
     let { qa, children, onClose, type, styles, ...otherProps } = props;
     let domRef = useDOMRef(ref);
@@ -64,18 +69,13 @@ function Modal(props, ref) {
 }
 let ModalWrapper = forwardRef(function ModalWrapper(props, ref) {
     let { qa, children, isOpen, type, placement, styles, overlayProps, ...otherProps } = props;
-    styles = {
-        ...MODAL_STYLES,
-        ...useContextStyles('Modal', props),
-        ...styles,
-    };
     usePreventScroll();
     let { modalProps } = useModal();
     let viewport = useViewportSize();
     let style = {
         '--cube-visual-viewport-height': viewport.height + 'px',
     };
-    return (_jsx(Base, { qa: "ModalWrapper", mods: { open: isOpen }, "data-type": type, "data-placement": placement, styles: OVERLAY_WRAPPER_STYLES, style: style, children: _jsx(Base, { qa: qa || 'Modal', styles: styles, mods: { open: isOpen }, "data-type": type, "data-placement": placement, ...mergeProps(otherProps, overlayProps, modalProps), ref: ref, children: children }, void 0) }, void 0));
+    return (_jsx(ModalWrapperElement, { mods: { open: isOpen }, "data-type": type, "data-placement": placement, style: style, children: _jsx(ModalElement, { qa: qa || 'Modal', styles: styles, mods: { open: isOpen }, "data-type": type, "data-placement": placement, ...mergeProps(otherProps, overlayProps, modalProps), ref: ref, children: children }, void 0) }, void 0));
 });
 let _Modal = forwardRef(Modal);
 export { _Modal as Modal };

package/es/components/overlays/Modal/OpenTransition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Overlay.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Popover.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -10,25 +10,27 @@ import { mergeProps } from '../../../utils/react';
 import { Overlay } from './Overlay';
 import { forwardRef } from 'react';
 import { useModal, useOverlay } from '@react-aria/overlays';
-import { Base } from '../../Base';
-import { useContextStyles } from '../../../providers/StyleProvider';
-const POPOVER_STYLES = {
-    pointerEvents: 'auto',
-    position: 'absolute',
-    transition: 'opacity .120s linear, visibility 0ms linear, transform .120s ease-in-out',
-    transform: {
-        '': 'scale(1, .9)',
-        open: 'scale(1, 1)',
+import { tasty } from '../../../tasty';
+const PopoverElement = tasty({
+    role: 'presentation',
+    styles: {
+        pointerEvents: 'auto',
+        position: 'absolute',
+        transition: 'opacity .120s linear, visibility 0ms linear, transform .120s ease-in-out',
+        transform: {
+            '': 'scale(1, .9)',
+            open: 'scale(1, 1)',
+        },
+        opacity: {
+            '': 0,
+            open: '.9999',
+        },
+        transformOrigin: {
+            '': 'top center',
+            '[data-placement="top"]': 'bottom center',
+        },
     },
-    opacity: {
-        '': 0,
-        open: '.9999',
-    },
-    transformOrigin: {
-        '': 'top center',
-        '[data-placement="top"]': 'bottom center',
-    },
-};
+});
 function Popover(props, ref) {
     let { qa, style, styles, children, placement, arrowProps, onClose, shouldCloseOnBlur, isKeyboardDismissDisabled, isNonModal, isDismissable = true, ...otherProps } = props;
     return (_jsx(Overlay, { ...otherProps, children: _jsx(PopoverWrapper, { qa: qa, ref: ref, style: style, styles: styles, placement: placement, arrowProps: arrowProps, onClose: onClose, shouldCloseOnBlur: shouldCloseOnBlur, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isNonModal: isNonModal, isDismissable: isDismissable, children: children }, void 0) }, void 0));
@@ -41,14 +43,9 @@ const PopoverWrapper = forwardRef(function PopoverWrapper(props, ref) {
     let { modalProps } = useModal({
         isDisabled: isNonModal,
     });
-    styles = {
-        ...POPOVER_STYLES,
-        ...useContextStyles('Popover', props),
-        ...styles,
-    };
-    return (_jsx(Base, { qa: qa || 'Popover', ...mergeProps(otherProps, overlayProps, modalProps), styles: styles, ref: ref, mods: {
+    return (_jsx(PopoverElement, { qa: qa || 'Popover', ...mergeProps(otherProps, overlayProps, modalProps), styles: styles, ref: ref, mods: {
             open: isOpen,
-        }, "data-placement": placement, role: "presentation", style: style, children: children }, void 0));
+        }, "data-placement": placement, style: style, children: children }, void 0));
 });
 let _Popover = forwardRef(Popover);
 export { _Popover as Popover };

package/es/components/overlays/Modal/Tray.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -13,20 +13,29 @@ import { forwardRef, useEffect, useRef, useState } from 'react';
 import { Underlay } from './Underlay';
 import { useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';
 import { OVERLAY_WRAPPER_STYLES } from './Modal';
-import { Base } from '../../Base';
+import { tasty } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
-import { useContextStyles } from '../../../providers/StyleProvider';
-const TRAY_STYLES = {
-    zIndex: 2,
-    height: 'max (@cube-visual-viewport-height * .9)',
-    width: '288px 90vw',
-    pointerEvents: 'auto',
-    transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
-    opacity: {
-        '': 0,
-        open: '.9999',
+const TrayWrapperElement = tasty({
+    qa: 'TrayWrapper',
+    styles: {
+        ...OVERLAY_WRAPPER_STYLES,
+        placeContent: 'end center',
+        placeItems: 'end center',
     },
-};
+});
+const TrayElement = tasty({
+    styles: {
+        zIndex: 2,
+        height: 'max (@cube-visual-viewport-height * .9)',
+        width: '288px 90vw',
+        pointerEvents: 'auto',
+        transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
+        opacity: {
+            '': 0,
+            open: '.9999',
+        },
+    },
+});
 function Tray(props, ref) {
     let { qa, children, onClose, isFixedHeight, isNonModal, styles, ...otherProps } = props;
     let domRef = useDOMRef(ref);
@@ -39,11 +48,6 @@ let TrayWrapper = forwardRef(function (props, ref) {
     let { modalProps } = useModal({
         isDisabled: isNonModal,
     });
-    styles = {
-        ...TRAY_STYLES,
-        ...useContextStyles('Tray', props),
-        ...styles,
-    };
     // We need to measure the window's height in JS rather than using percentages in CSS
     // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
     // does not work properly because there is nothing to base the percentage on.
@@ -75,13 +79,9 @@ let TrayWrapper = forwardRef(function (props, ref) {
         '--cube-visual-viewport-height': height + 'px',
     };
     let domProps = mergeProps(otherProps, overlayProps);
-    return (_jsx(Base, { qa: "TrayWrapper", mods: {
+    return (_jsx(TrayWrapperElement, { mods: {
             open: isOpen,
-        }, styles: {
-            ...OVERLAY_WRAPPER_STYLES,
-            placeContent: 'end center',
-            placeItems: 'end center',
-        }, style: wrapperStyle, children: _jsx(Base, { qa: qa || 'Tray', styles: styles, mods: {
+        }, style: wrapperStyle, children: _jsx(TrayElement, { qa: qa || 'Tray', styles: styles, mods: {
                 open: isOpen,
                 'fixed-height': isFixedHeight,
             }, ...domProps, ...modalProps, ref: ref, children: children }, void 0) }, void 0));

package/es/components/overlays/Modal/Underlay.js

@@ -1,44 +1,38 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Base } from '../../Base';
-import { useContextStyles } from '../../../providers/StyleProvider';
-const UNDERLAY_STYLES = {
-    position: 'fixed',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    zIndex: 1,
-    transitionDelay: '0ms',
-    // visibility: {
-    //   '': 'hidden',
-    //   open: 'visible',
-    // },
-    opacity: {
-        '': 0,
-        open: 0.9999,
+import { tasty } from '../../../tasty';
+const UnderlayElement = tasty({
+    qa: 'Underlay',
+    styles: {
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: 1,
+        transitionDelay: '0ms',
+        opacity: {
+            '': 0,
+            open: 0.9999,
+        },
+        pointerEvents: {
+            '': 'none',
+            open: 'auto',
+        },
+        fill: '#dark.30',
+        overflow: 'hidden',
+        transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
     },
-    pointerEvents: {
-        '': 'none',
-        open: 'auto',
-    },
-    fill: '#dark.30',
-    overflow: 'hidden',
-    transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
-};
+});
 const Underlay = ({ isOpen, ...otherProps }, ref) => {
-    const styles = {
-        ...UNDERLAY_STYLES,
-        ...useContextStyles('Underlay'),
-    };
-    return (_jsx(Base, { ref: ref, "data-qa": "Underlay", styles: styles, mods: {
+    return (_jsx(UnderlayElement, { ref: ref, mods: {
             open: isOpen,
         }, ...otherProps }, void 0));
 };

package/es/components/overlays/Modal/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */