@cube-dev/ui-kit 0.9.11 → 0.10.2

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -9,48 +9,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogForm = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const DialogContainer_1 = require("./DialogContainer");
 const Dialog_1 = require("./Dialog");
 const Title_1 = require("../../content/Title");
 const Form_1 = require("../../forms/Form/Form");
-const useForm_1 = require("../../forms/Form/useForm");
+const Form_2 = require("../../forms/Form");
 const Content_1 = require("../../content/Content");
 const Submit_1 = require("../../actions/Button/Submit");
 const actions_1 = require("../../actions");
-const ButtonGroup_1 = require("../../actions/ButtonGroup/ButtonGroup");
+const actions_2 = require("../../actions");
 const Header_1 = require("../../content/Header");
-const DialogForm = (props, ref) => {
-    let { qa, name, form, defaultValues, onDismiss, onSubmit, onSubmitFailed, onValuesChange, labelStyles, labelPosition, requiredMark, isRequired, necessityIndicator, necessityLabel, isReadOnly, validationState, validateTrigger, children, danger, noActions, submitProps, cancelProps, preserve, title, size, closeIcon, } = props;
-    [form] = (0, useForm_1.useForm)(form);
-    const [open, setOpen] = (0, react_1.useState)(false);
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        open() {
-            setOpen(true);
-        },
-        close() {
-            setOpen(false);
-        },
-    }));
+const context_1 = require("./context");
+/**
+ * DialogForms are a specific type of Dialog. They contain forms to fill.
+ */
+const DialogForm = function DialogForm(props) {
+    let { qa, name, form, defaultValues, onDismiss, onSubmit, onSubmitFailed, onValuesChange, labelStyles, labelPosition, requiredMark, isRequired, necessityIndicator, necessityLabel, isReadOnly, validationState, validateTrigger, children, danger, noActions, submitProps, cancelProps, preserve, title, size, closeIcon, ...dialogProps } = props;
+    [form] = (0, Form_2.useForm)(form);
+    const { onClose } = (0, context_1.useDialogContext)();
     function onLocalDismiss() {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-        form === null || form === void 0 ? void 0 : form.resetFields();
-        setOpen(false);
+        if (!preserve) {
+            form === null || form === void 0 ? void 0 : form.resetFields();
+        }
     }
-    return ((0, jsx_runtime_1.jsx)(DialogContainer_1.DialogContainer, { onDismiss: onLocalDismiss, isDismissable: true, children: open && ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { qa: `${qa || ''}Dialog`, size: size, closeIcon: closeIcon, children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { children: title }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(Content_1.Content, { children: (0, jsx_runtime_1.jsxs)(Form_1.Form, { qa: qa || 'DialogForm', form: form, name: name, onSubmit: async (data) => {
-                            await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(data));
-                            setOpen(false);
-                            if (!preserve && form) {
-                                form.resetFields();
-                            }
-                        }, onSubmitFailed: onSubmitFailed, defaultValues: defaultValues, onValuesChange: onValuesChange, labelStyles: labelStyles, labelPosition: labelPosition, requiredMark: requiredMark, isRequired: isRequired, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isReadOnly: isReadOnly, validationState: validationState, validateTrigger: validateTrigger, children: [typeof children === 'function'
-                                ? children(onLocalDismiss)
-                                : children, !noActions ? ((0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(Submit_1.Submit, { qa: `${qa || ''}SubmitButton`, theme: danger ? 'danger' : undefined, label: "Submit", ...(submitProps || {}) }, void 0), (0, jsx_runtime_1.jsx)(actions_1.Button, { qa: `${qa || ''}CancelButton`, onPress: onLocalDismiss, label: "Cancel", ...(cancelProps || {}) }, void 0)] }, void 0)) : undefined] }, void 0) }, void 0)] }, void 0)) }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { qa: `${qa || ''}Dialog`, size: size, closeIcon: closeIcon, ...dialogProps, children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { children: title }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(Content_1.Content, { children: (0, jsx_runtime_1.jsxs)(Form_1.Form, { qa: qa || 'DialogForm', form: form, name: name, onSubmit: async (data) => {
+                        await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(data));
+                        onClose === null || onClose === void 0 ? void 0 : onClose();
+                        if (!preserve) {
+                            form === null || form === void 0 ? void 0 : form.resetFields();
+                        }
+                    }, onSubmitFailed: onSubmitFailed, defaultValues: defaultValues, onValuesChange: onValuesChange, labelStyles: labelStyles, labelPosition: labelPosition, requiredMark: requiredMark, isRequired: isRequired, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isReadOnly: isReadOnly, validationState: validationState, validateTrigger: validateTrigger, children: [typeof children === 'function' ? children(onLocalDismiss) : children, !noActions ? ((0, jsx_runtime_1.jsxs)(actions_2.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(Submit_1.Submit, { qa: `${qa || ''}SubmitButton`, theme: danger ? 'danger' : undefined, label: "Submit", ...(submitProps || {}) }, void 0), (0, jsx_runtime_1.jsx)(actions_1.Button, { qa: `${qa || ''}CancelButton`, onPress: onLocalDismiss, label: "Cancel", ...(cancelProps || {}) }, void 0)] }, void 0)) : undefined] }, void 0) }, void 0)] }, void 0));
 };
