@cube-dev/ui-kit 0.10.13 → 0.11.2

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.2
  * Released under the MIT license.
  */
 
@@ -70,7 +70,7 @@ export function AlertDialogApiProvider(props) {
  * ***Important*** it's commonly a bad practice when you open multiple dialogs in a row;
  * that means this api will reject all dialogs when there is already open one
  *
- * @example Example with calling as a side effect
+ * @example calling in a side effect
  * const alertDialogAPI = useAlertDialogAPI();
  *
  * useEffect(() => {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.2
  * 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.10.13
+ * @cube-dev/ui-kit v0.11.2
  * 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.10.13
+ * @cube-dev/ui-kit v0.11.2
  * 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.10.13
+ * @cube-dev/ui-kit v0.11.2
  * Released under the MIT license.
  */
 
@@ -109,6 +109,7 @@ export const Dialog = forwardRef(function Dialog(props, ref) {
     let formatMessage = useMessageFormatter(intlMessages);
     let domRef = useDOMRef(ref);
     let { dialogProps, titleProps } = useDialog(mergeProps(contextProps, props), domRef);
+    // console.log(dialogProps);
     // If rendered in a popover or tray there won't be a visible dismiss button,
     // so we render a hidden one for screen readers.
     let dismissButton;
@@ -156,11 +157,7 @@ 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: {
-                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));
+    return (_jsx(FocusScope, { contain: true, restoreFocus: true, children: _jsxs(DialogElement, { ref: domRef, "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, 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.10.13
+ * @cube-dev/ui-kit v0.11.2
  * 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.10.13
+ * @cube-dev/ui-kit v0.11.2
  * 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.10.13
+ * @cube-dev/ui-kit v0.11.2
  * 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.10.13
+ * @cube-dev/ui-kit v0.11.2
  * 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.10.13
+ * @cube-dev/ui-kit v0.11.2
  * 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.10.13
+ * @cube-dev/ui-kit v0.11.2
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.2
  * 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.10.13
+ * @cube-dev/ui-kit v0.11.2
  * Released under the MIT license.
  */
 

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,46 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useRef } from 'react';
+import { useChainedCallback, useEvent, useTimer } from '../../../../_internal';
+import { tasty } from '../../../../tasty';
+import { NotificationView } from '../NotificationView';
+import { useNotificationListItem, } from '../hooks';
+const NotificationContainer = tasty({
+    styles: { boxShadow: '0 0.5x 2x #shadow', pointerEvents: 'auto' },
+});
+export const FloatingNotification = memo(function FloatingNotification(props) {
+    const { item, state, onRemoveNotification, id, isDisabledTimer, onDismissNotification, } = props;
+    const { props: notificationProps, key } = item;
+    const ref = useRef(null);
+    const onCloseEvent = useChainedCallback(() => onRemoveNotification(id), notificationProps.onClose);
+    const chainedOnDismiss = useChainedCallback(() => onDismissNotification(id), () => onRemoveNotification(id), notificationProps.onDismiss);
+    const onKeyDown = useEvent(({ key }) => {
+        if (notificationProps.isDismissible === false) {
+            return;
+        }
+        const closeKeys = ['Delete', 'Backspace', 'Escape'];
+        if (closeKeys.includes(key)) {
+            chainedOnDismiss();
+        }
+    });
+    const { itemProps } = useNotificationListItem({ key, ref, state });
+    const { timer } = useTimer({
+        callback: chainedOnDismiss,
+        delay: notificationProps.duration,
+        isDisabled: isDisabledTimer,
+    });
+    return (_jsx(NotificationContainer, { children: _jsx(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/es/components/overlays/NewNotifications/Bar/NotificationsBar.js

@@ -0,0 +1,63 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { TransitionGroup } from 'react-transition-group';
+import { Item } from '@react-stately/collections';
+import { useHover } from '@react-aria/interactions';
+import { useFocusRing, focusSafely } from '@react-aria/focus';
+import { tasty } from '../../../../tasty';
+import { TransitionComponent } from './TransitionComponent';
+import { FloatingNotification } from './FloatingNotification';
+import { useNotificationsList } from '../hooks';
+import { mergeProps } from '../../../../utils/react';
+import { useEvent } from '../../../../_internal';
+const NotificationsContainer = 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',
+        /* to be sure that we're over the legacy modal */
+        zIndex: '1001',
+        overflow: 'hidden',
+        isolation: 'isolate',
+        pointerEvents: 'none',
+        '@supports (-webkit-touch-callout: none)': {
+            height: '-webkit-fill-available max',
+        },
+    },
+});
+export function NotificationsBar(props) {
+    const { items, children, onRemoveNotification, onDismissNotification } = props;
+    const ref = useRef(null);
+    const { listProps, state } = useNotificationsList({ items, children, ref });
+    const { hoverProps, isHovered } = useHover({});
+    const { focusProps, isFocusVisible } = useFocusRing({ within: true });
+    const moveFocus = 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) {
+            focusSafely(elementToFocus);
+        }
+    });
+    return (_jsx(NotificationsContainer, { ref: ref, "data-qa": "notifications-bar", role: "region", "aria-live": "polite", ...mergeProps(listProps, hoverProps, focusProps), children: _jsx(TransitionGroup, { component: null, enter: true, exit: true, children: [...state.collection].reverse().map((notification) => (_jsx(TransitionComponent, { children: _jsx(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));
+}
+NotificationsBar.Item = Item;
+
+        

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

@@ -0,0 +1,54 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import styled from 'styled-components';
+const CSS_TRANSITION_CLASS_NAME = 'cube-notifications-css-transition';
+const TRANSITION_TIMEOUT = 250;
+export function TransitionComponent(props) {
+    const { children, ...transitionProps } = props;
+    const notificationRef = useRef(null);
+    const calculateNotificationSize = useCallback(() => {
+        if (notificationRef.current) {
+            notificationRef.current.style.setProperty('--__notification-size__', `${notificationRef.current.scrollHeight}px`);
+        }
+    }, []);
+    return (_jsx(CSSTransition, { unmountOnExit: true, mountOnEnter: true, timeout: TRANSITION_TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAME, onEnter: calculateNotificationSize, onExit: calculateNotificationSize, ...transitionProps, children: _jsx(Transition, { ref: notificationRef, children: children }, void 0) }, void 0));
+}
+const Transition = styled.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/es/components/overlays/NewNotifications/Bar/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+export * from './NotificationsBar';
+
+        

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

@@ -0,0 +1,38 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { Dialog, DialogTrigger, } from '../../Dialog';
+import { tasty } from '../../../../tasty';
+import { Flex } from '../../../layout/Flex';
+import { Title } from '../../../content/Title';
+import { ClearSlots } from '../../../../utils/react';
+import { useNotificationsObserver } from '../hooks';
+export function NotificationsDialogTrigger(props) {
+    const { onCloseNotificationInBar, ...dialogTriggerProps } = props;
+    useNotificationsObserver((args) => onCloseNotificationInBar === null || onCloseNotificationInBar === void 0 ? void 0 : onCloseNotificationInBar(args));
+    return _jsx(DialogTrigger, { ...dialogTriggerProps, type: "popover" }, void 0);
+}
+const StyledDialog = tasty(Dialog, { height: 'auto calc(100vh - 12x)' });
+const StyledDialogContent = tasty(Flex, {
+    styles: {
+        flow: 'column',
+        placeItems: 'start start',
+        styledScrollbar: true,
+        height: '100%',
+        border: '1bw solid #border',
+        radius: '0.5x',
+        overflow: 'auto',
+    },
+});
+export function NotificationsDialog(props) {
+    const { children, title = 'Notifications', ...dialogProps } = props;
+    return (_jsxs(StyledDialog, { ...dialogProps, children: [_jsx(VisuallyHidden, { children: _jsx(Title, { children: title }, void 0) }, void 0), _jsx(StyledDialogContent, { children: _jsx(ClearSlots, { children: children }, void 0) }, void 0)] }, void 0));
+}
+
+        

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

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+export * from './NotificationsDialogTrigger';
+
+        

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

@@ -0,0 +1,34 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useId } from '@react-aria/utils';
+import { useNotificationsApi } from './hooks';
+export function Notification(props) {
+    const { id: propsId } = props;
+    const { notify, update } = useNotificationsApi();
+    const defaultId = useId();
+    const id = propsId !== null && propsId !== void 0 ? propsId : defaultId;
+    useEffect(() => {
+        const { remove } = notify({ id, ...props });
+        return remove;
+    }, [id]);
+    useEffect(() => update(id, props));
+    return null;
+}
+Notification.Success = function NotificationSuccess(props) {
+    return _jsx(Notification, { type: "success", ...props }, void 0);
+};
+Notification.Danger = function NotificationDanger(props) {
+    return _jsx(Notification, { type: "danger", ...props }, void 0);
+};
+Notification.Attention = function NotificationAttention(props) {
+    return _jsx(Notification, { type: "attention", ...props }, void 0);
+};
+
+        

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

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tasty } from '../../../../tasty';
+import { Button } from '../../../actions';
+import { useEvent } from '../../../../_internal';
+import { useNotificationContext } from './NotificationProvider';
+const Action = tasty(Button, {
+    color: { '': '#purple-text', primary: '#purple-text', secondary: '#dark-03' },
+});
+export function NotificationAction(props) {
+    const { children, onPress, type = 'primary', disableCloseOnAction = type !== 'primary', ...buttonProps } = props;
+    const { onClose } = useNotificationContext();
+    const onPressEvent = useEvent((e) => {
+        onPress === null || onPress === void 0 ? void 0 : onPress(e);
+        if (!disableCloseOnAction) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    });
+    return (_jsx(Action, { ...buttonProps, onPress: onPressEvent, type: "link", size: "small", mods: { primary: type === 'primary', secondary: type === 'secondary' }, children: children }, void 0));
+}
+
+        

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

@@ -0,0 +1,37 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Button } from '../../../actions';
+import { tasty } from '../../../../tasty';
+import { Cross } from '../../../../icons';
+const CloseButton = tasty(Button, {
+    styles: {
+        position: 'absolute',
+        right: '-0.75x',
+        top: '-0.75x',
+        display: 'flex',
+        placeItems: 'center',
+        padding: '0.625x',
+        width: '3x',
+        height: '3x',
+        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',
+    },
+});
+export const NotificationCloseButton = memo(function NotificationCloseButton(props) {
+    const { onPress, isHovered, isFocused } = props;
+    return (_jsx(CloseButton, { qa: "notification-close-button", type: "neutral", mods: { show: isHovered || isFocused }, onPress: onPress, icon: _jsx(Cross, {}, void 0), label: "Close the notification" }, void 0));
+});
+
+        

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

@@ -0,0 +1,27 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { tasty } from '../../../../tasty';
+import { Paragraph } from '../../../content/Paragraph';
+const Description = tasty(Paragraph, {
+    as: 'p',
+    styles: {
+        gridArea: 'description',
+        display: '-webkit-box',
+        '-webkit-line-clamp': 3,
+        '-webkit-box-orient': 'vertical',
+        overflow: 'hidden',
+    },
+});
+export const NotificationDescription = memo(function NotificationDescription(props) {
+    const { description, ...descriptionProps } = props;
+    return (_jsx(Description, { preset: "t4m", ...descriptionProps, children: description }, void 0));
+});
+
+        

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

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { memo } from 'react';
+import { isElement } from 'react-is';
+import flatten from 'react-keyed-flatten-children';
+import { tasty } from '../../../../tasty';
+import { ButtonGroup } from '../../../actions';
+const FooterArea = tasty(ButtonGroup, {
+    gridArea: 'footer',
+    gap: '2x',
+    styles: {
+        '&:not(:empty)': {
+            margin: { '': '0.5x top', 'has-description': '1x top' },
+        },
+    },
+});
+export const NotificationFooter = memo(function NotificationFooter(props) {
+    const { actions, onClose, onDismiss, hasDescription } = props;
+    return (_jsx(FooterArea, { mods: { 'has-description': hasDescription }, children: flatten(typeof actions === 'function'
+            ? actions({ onClose, onDismiss })
+            : actions)
+            .filter((action) => isElement(action))
+            .map((action, index) => {
+            var _a;
+            const { props } = action;
+            const defaultType = index === 0 ? 'primary' : 'secondary';
+            return React.cloneElement(action, {
+                ...props,
+                type: (_a = props.type) !== null && _a !== void 0 ? _a : defaultType,
+            }, props.children);
+        }) }, void 0));
+});
+
+        

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

@@ -0,0 +1,27 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Title } from '../../../content/Title';
+import { tasty } from '../../../../tasty';
+const Header = tasty(Title, {
+    as: 'div',
+    preset: 'h6',
+    styles: {
+        gridArea: 'header',
+        '&:not(:empty)': {
+            margin: '0.25x 0 0.5x',
+        },
+    },
+});
+export const NotificationHeader = memo(function NotificationHeader(props) {
+    const { header, ...headerProps } = props;
+    return _jsx(Header, { ...headerProps, children: header }, void 0);
+});
+
+