@cube-dev/ui-kit 0.10.11 → 0.11.0

package/cjs/components/overlays/NewNotifications/Bar/FloatingNotification.js

@@ -0,0 +1,49 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingNotification = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _internal_1 = require("../../../../_internal");
+const tasty_1 = require("../../../../tasty");
+const NotificationView_1 = require("../NotificationView");
+const hooks_1 = require("../hooks");
+const NotificationContainer = (0, tasty_1.tasty)({
+    styles: { boxShadow: '0 0.5x 2x #shadow', pointerEvents: 'auto' },
+});
+exports.FloatingNotification = (0, react_1.memo)(function FloatingNotification(props) {
+    const { item, state, onRemoveNotification, id, isDisabledTimer, onDismissNotification, } = props;
+    const { props: notificationProps, key } = item;
+    const ref = (0, react_1.useRef)(null);
+    const onCloseEvent = (0, _internal_1.useChainedCallback)(() => onRemoveNotification(id), notificationProps.onClose);
+    const chainedOnDismiss = (0, _internal_1.useChainedCallback)(() => onDismissNotification(id), () => onRemoveNotification(id));
+    const onKeyDown = (0, _internal_1.useEvent)(({ key }) => {
+        if (notificationProps.isDismissible === false) {
+            return;
+        }
+        const closeKeys = ['Delete', 'Backspace', 'Escape'];
+        if (closeKeys.includes(key)) {
+            chainedOnDismiss();
+        }
+    });
+    const { itemProps } = (0, hooks_1.useNotificationListItem)({ key, ref, state });
+    const { timer } = (0, _internal_1.useTimer)({
+        callback: chainedOnDismiss,
+        delay: notificationProps.duration,
+        isDisabled: isDisabledTimer,
+    });
+    return ((0, jsx_runtime_1.jsx)(NotificationContainer, { children: (0, jsx_runtime_1.jsx)(NotificationView_1.NotificationView, { ref: ref, ...notificationProps, timer: timer, attributes: {
+                ...itemProps,
+                onKeyDown,
+                role: 'status',
+                'aria-atomic': 'true',
+            }, onDismiss: chainedOnDismiss, onClose: onCloseEvent, qa: "floating-notification" }, void 0) }, void 0));
+});
+
+        

package/cjs/components/overlays/NewNotifications/Bar/NotificationsBar.js

@@ -0,0 +1,66 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationsBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_transition_group_1 = require("react-transition-group");
+const collections_1 = require("@react-stately/collections");
+const interactions_1 = require("@react-aria/interactions");
+const focus_1 = require("@react-aria/focus");
+const tasty_1 = require("../../../../tasty");
+const TransitionComponent_1 = require("./TransitionComponent");
+const FloatingNotification_1 = require("./FloatingNotification");
+const hooks_1 = require("../hooks");
+const react_2 = require("../../../../utils/react");
+const _internal_1 = require("../../../../_internal");
+const NotificationsContainer = (0, tasty_1.tasty)({
+    styles: {
+        boxSizing: 'border-box',
+        position: 'fixed',
+        bottom: 'env(safe-area-inset-bottom, 0)',
+        right: 'env(safe-area-inset-right, 0)',
+        display: 'flex',
+        flexDirection: 'column-reverse',
+        width: 'auto 100% 45x',
+        height: '100vh max',
+        padding: '2x',
+        gap: '1x',
+        zIndex: '100',
+        overflow: 'hidden',
+        isolation: 'isolate',
+        pointerEvents: 'none',
+        '@supports (-webkit-touch-callout: none)': {
+            height: '-webkit-fill-available max',
+        },
+    },
+});
+function NotificationsBar(props) {
+    const { items, children, onRemoveNotification, onDismissNotification } = props;
+    const ref = (0, react_1.useRef)(null);
+    const { listProps, state } = (0, hooks_1.useNotificationsList)({ items, children, ref });
+    const { hoverProps, isHovered } = (0, interactions_1.useHover)({});
+    const { focusProps, isFocusVisible } = (0, focus_1.useFocusRing)({ within: true });
+    const moveFocus = (0, _internal_1.useEvent)((key) => {
+        var _a, _b, _c;
+        const nextKey = (_b = (_a = state.collection.getKeyBefore(key.toString())) !== null && _a !== void 0 ? _a : state.collection.getKeyAfter(key.toString())) !== null && _b !== void 0 ? _b : state.collection.getLastKey();
+        const elementToFocus = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.querySelector(`[data-id="${nextKey}"]`);
+        if (elementToFocus) {
+            (0, focus_1.focusSafely)(elementToFocus);
+        }
+    });
+    return ((0, jsx_runtime_1.jsx)(NotificationsContainer, { ref: ref, "data-qa": "notifications-bar", role: "region", "aria-live": "polite", ...(0, react_2.mergeProps)(listProps, hoverProps, focusProps), children: (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { component: null, enter: true, exit: true, children: [...state.collection].reverse().map((notification) => ((0, jsx_runtime_1.jsx)(TransitionComponent_1.TransitionComponent, { children: (0, jsx_runtime_1.jsx)(FloatingNotification_1.FloatingNotification, { isDisabledTimer: isHovered || isFocusVisible, id: notification.props.id, item: notification, state: state, onRemoveNotification: (key) => {
+                        onRemoveNotification(key);
+                        moveFocus(key);
+                    }, onDismissNotification: onDismissNotification }, void 0) }, notification.props.id))) }, void 0) }, void 0));
+}
+exports.NotificationsBar = NotificationsBar;
+NotificationsBar.Item = collections_1.Item;
+
+        

package/cjs/components/overlays/NewNotifications/Bar/TransitionComponent.js

@@ -0,0 +1,61 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * 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.TransitionComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_transition_group_1 = require("react-transition-group");
+const styled_components_1 = __importDefault(require("styled-components"));
+const CSS_TRANSITION_CLASS_NAME = 'cube-notifications-css-transition';
+const TRANSITION_TIMEOUT = 250;
+function TransitionComponent(props) {
+    const { children, ...transitionProps } = props;
+    const notificationRef = (0, react_1.useRef)(null);
+    const calculateNotificationSize = (0, react_1.useCallback)(() => {
+        if (notificationRef.current) {
+            notificationRef.current.style.setProperty('--__notification-size__', `${notificationRef.current.scrollHeight}px`);
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { unmountOnExit: true, mountOnEnter: true, timeout: TRANSITION_TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAME, onEnter: calculateNotificationSize, onExit: calculateNotificationSize, ...transitionProps, children: (0, jsx_runtime_1.jsx)(Transition, { ref: notificationRef, children: children }, void 0) }, void 0));
+}
+exports.TransitionComponent = TransitionComponent;
+const Transition = styled_components_1.default.div `
+  transition-property: height, opacity, margin-top, margin-bottom;
+  transition-duration: ${TRANSITION_TIMEOUT}ms;
+  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  &.${CSS_TRANSITION_CLASS_NAME} {
+    &-enter {
+      height: 0;
+      opacity: 0;
+      will-change: height, opacity;
+    }
+    &-enter-active {
+      height: var(--__notification-size__);
+      opacity: 1;
+      will-change: height, opacity;
+    }
+    &-exit {
+      height: var(--__notification-size__);
+      opacity: 1;
+      will-change: height, opacity, margin-top;
+    }
+    &-exit-active {
+      margin-top: -8px;
+      height: 0;
+      opacity: 0;
+      will-change: height, opacity;
+    }
+  }
+`;
+
+        

package/cjs/components/overlays/NewNotifications/Bar/index.js

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./NotificationsBar"), exports);
+
+        

package/cjs/components/overlays/NewNotifications/Dialog/NotificationsDialogTrigger.js

@@ -0,0 +1,43 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationsDialog = exports.NotificationsDialogTrigger = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const visually_hidden_1 = require("@react-aria/visually-hidden");
+const Dialog_1 = require("../../Dialog");
+const tasty_1 = require("../../../../tasty");
+const Flex_1 = require("../../../layout/Flex");
+const Title_1 = require("../../../content/Title");
+const react_1 = require("../../../../utils/react");
+const hooks_1 = require("../hooks");
+function NotificationsDialogTrigger(props) {
+    const { onCloseNotificationInBar, ...dialogTriggerProps } = props;
+    (0, hooks_1.useNotificationsObserver)((args) => onCloseNotificationInBar === null || onCloseNotificationInBar === void 0 ? void 0 : onCloseNotificationInBar(args));
+    return (0, jsx_runtime_1.jsx)(Dialog_1.DialogTrigger, { ...dialogTriggerProps, type: "popover" }, void 0);
+}
+exports.NotificationsDialogTrigger = NotificationsDialogTrigger;
+const StyledDialog = (0, tasty_1.tasty)(Dialog_1.Dialog, { height: 'auto calc(100vh - 12x)' });
+const StyledDialogContent = (0, tasty_1.tasty)(Flex_1.Flex, {
+    styles: {
+        flow: 'column',
+        placeItems: 'start start',
+        styledScrollbar: true,
+        height: '100%',
+        border: '1bw solid #border',
+        radius: '0.5x',
+        overflow: 'auto',
+    },
+});
+function NotificationsDialog(props) {
+    const { children, title = 'Notifications', ...dialogProps } = props;
+    return ((0, jsx_runtime_1.jsxs)(StyledDialog, { ...dialogProps, children: [(0, jsx_runtime_1.jsx)(visually_hidden_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { children: title }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(StyledDialogContent, { children: (0, jsx_runtime_1.jsx)(react_1.ClearSlots, { children: children }, void 0) }, void 0)] }, void 0));
+}
+exports.NotificationsDialog = NotificationsDialog;
+
+        

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

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./NotificationsDialogTrigger"), exports);
+
+        

package/cjs/components/overlays/NewNotifications/Notification.js

@@ -0,0 +1,38 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Notification = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("@react-aria/utils");
+const hooks_1 = require("./hooks");
+function Notification(props) {
+    const { id: propsId } = props;
+    const { notify, update } = (0, hooks_1.useNotificationsApi)();
+    const defaultId = (0, utils_1.useId)();
+    const id = propsId !== null && propsId !== void 0 ? propsId : defaultId;
+    (0, react_1.useEffect)(() => {
+        const { remove } = notify({ id, ...props });
+        return remove;
+    }, [id]);
+    (0, react_1.useEffect)(() => update(id, props));
+    return null;
+}
+exports.Notification = Notification;
+Notification.Success = function NotificationSuccess(props) {
+    return (0, jsx_runtime_1.jsx)(Notification, { type: "success", ...props }, void 0);
+};
+Notification.Danger = function NotificationDanger(props) {
+    return (0, jsx_runtime_1.jsx)(Notification, { type: "danger", ...props }, void 0);
+};
+Notification.Attention = function NotificationAttention(props) {
+    return (0, jsx_runtime_1.jsx)(Notification, { type: "attention", ...props }, void 0);
+};
+
+        

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationAction.js

@@ -0,0 +1,32 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationAction = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tasty_1 = require("../../../../tasty");
+const actions_1 = require("../../../actions");
+const _internal_1 = require("../../../../_internal");
+const NotificationProvider_1 = require("./NotificationProvider");
+const Action = (0, tasty_1.tasty)(actions_1.Button, {
+    color: { '': '#purple-text', primary: '#purple-text', secondary: '#dark-03' },
+});
+function NotificationAction(props) {
+    const { children, onPress, type = 'primary', disableCloseOnAction = type !== 'primary', ...buttonProps } = props;
+    const { onClose } = (0, NotificationProvider_1.useNotificationContext)();
+    const onPressEvent = (0, _internal_1.useEvent)((e) => {
+        onPress === null || onPress === void 0 ? void 0 : onPress(e);
+        if (!disableCloseOnAction) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    });
+    return ((0, jsx_runtime_1.jsx)(Action, { ...buttonProps, onPress: onPressEvent, type: "link", size: "small", mods: { primary: type === 'primary', secondary: type === 'secondary' }, children: children }, void 0));
+}
+exports.NotificationAction = NotificationAction;
+
+        

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationCloseButton.js

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationCloseButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const actions_1 = require("../../../actions");
+const tasty_1 = require("../../../../tasty");
+const icons_1 = require("../../../../icons");
+const CloseButton = (0, tasty_1.tasty)(actions_1.Button, {
+    styles: {
+        position: 'absolute',
+        right: '-0.75x',
+        top: '-0.75x',
+        display: 'flex',
+        placeItems: 'center',
+        padding: '0.75x',
+        width: '3.5x',
+        height: '3.5x',
+        fill: '#white',
+        shadow: '0 0.5x 2x #shadow',
+        color: { '': '#dark-02', hovered: '#dark-03', pressed: '#dark-02' },
+        borderRadius: '50%',
+        visibility: { '': 'hidden', show: 'visible' },
+        opacity: { '': '0', show: '1' },
+        transition: 'opacity, visibility 0.2s ease-in-out',
+    },
+});
+exports.NotificationCloseButton = (0, react_1.memo)(function NotificationCloseButton(props) {
+    const { onPress, isHovered, isFocused } = props;
+    return ((0, jsx_runtime_1.jsx)(CloseButton, { qa: "notification-close-button", type: "neutral", mods: { show: isHovered || isFocused }, onPress: onPress, icon: (0, jsx_runtime_1.jsx)(icons_1.Cross, {}, void 0), label: "Close the notification" }, void 0));
+});
+
+        

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationDescription.js

@@ -0,0 +1,30 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationDescription = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const tasty_1 = require("../../../../tasty");
+const Paragraph_1 = require("../../../content/Paragraph");
+const Description = (0, tasty_1.tasty)(Paragraph_1.Paragraph, {
+    as: 'p',
+    styles: {
+        gridArea: 'description',
+        display: '-webkit-box',
+        '-webkit-line-clamp': 3,
+        '-webkit-box-orient': 'vertical',
+        overflow: 'hidden',
+    },
+});
+exports.NotificationDescription = (0, react_1.memo)(function NotificationDescription(props) {
+    const { description, ...descriptionProps } = props;
+    return (0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description }, void 0);
+});
+
+        

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationFooter.js

@@ -0,0 +1,65 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationFooter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_is_1 = require("react-is");
+const react_keyed_flatten_children_1 = __importDefault(require("react-keyed-flatten-children"));
+const tasty_1 = require("../../../../tasty");
+const actions_1 = require("../../../actions");
+const FooterArea = (0, tasty_1.tasty)(actions_1.ButtonGroup, {
+    gridArea: 'footer',
+    gap: '2x',
+    styles: {
+        '&:not(:empty)': {
+            margin: { '': '0.5x top', 'has-description': '1x top' },
+        },
+    },
+});
+exports.NotificationFooter = (0, react_1.memo)(function NotificationFooter(props) {
+    const { actions, onClose, onDismiss, hasDescription } = props;
+    return ((0, jsx_runtime_1.jsx)(FooterArea, { mods: { 'has-description': hasDescription }, children: (0, react_keyed_flatten_children_1.default)(typeof actions === 'function'
+            ? actions({ onClose, onDismiss })
+            : actions)
+            .filter((action) => (0, react_is_1.isElement)(action))
+            .map((action, index) => {
+            var _a;
+            const { props } = action;
+            const defaultType = index === 0 ? 'primary' : 'secondary';
+            return react_1.default.cloneElement(action, {
+                ...props,
+                type: (_a = props.type) !== null && _a !== void 0 ? _a : defaultType,
+            }, props.children);
+        }) }, void 0));
+});
+
+        

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationHeader.js

@@ -0,0 +1,21 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Title_1 = require("../../../content/Title");
+const tasty_1 = require("../../../../tasty");
+const Header = (0, tasty_1.tasty)(Title_1.Title, { gridArea: 'header', margin: '0.25x 0 0.5x' });
+exports.NotificationHeader = (0, react_1.memo)(function NotificationHeader(props) {
+    const { header, ...headerProps } = props;
+    return ((0, jsx_runtime_1.jsx)(Header, { as: "div", preset: "h6", ...headerProps, children: header }, void 0));
+});
+
+        

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationIcon.js

@@ -0,0 +1,67 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const tasty_1 = require("../../../../tasty");
+const icons_1 = require("../../../../icons");
+const IconContainer = (0, tasty_1.tasty)({
+    styles: {
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignSelf: 'start',
+        gridArea: 'icon',
+        minHeight: '3x',
+        placeContent: 'center',
+    },
+});
+const IconPreset = (0, tasty_1.tasty)({
+    styles: {
+        boxSizing: 'border-box',
+        display: 'flex',
+        fill: {
+            '': '#note-bg',
+            attention: '#note-bg',
+            success: '#success-bg',
+            danger: '#danger-bg',
+        },
+        color: {
+            '': '#note-text',
+            attention: '#note-text',
+            success: '#success-text',
+            danger: '#danger-text',
+        },
+        borderRadius: '0.5x',
+        width: '3x',
+        height: '3x',
+        padding: '0.5x',
+        alignItems: 'center',
+        justifyContent: 'center',
+        '& svg': {
+            width: '100%',
+            height: '100%',
+        },
+    },
+});
+exports.NotificationIcon = (0, react_1.memo)(function NotificationIcon(props) {
+    const { icon, type } = props;
+    return ((0, jsx_runtime_1.jsx)(IconContainer, { children: icon ? (icon) : ((0, jsx_runtime_1.jsx)(IconPreset, { mods: {
+                attention: type === 'attention',
+                success: type === 'success',
+                danger: type === 'danger',
+            }, children: iconsByType[type] }, void 0)) }, void 0));
+});
+const iconsByType = {
+    attention: (0, jsx_runtime_1.jsx)(icons_1.Attention, {}, void 0),
+    success: (0, jsx_runtime_1.jsx)(icons_1.Success, {}, void 0),
+    danger: (0, jsx_runtime_1.jsx)(icons_1.Danger, {}, void 0),
+};
+
+        

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationProvider.js

@@ -0,0 +1,30 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * 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.useNotificationContext = exports.NotificationProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const NotificationContext = (0, react_1.createContext)(null);
+function NotificationProvider(props) {
+    const { children, ...value } = props;
+    return ((0, jsx_runtime_1.jsx)(NotificationContext.Provider, { value: value, children: children }, void 0));
+}
+exports.NotificationProvider = NotificationProvider;
+function useNotificationContext() {
+    const context = (0, react_1.useContext)(NotificationContext);
+    (0, tiny_invariant_1.default)(context, 'This component cannot be used outside of <Notification />');
+    return context;
+}
+exports.useNotificationContext = useNotificationContext;
+
+