-/**
- * DialogForms are a specific type of Dialog. They contain forms to fill.
- */
-let _DialogForm = (0, react_1.forwardRef)(DialogForm);
-exports.DialogForm = _DialogForm;
+exports.DialogForm = DialogForm;
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -38,12 +38,11 @@ function DialogTrigger(props) {
     let onExiting = () => (isExiting.current = true);
     let onExited = () => (isExiting.current = false);
     wasOpen.current = state.isOpen;
-    // eslint-disable-next-line arrow-body-style
     (0, react_1.useEffect)(() => {
         return () => {
-            if ((wasOpen.current || isExiting.current)
-                && type !== 'popover'
-                && type !== 'tray') {
+            if ((wasOpen.current || isExiting.current) &&
+                type !== 'popover' &&
+                type !== 'tray') {
                 console.warn('CubeUIKit: A DialogTrigger unmounted while open. This is likely due to being placed within a trigger that unmounts or inside a conditional. Consider using a DialogContainer instead.');
             }
         };
@@ -97,7 +96,7 @@ function PopoverTrigger(allProps) {
         ref: targetRef ? undefined : triggerRef,
     };
     let overlay = ((0, jsx_runtime_1.jsx)(Modal_1.Popover, { isOpen: state.isOpen, style: popoverProps.style, ref: overlayRef, onClose: onClose, placement: placement, arrowProps: arrowProps, isKeyboardDismissDisabled: isKeyboardDismissDisabled, hideArrow: hideArrow, children: typeof content === 'function' ? content(state.close) : content }, void 0));
-    return ((0, jsx_runtime_1.jsx)(DialogTriggerBase, { type: "popover", state: state, triggerProps: triggerPropsWithRef, dialogProps: overlayProps, trigger: trigger, overlay: overlay }, void 0));
+    return ((0, jsx_runtime_1.jsx)(DialogTriggerBase, { type: "popover", state: state, triggerProps: triggerPropsWithRef, dialogProps: overlayProps, trigger: trigger, onClose: onClose, overlay: overlay }, void 0));
 }
 function DialogTriggerBase(props) {
     let { type, state, onClose, isDismissable, dialogProps = {}, triggerProps = {}, overlay, trigger, } = props;
@@ -107,10 +106,10 @@ function DialogTriggerBase(props) {
         isDismissable,
         ...dialogProps,
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interactions_1.PressResponder, { ...triggerProps, onPress: state.toggle, isPressed: state.isOpen
-                    && type !== 'modal'
-                    && type !== 'fullscreen'
-                    && type !== 'fullscreenTakeover', children: trigger }, void 0), (0, jsx_runtime_1.jsx)(context_1.DialogContext.Provider, { value: context, children: overlay }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interactions_1.PressResponder, { ...triggerProps, onPress: state.toggle, isPressed: state.isOpen &&
+                    type !== 'modal' &&
+                    type !== 'fullscreen' &&
+                    type !== 'fullscreenTakeover', children: trigger }, void 0), (0, jsx_runtime_1.jsx)(context_1.DialogContext.Provider, { value: context, children: overlay }, void 0)] }, void 0));
 }
 
         

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

@@ -1,14 +1,24 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogContext = void 0;
+exports.useDialogContext = exports.DialogContext = void 0;
 const react_1 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
 exports.DialogContext = (0, react_1.createContext)({});
+function useDialogContext() {
+    const dialogContext = (0, react_1.useContext)(exports.DialogContext);
+    (0, tiny_invariant_1.default)(dialogContext !== null, '');
+    return dialogContext;
+}
+exports.useDialogContext = useDialogContext;
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * 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.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -15,8 +15,7 @@ const Overlay_1 = require("./Overlay");
 const react_1 = require("react");
 const Underlay_1 = require("./Underlay");
 const overlays_1 = require("@react-aria/overlays");
