@cube-dev/ui-kit 0.0.0-canary-b916e8d → 0.0.0-canary-5cc6499

package/es/components/organisms/FileTabs/FileTabs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -13,21 +13,13 @@ import { Action } from '../../actions/Action';
 import { Space } from '../../layout/Space';
 import { Flex } from '../../layout/Flex';
 import { tasty } from '../../../tasty';
-import styled from 'styled-components';
-import { Flow } from '../../layout/Flow';
 const FileTabsContext = createContext({
     addTab() { },
     removeTab() { },
     setTab() { },
     setDirtyTab() { },
 });
-const TabsPanelElement = tasty(Space, {
-    styles: {
-        gap: '.5x',
-        flexShrink: 0,
-    },
-});
-const StyledTabsPanelElement = styled(TabsPanelElement) `
+const TABS_PANEL_CSS = `
   position: relative;
   overflow: auto hidden;
   top: 1px;
@@ -52,14 +44,7 @@ const StyledTabsPanelElement = styled(TabsPanelElement) `
     height: 3px;
   }
 `;
-const TabsContainerElement = tasty(Flow, {
-    styles: {
-        flow: 'column',
-        height: 'max 100%',
-        width: 'max 100%',
-    },
-});
-const StyledTabsContainerElement = styled(TabsContainerElement) `
+const TABS_CONTAINER_CSS = `
   position: relative;
 
   &::before {
@@ -72,7 +57,7 @@ const StyledTabsContainerElement = styled(TabsContainerElement) `
     pointer-events: none;
     width: 32px;
     height: 37px;
-    transition: all 0.15s linear;
+    transition: all .15s linear;
     background-image: linear-gradient(
       to left,
       rgba(255, 255, 255, 0),
@@ -91,7 +76,7 @@ const StyledTabsContainerElement = styled(TabsContainerElement) `
     width: 32px;
     height: 37px;
     pointer-events: none;
-    transition: all 0.15s linear;
+    transition: all .15s linear;
     background-image: linear-gradient(
       to right,
       rgba(255, 255, 255, 0),
@@ -100,8 +85,7 @@ const StyledTabsContainerElement = styled(TabsContainerElement) `
     z-index: 10;
   }
 
-  &[data-is-left-fade]::before,
-  &[data-is-right-fade]::after {
+  &[data-is-left-fade]::before, &[data-is-right-fade]::after {
     opacity: 1;
   }
 `;
@@ -118,40 +102,50 @@ const DirtyBadge = tasty({
         radius: 'round',
     },
 });
-const TabElement = tasty(Action, {
-    styles: {
-        radius: '1r 1r 0 0',
-        padding: '1x 1.5x',
-        border: {
-            '': 'left top right #clear',
-            disabled: 'left top right rgb(227, 227, 233)',
-        },
-        fill: {
-            '': '#dark.04',
-            hovered: '#dark.08',
-            'disabled, disabled & hover': '#white',
-        },
-        color: {
-            '': '#dark.75',
-            'disabled, hovered, hovered & disabled': '#dark',
-        },
-        cursor: {
-            '': 'pointer',
-            disabled: 'default',
-        },
-        fontWeight: 500,
-        opacity: 1,
-        preset: 'default',
-        outline: {
-            '': 'inset #purple-03.0',
-            'focused & focus-visible': 'inset #purple-03',
-        },
+const TAB_STYLES = {
+    radius: '1r 1r 0 0',
+    padding: '1x 1.5x',
+    border: {
+        '': 'left top right #clear',
+        disabled: 'left top right rgb(227, 227, 233)',
     },
-});
-const StyledTabElement = styled(TabElement) `
+    fill: {
+        '': '#dark.04',
+        hovered: '#dark.08',
+        'disabled, disabled & hover': '#white',
+    },
+    color: {
+        '': '#dark.75',
+        'disabled, hovered, hovered & disabled': '#dark',
+    },
+    cursor: {
+        '': 'pointer',
+        disabled: 'default',
+    },
+    fontWeight: 500,
+    opacity: 1,
+    preset: 'default',
+    outline: {
+        '': 'inset #purple-03.0',
+        'focused & focus-visible': 'inset #purple-03',
+    },
+};
+const CLOSE_STYLES = {
+    color: {
+        '': '#dark.50',
+        hovered: '#dark',
+    },
+    padding: '0 .25x',
+    outline: {
+        '': '#purple-03.0',
+        'focused & focus-visible': '#purple-03',
+    },
+    radius: '1r',
+};
+const TAB_CSS = `
   margin-bottom: var(--border-width);
   transform: translate(0, 0);
-  transition: color 0.2s linear, background-color 0.2s linear;
+  transition: color .2s linear, background-color .2s linear;
 
   &[disabled] {
     transform: translate(0, var(--border-width));
@@ -180,22 +174,8 @@ const StyledTabElement = styled(TabElement) `
     }
   }
 `;
-const CloseButton = tasty({
-    styles: {
-        color: {
-            '': '#dark.50',
-            hovered: '#dark',
-        },
-        padding: '0 .25x',
-        outline: {
-            '': '#purple-03.0',
-            'focused & focus-visible': '#purple-03',
-        },
-        radius: '1r',
-    },
-});
 const Tab = ({ isDirty, isDisabled, children, isClosable, onClose, ...props }) => {
-    return (_jsx(TabElement, { className: isDirty ? 'file-tab--dirty' : '', isDisabled: isDisabled, ...props, children: _jsxs(Space, { gap: ".75x", children: [_jsx(Block, { children: children }, void 0), (isClosable || isDirty) && (_jsxs(Flex, { placeItems: "center", style: { position: 'relative' }, children: [isClosable ? (_jsx(CloseButton, { onPress: onClose, className: "file-tab-close", children: _jsx(CloseOutlined, {}, void 0) }, void 0)) : (_jsx("div", {}, void 0)), isDirty ? _jsx(DirtyBadge, { className: "file-tab-dirty-badge" }, void 0) : null] }, void 0))] }, void 0) }, void 0));
+    return (_jsx(Action, { className: isDirty ? 'file-tab--dirty' : '', css: TAB_CSS, styles: TAB_STYLES, isDisabled: isDisabled, ...props, children: _jsxs(Space, { gap: ".75x", children: [_jsx(Block, { children: children }, void 0), (isClosable || isDirty) && (_jsxs(Flex, { placeItems: "center", style: { position: 'relative' }, children: [isClosable ? (_jsx(Action, { onPress: onClose, className: "file-tab-close", styles: CLOSE_STYLES, children: _jsx(CloseOutlined, {}, void 0) }, void 0)) : (_jsx("div", {}, void 0)), isDirty ? _jsx(DirtyBadge, { className: "file-tab-dirty-badge" }, void 0) : null] }, void 0))] }, void 0) }, void 0));
 };
 export function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, isClosable = true, children, ...props }) {
     const tabsRef = useRef(null);
@@ -289,13 +269,13 @@ export function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClic
         setTab(tab.id);
         onTabClick && onTabClick(tab.id);
     }
-    return (_jsx(StyledTabsContainerElement, { "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, ...props, children: _jsxs(FileTabsContext.Provider, { value: {
+    return (_jsx(Flex, { flow: "column", height: "max 100%", width: "max 100%", "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, css: TABS_CONTAINER_CSS, ...props, children: _jsxs(FileTabsContext.Provider, { value: {
                 addTab,
                 setTab,
                 removeTab,
                 setDirtyTab,
                 currentTab: activeKey,
-            }, children: [_jsx(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
+            }, children: [_jsx(Space, { ref: tabsRef, gap: ".5x", flexShrink: 0, css: TABS_PANEL_CSS, children: tabs.map((tab) => {
                         return (_jsx(Tab, { onPress: () => onPress(tab), onClose: () => isClosable && handleClose(tab), isClosable: isClosable, isDisabled: tab.id === activeKey || false, isDirty: tab.isDirty, children: tab.title }, tab.id));
                     }) }, void 0), _jsx(Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children }, void 0)] }, void 0) }, void 0));
 }

package/es/components/organisms/Modal/Modal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -14,71 +14,70 @@ 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, tasty, } from '../../../tasty';
+import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, extractStyles, } from '../../../tasty';
 import { mergeProps, SlotProvider } from '../../../utils/react';
+import { useContextStyles } from '../../../providers/StyleProvider';
 const STYLES_LIST = [...BASE_STYLES, ...DIMENSION_STYLES, ...BLOCK_STYLES];
-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',
+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',
+    },
+    '@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 = {
@@ -103,9 +102,14 @@ 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, closeButtonStyles, ...otherProps } = props;
+    let { qa, children, size = 'S', isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, ...otherProps } = props;
     size = sizeMap[size.toUpperCase()] || size;
-    const styles = extractStyles(otherProps, STYLES_LIST);
+    const styles = {
+        ...DEFAULT_STYLES,
+        ...useContextStyles('Dialog', props),
+        ...extractStyles(otherProps, STYLES_LIST),
+        '@dialog-size': `${sizePxMap[size] || 288}px`,
+    };
     let formatMessage = useMessageFormatter(intlMessages);
     let domRef = useDOMRef(ref);
     let { dialogProps, titleProps } = useDialog(mergeProps(contextProps, props), domRef);
@@ -156,10 +160,8 @@ export const Dialog = forwardRef(function Dialog(props, ref) {
             },
         },
     };
-    return (_jsx(FocusScope, { contain: true, restoreFocus: true, children: _jsxs(DialogElement, { "data-id": "Dialog", "data-qa": qa || 'Dialog', styles: styles, as: "section", ...dialogProps, mods: {
+    return (_jsx(FocusScope, { contain: true, restoreFocus: true, children: _jsxs(Base, { "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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -12,8 +12,9 @@ import { Overlay } from './Overlay';
 import { forwardRef } from 'react';
 import { Underlay } from './Underlay';
 import { useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';
-import { tasty } from '../../../tasty';
+import { Base } from '../../Base';
 import { mergeProps } from '../../../utils/react';
+import { useContextStyles } from '../../../providers/StyleProvider';
 export const OVERLAY_WRAPPER_STYLES = {
     position: 'fixed',
     display: 'grid',
@@ -31,36 +32,30 @@ export const OVERLAY_WRAPPER_STYLES = {
     zIndex: 2,
     transition: 'visibility 0ms linear .13s',
 };
-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,
-        },
+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,
+    },
+};
 function Modal(props, ref) {
     let { qa, children, onClose, type, styles, ...otherProps } = props;
     let domRef = useDOMRef(ref);
@@ -69,13 +64,18 @@ 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(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));
+    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));
 });
 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */