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

package/cjs/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.
  */
 
@@ -17,71 +17,70 @@ const focus_1 = require("@react-aria/focus");
 const react_1 = require("react");
 const dialog_1 = require("@react-aria/dialog");
 const i18n_1 = require("@react-aria/i18n");
+const Base_1 = require("../../Base");
 const icons_1 = require("@ant-design/icons");
 const tasty_1 = require("../../../tasty");
 const react_2 = require("../../../utils/react");
+const StyleProvider_1 = require("../../../providers/StyleProvider");
 const STYLES_LIST = [...tasty_1.BASE_STYLES, ...tasty_1.DIMENSION_STYLES, ...tasty_1.BLOCK_STYLES];
-const DialogElement = (0, tasty_1.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 = {
@@ -106,9 +105,14 @@ const intlMessages = {
  */
 exports.Dialog = (0, react_1.forwardRef)(function Dialog(props, ref) {
     let { type = 'modal', ...contextProps } = (0, context_1.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 = (0, tasty_1.extractStyles)(otherProps, STYLES_LIST);
+    const styles = {
+        ...DEFAULT_STYLES,
+        ...(0, StyleProvider_1.useContextStyles)('Dialog', props),
+        ...(0, tasty_1.extractStyles)(otherProps, STYLES_LIST),
+        '@dialog-size': `${sizePxMap[size] || 288}px`,
+    };
     let formatMessage = (0, i18n_1.useMessageFormatter)(intlMessages);
     let domRef = (0, utils_1.useDOMRef)(ref);
     let { dialogProps, titleProps } = (0, dialog_1.useDialog)((0, react_2.mergeProps)(contextProps, props), domRef);
@@ -159,10 +163,8 @@ exports.Dialog = (0, react_1.forwardRef)(function Dialog(props, ref) {
             },
         },
     };
-    return ((0, jsx_runtime_1.jsx)(focus_1.FocusScope, { contain: true, restoreFocus: true, children: (0, jsx_runtime_1.jsxs)(DialogElement, { "data-id": "Dialog", "data-qa": qa || 'Dialog', styles: styles, as: "section", ...dialogProps, mods: {
+    return ((0, jsx_runtime_1.jsx)(focus_1.FocusScope, { contain: true, restoreFocus: true, children: (0, jsx_runtime_1.jsxs)(Base_1.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, (0, jsx_runtime_1.jsxs)(react_2.SlotProvider, { slots: slots, children: [isDismissable && ((0, jsx_runtime_1.jsx)(actions_1.Button, { qa: "ModalCloseButton", type: "neutral", styles: CLOSE_BUTTON_STYLES, icon: closeIcon || (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0), label: formatMessage('dismiss'), onPress: () => onDismiss && onDismiss() }, void 0)), children] }, void 0)] }, void 0) }, void 0));
 });
 

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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.
  */
 
@@ -15,8 +15,9 @@ const Overlay_1 = require("./Overlay");
 const react_1 = require("react");
 const Underlay_1 = require("./Underlay");
 const overlays_1 = require("@react-aria/overlays");
-const tasty_1 = require("../../../tasty");
+const Base_1 = require("../../Base");
 const react_2 = require("../../../utils/react");
+const StyleProvider_1 = require("../../../providers/StyleProvider");
 exports.OVERLAY_WRAPPER_STYLES = {
     position: 'fixed',
     display: 'grid',
@@ -34,36 +35,30 @@ exports.OVERLAY_WRAPPER_STYLES = {
     zIndex: 2,
     transition: 'visibility 0ms linear .13s',
 };
-const ModalWrapperElement = (0, tasty_1.tasty)({
-    qa: 'ModalWrapper',
-    styles: exports.OVERLAY_WRAPPER_STYLES,
-});
-const ModalElement = (0, tasty_1.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 = (0, utils_1.useDOMRef)(ref);
@@ -72,13 +67,18 @@ function Modal(props, ref) {
 }
 let ModalWrapper = (0, react_1.forwardRef)(function ModalWrapper(props, ref) {
     let { qa, children, isOpen, type, placement, styles, overlayProps, ...otherProps } = props;
+    styles = {
+        ...MODAL_STYLES,
+        ...(0, StyleProvider_1.useContextStyles)('Modal', props),
+        ...styles,
+    };
     (0, overlays_1.usePreventScroll)();
     let { modalProps } = (0, overlays_1.useModal)();
     let viewport = (0, utils_2.useViewportSize)();
     let style = {
         '--cube-visual-viewport-height': viewport.height + 'px',
     };
-    return ((0, jsx_runtime_1.jsx)(ModalWrapperElement, { mods: { open: isOpen }, "data-type": type, "data-placement": placement, style: style, children: (0, jsx_runtime_1.jsx)(ModalElement, { qa: qa || 'Modal', styles: styles, mods: { open: isOpen }, "data-type": type, "data-placement": placement, ...(0, react_2.mergeProps)(otherProps, overlayProps, modalProps), ref: ref, children: children }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "ModalWrapper", mods: { open: isOpen }, "data-type": type, "data-placement": placement, styles: exports.OVERLAY_WRAPPER_STYLES, style: style, children: (0, jsx_runtime_1.jsx)(Base_1.Base, { qa: qa || 'Modal', styles: styles, mods: { open: isOpen }, "data-type": type, "data-placement": placement, ...(0, react_2.mergeProps)(otherProps, overlayProps, modalProps), ref: ref, children: children }, void 0) }, void 0));
 });
 let _Modal = (0, react_1.forwardRef)(Modal);
 exports.Modal = _Modal;

package/cjs/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/cjs/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.
  */
 

package/cjs/components/overlays/Modal/Popover.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,27 +13,25 @@ const react_1 = require("../../../utils/react");
 const Overlay_1 = require("./Overlay");
 const react_2 = require("react");
 const overlays_1 = require("@react-aria/overlays");
-const tasty_1 = require("../../../tasty");
-const PopoverElement = (0, tasty_1.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',
-        },
+const Base_1 = require("../../Base");
+const StyleProvider_1 = require("../../../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)',
     },
-});
+    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 ((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { ...otherProps, children: (0, jsx_runtime_1.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));
@@ -46,9 +44,14 @@ const PopoverWrapper = (0, react_2.forwardRef)(function PopoverWrapper(props, re
     let { modalProps } = (0, overlays_1.useModal)({
         isDisabled: isNonModal,
     });
-    return ((0, jsx_runtime_1.jsx)(PopoverElement, { qa: qa || 'Popover', ...(0, react_1.mergeProps)(otherProps, overlayProps, modalProps), styles: styles, ref: ref, mods: {
+    styles = {
+        ...POPOVER_STYLES,
+        ...(0, StyleProvider_1.useContextStyles)('Popover', props),
+        ...styles,
+    };
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: qa || 'Popover', ...(0, react_1.mergeProps)(otherProps, overlayProps, modalProps), styles: styles, ref: ref, mods: {
             open: isOpen,
-        }, "data-placement": placement, style: style, children: children }, void 0));
+        }, "data-placement": placement, role: "presentation", style: style, children: children }, void 0));
 });
 let _Popover = (0, react_2.forwardRef)(Popover);
 exports.Popover = _Popover;

package/cjs/components/overlays/Modal/Tray.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.
  */
 
@@ -16,29 +16,20 @@ const react_1 = require("react");
 const Underlay_1 = require("./Underlay");
 const overlays_1 = require("@react-aria/overlays");
 const Modal_1 = require("./Modal");
-const tasty_1 = require("../../../tasty");
+const Base_1 = require("../../Base");
 const react_2 = require("../../../utils/react");
-const TrayWrapperElement = (0, tasty_1.tasty)({
-    qa: 'TrayWrapper',
-    styles: {
-        ...Modal_1.OVERLAY_WRAPPER_STYLES,
-        placeContent: 'end center',
-        placeItems: 'end center',
+const StyleProvider_1 = require("../../../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 TrayElement = (0, tasty_1.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 = (0, utils_1.useDOMRef)(ref);
@@ -51,6 +42,11 @@ let TrayWrapper = (0, react_1.forwardRef)(function (props, ref) {
     let { modalProps } = (0, overlays_1.useModal)({
         isDisabled: isNonModal,
     });
+    styles = {
+        ...TRAY_STYLES,
+        ...(0, StyleProvider_1.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.
@@ -82,9 +78,13 @@ let TrayWrapper = (0, react_1.forwardRef)(function (props, ref) {
         '--cube-visual-viewport-height': height + 'px',
     };
     let domProps = (0, react_2.mergeProps)(otherProps, overlayProps);
-    return ((0, jsx_runtime_1.jsx)(TrayWrapperElement, { mods: {
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "TrayWrapper", mods: {
             open: isOpen,
-        }, style: wrapperStyle, children: (0, jsx_runtime_1.jsx)(TrayElement, { qa: qa || 'Tray', styles: styles, mods: {
+        }, styles: {
+            ...Modal_1.OVERLAY_WRAPPER_STYLES,
+            placeContent: 'end center',
+            placeItems: 'end center',
+        }, style: wrapperStyle, children: (0, jsx_runtime_1.jsx)(Base_1.Base, { qa: qa || 'Tray', styles: styles, mods: {
                 open: isOpen,
                 'fixed-height': isFixedHeight,
             }, ...domProps, ...modalProps, ref: ref, children: children }, void 0) }, void 0));

package/cjs/components/overlays/Modal/Underlay.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.
  */
 
@@ -10,32 +10,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Underlay = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const tasty_1 = require("../../../tasty");
-const UnderlayElement = (0, tasty_1.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',
+const Base_1 = require("../../Base");
+const StyleProvider_1 = require("../../../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,
     },
-});
+    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) => {
-    return ((0, jsx_runtime_1.jsx)(UnderlayElement, { ref: ref, mods: {
+    const styles = {
+        ...UNDERLAY_STYLES,
+        ...(0, StyleProvider_1.useContextStyles)('Underlay'),
+    };
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ref: ref, "data-qa": "Underlay", styles: styles, mods: {
             open: isOpen,
         }, ...otherProps }, void 0));
 };

package/cjs/components/overlays/Modal/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/cjs/components/overlays/Notification/Notification.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.
  */
 
@@ -15,61 +15,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const Action_1 = require("../../actions/Action");
 const Card_1 = require("../../content/Card/Card");
 const Block_1 = require("../../Block");
+const Flex_1 = require("../../layout/Flex");
 const themes_1 = __importDefault(require("../../../data/themes"));
 const icons_1 = require("@ant-design/icons");
-const tasty_1 = require("../../../tasty");
-const NotificationElement = (0, tasty_1.tasty)(Card_1.Card, {
-    role: 'region',
-    styles: {
-        display: 'grid',
-        color: '#dark',
-        padding: '.5x',
-        shadow: '0 5px 15px #dark.10',
-        border: false,
-        margin: '1x bottom',
-        radius: '1.5r',
-        gridColumns: 'auto 1fr auto',
-        placeItems: 'center start',
-        gap: '2x',
-        preset: 't3',
-        Icon: {
-            display: 'flex',
-            radius: '1r',
-            width: '5x',
-            height: '5x',
-            placeContent: 'center',
-            placeItems: 'center',
-            preset: 't2',
-            color: {
-                '': '#dark.75',
-                ...Object.keys(themes_1.default).reduce((map, theme) => {
-                    map[`[data-theme="${theme}"]`] = themes_1.default[theme].color;
-                    return map;
-                }, {}),
-            },
-            fill: {
-                '': '#clear',
-                ...Object.keys(themes_1.default).reduce((map, theme) => {
-                    map[`[data-theme="${theme}"]`] = themes_1.default[theme].fill;
-                    return map;
-                }, {}),
-            },
-        },
-    },
-});
-const CloseButton = (0, tasty_1.tasty)(Action_1.Action, {
-    styles: {
-        color: { '': '#dark.75', hovered: '#purple' },
-        width: '5x',
-        height: '5x',
-        label: 'Close',
-    },
-});
 function Notification(allProps) {
-    let { theme, type, children, onClose, ...props } = allProps;
-    theme = theme || type || 'note';
+    let { type, children, onClose, ...props } = allProps;
+    type = type || 'note';
     let Icon;
-    switch (theme) {
+    switch (type) {
         case 'success':
             Icon = icons_1.CheckOutlined;
             break;
@@ -80,7 +33,11 @@ function Notification(allProps) {
             Icon = icons_1.InfoOutlined;
             break;
     }
-    return ((0, jsx_runtime_1.jsxs)(NotificationElement, { ...props, "data-theme": theme, children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Icon", children: (0, jsx_runtime_1.jsx)(Icon, {}, void 0) }, void 0), (0, jsx_runtime_1.jsx)(Block_1.Block, { children: children }, void 0), (0, jsx_runtime_1.jsx)(CloseButton, { onPress: onClose, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0) }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { display: "grid", role: "region", color: "#dark", padding: ".5x", shadow: "0 5px 15px #dark.10", border: false, margin: "1x bottom", radius: "1.5r", styles: {
+            gridColumns: 'auto 1fr auto',
+            placeItems: 'center start',
+            gap: '2x',
+        }, ...props, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { radius: "1r", width: "5x", height: "5x", placeContent: "center", placeItems: "center", fill: themes_1.default[type] ? themes_1.default[type].fill : '#clear', color: themes_1.default[type] ? themes_1.default[type].color : '#dark.75', children: (0, jsx_runtime_1.jsx)(Icon, { style: { fontSize: 16 } }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(Block_1.Block, { children: children }, void 0), (0, jsx_runtime_1.jsx)(Action_1.Action, { color: { '': '#dark.75', hovered: '#purple' }, width: "5x", height: "5x", onPress: onClose, label: "Close", children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0) }, void 0)] }, void 0));
 }
 exports.Notification = Notification;