-const Base_1 = require("../../Base");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
+const tasty_1 = require("../../../tasty");
 const react_2 = require("../../../utils/react");
 exports.OVERLAY_WRAPPER_STYLES = {
     position: 'fixed',
@@ -35,30 +34,36 @@ exports.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 = (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,
+        },
     },
-};
+});
 function Modal(props, ref) {
     let { qa, children, onClose, type, styles, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
@@ -67,18 +72,13 @@ 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, StylesProvider_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)(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));
+    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));
 });
 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.9.11
+ * @cube-dev/ui-kit v0.10.2
  * 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.9.11
+ * @cube-dev/ui-kit v0.10.2
  * 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.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -13,30 +13,32 @@ const react_1 = require("../../../utils/react");
 const Overlay_1 = require("./Overlay");
 const react_2 = require("react");
 const overlays_1 = require("@react-aria/overlays");
-const Base_1 = require("../../Base");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-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)',
+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',
+        },
     },
-    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));
 }
-const PopoverWrapper = (0, react_2.forwardRef)((props, ref) => {
+const PopoverWrapper = (0, react_2.forwardRef)(function PopoverWrapper(props, ref) {
     let { qa, children, placement = 'bottom', arrowProps, isOpen, style, styles, shouldCloseOnBlur, isKeyboardDismissDisabled, isNonModal, isDismissable, ...otherProps } = props;
     let { overlayProps } = (0, overlays_1.useOverlay)({ ...props, isDismissable: isDismissable && isOpen }, 
     // @ts-ignore
@@ -44,14 +46,9 @@ const PopoverWrapper = (0, react_2.forwardRef)((props, ref) => {
     let { modalProps } = (0, overlays_1.useModal)({
         isDisabled: isNonModal,
     });
-    styles = {
-        ...POPOVER_STYLES,
-        ...(0, StylesProvider_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: {
+    return ((0, jsx_runtime_1.jsx)(PopoverElement, { qa: qa || 'Popover', ...(0, react_1.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 = (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.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -16,20 +16,29 @@ const react_1 = require("react");
 const Underlay_1 = require("./Underlay");
 const overlays_1 = require("@react-aria/overlays");
 const Modal_1 = require("./Modal");
-const Base_1 = require("../../Base");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
+const tasty_1 = require("../../../tasty");
 const react_2 = require("../../../utils/react");
-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 = (0, tasty_1.tasty)({
+    qa: 'TrayWrapper',
+    styles: {
+        ...Modal_1.OVERLAY_WRAPPER_STYLES,
+        placeContent: 'end center',
+        placeItems: 'end center',
     },
-};
+});
+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);
@@ -42,11 +51,6 @@ let TrayWrapper = (0, react_1.forwardRef)(function (props, ref) {
     let { modalProps } = (0, overlays_1.useModal)({
         isDisabled: isNonModal,
     });
-    styles = {
-        ...TRAY_STYLES,
-        ...(0, StylesProvider_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.
@@ -78,13 +82,9 @@ 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)(Base_1.Base, { qa: "TrayWrapper", mods: {
+    return ((0, jsx_runtime_1.jsx)(TrayWrapperElement, { mods: {
             open: isOpen,
-        }, 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: {
+        }, style: wrapperStyle, children: (0, jsx_runtime_1.jsx)(TrayElement, { 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.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -10,38 +10,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Underlay = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Base_1 = require("../../Base");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-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,
+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',
     },
-    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,
-        ...(0, StylesProvider_1.useContextStyles)('Underlay'),
-    };
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ref: ref, "data-qa": "Underlay", styles: styles, mods: {
+    return ((0, jsx_runtime_1.jsx)(UnderlayElement, { ref: ref, 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.9.11
+ * @cube-dev/ui-kit v0.10.2
  * 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.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -15,14 +15,61 @@ 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 { type, children, onClose, ...props } = allProps;
-    type = type || 'note';
+    let { theme, type, children, onClose, ...props } = allProps;
+    theme = theme || type || 'note';
     let Icon;
-    switch (type) {
+    switch (theme) {
         case 'success':
             Icon = icons_1.CheckOutlined;
             break;
@@ -33,11 +80,7 @@ function Notification(allProps) {
             Icon = icons_1.InfoOutlined;
             break;
     }
-    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));
+    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));
 }
 exports.Notification = Notification;
 

package/cjs/components/overlays/OverlayWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */