@alfalab/core-components 45.8.0-beta.5 → 45.9.0-beta.0

package/notification/cssm/Component.js

@@ -1,73 +1,61 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef, useRef, useState, useCallback, useEffect, Fragment } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { useSwipeable } from 'react-swipeable';
+import cn from 'classnames';
+import elementClosest from 'element-closest';
+import { Portal } from '../../portal/cssm';
+import { Stack, stackingOrder } from '../../stack/cssm';
+import { ToastPlateDesktop } from '../../toast-plate/cssm/desktop';
+import { useClickOutside } from './utils/index.js';
+import styles from './index.module.css';
 
-var tslib = require('tslib');
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var reactSwipeable = require('react-swipeable');
-var cn = require('classnames');
-var elementClosest = require('element-closest');
-var coreComponentsPortal = require('../../portal/cssm');
-var coreComponentsStack = require('../../stack/cssm');
-var desktop = require('../../toast-plate/cssm/desktop');
-var utils_index = require('./utils/index.js');
-var styles = require('./index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var elementClosest__default = /*#__PURE__*/_interopDefaultCompat(elementClosest);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-
-var notificationClassNameSelector = ".".concat(styles__default.default.notificationComponent);
-var Notification = React.forwardRef(function (_a, ref) {
-    var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? coreComponentsStack.stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
-    var notificationRef = React.useRef(null);
-    var autoCloseTimeoutRef = React.useRef(0);
-    var closeTimeoutRef = React.useRef(0);
-    var _g = React.useState(false), isClosing = _g[0], setIsClosing = _g[1];
-    var startAutoCloseTimer = React.useCallback(function () {
+const notificationClassNameSelector = `.${styles.notificationComponent}`;
+const Notification = forwardRef(({ className, actionSectionClassName, children, visible, offset = 108, hasCloser = true, autoCloseDelay = 5000, usePortal = true, zIndex = stackingOrder.TOAST, style, onClose, onCloseTimeout, onMouseEnter, onMouseLeave, onClickOutside, ...restProps }, ref) => {
+    const notificationRef = useRef(null);
+    const autoCloseTimeoutRef = useRef(0);
+    const closeTimeoutRef = useRef(0);
+    const [isClosing, setIsClosing] = useState(false);
+    const startAutoCloseTimer = useCallback(() => {
         if (autoCloseDelay !== null) {
-            autoCloseTimeoutRef.current = window.setTimeout(function () {
+            autoCloseTimeoutRef.current = window.setTimeout(() => {
                 if (onCloseTimeout) {
                     onCloseTimeout();
                 }
             }, autoCloseDelay);
         }
     }, [autoCloseDelay, onCloseTimeout]);
-    var stopAutoCloseTimer = React.useCallback(function () {
+    const stopAutoCloseTimer = useCallback(() => {
         clearTimeout(autoCloseTimeoutRef.current);
     }, []);
-    React.useEffect(function () { return function () {
+    useEffect(() => () => {
         clearTimeout(closeTimeoutRef.current);
-    }; }, []);
-    React.useEffect(function () {
-        elementClosest__default.default(window);
     }, []);
-    React.useEffect(function () {
+    useEffect(() => {
+        elementClosest(window);
+    }, []);
+    useEffect(() => {
         if (visible) {
             startAutoCloseTimer();
         }
-        return function () {
+        return () => {
             stopAutoCloseTimer();
         };
     }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);
-    var handleMouseEnter = React.useCallback(function (event) {
+    const handleMouseEnter = useCallback((event) => {
         stopAutoCloseTimer();
         if (onMouseEnter) {
             onMouseEnter(event);
         }
     }, [onMouseEnter, stopAutoCloseTimer]);
-    var handleMouseLeave = React.useCallback(function (event) {
+    const handleMouseLeave = useCallback((event) => {
         stopAutoCloseTimer();
         startAutoCloseTimer();
         if (onMouseLeave) {
             onMouseLeave(event);
         }
     }, [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer]);
-    var handleOutsideClick = React.useCallback(function (event) {
-        var isTargetNotification = !!event.target.closest(notificationClassNameSelector);
+    const handleOutsideClick = useCallback((event) => {
+        const isTargetNotification = !!event.target.closest(notificationClassNameSelector);
         /*
          * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick
          * при клике на другие нотификации, если их несколько на странице
@@ -76,13 +64,12 @@ var Notification = React.forwardRef(function (_a, ref) {
             onClickOutside(event);
         }
     }, [onClickOutside, visible]);
-    utils_index.useClickOutside(notificationRef, handleOutsideClick);
-    var swipeableHandlers = reactSwipeable.useSwipeable({
-        onSwiped: function (_a) {
-            var dir = _a.dir;
+    useClickOutside(notificationRef, handleOutsideClick);
+    const swipeableHandlers = useSwipeable({
+        onSwiped: ({ dir }) => {
             if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {
                 setIsClosing(true);
-                closeTimeoutRef.current = window.setTimeout(function () {
+                closeTimeoutRef.current = window.setTimeout(() => {
                     setIsClosing(false);
                     onClose();
                 }, 100);
@@ -90,16 +77,17 @@ var Notification = React.forwardRef(function (_a, ref) {
         },
         delta: 100,
     });
-    var Wrapper = usePortal ? coreComponentsPortal.Portal : React.Fragment;
-    return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
-        var _a;
-        return (React__default.default.createElement(Wrapper, null,
-            React__default.default.createElement("div", tslib.__assign({}, swipeableHandlers),
-                React__default.default.createElement(desktop.ToastPlateDesktop, tslib.__assign({ className: cn__default.default(styles__default.default.notificationComponent, (_a = {},
-                        _a[styles__default.default.isVisible] = visible,
-                        _a[styles__default.default.isClosing] = isClosing,
-                        _a), className), contentClassName: styles__default.default.toastContent, actionSectionClassName: cn__default.default(actionSectionClassName, styles__default.default.actionSection), style: tslib.__assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default.default([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
-    }));
+    const Wrapper = usePortal ? Portal : Fragment;
+    return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Wrapper, null,
+        React.createElement("div", { ...swipeableHandlers },
+            React.createElement(ToastPlateDesktop, { className: cn(styles.notificationComponent, {
+                    [styles.isVisible]: visible,
+                    [styles.isClosing]: isClosing,
+                }, className), contentClassName: styles.toastContent, actionSectionClassName: cn(actionSectionClassName, styles.actionSection), style: {
+                    top: offset,
+                    zIndex: computedZIndex,
+                    ...style,
+                }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose, ...restProps }, children))))));
 });
 
-exports.Notification = Notification;
+export { Notification };

package/notification/cssm/index.js

@@ -1,7 +1,11 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component = require('./Component.js');
-
-
-
-exports.Notification = Component.Notification;
+export { Notification } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'react-swipeable';
+import 'classnames';
+import 'element-closest';
+import '../../portal/cssm';
+import '../../stack/cssm';
+import '../../toast-plate/cssm/desktop';
+import './utils/index.js';
+import './index.module.css';

package/notification/cssm/utils/index.js

@@ -1,10 +1,4 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+import React from 'react';
 
 /*
  * Дублирую хук из @alfalab/hooks, так как не подходят названия событий
@@ -13,9 +7,9 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  * https://github.com/core-ds/utils/issues/35
  */
 function useClickOutside(ref, cb) {
-    React__default.default.useEffect(function () {
+    React.useEffect(() => {
         // eslint-disable-next-line
-        var handler = function (event) {
+        const handler = (event) => {
             if (!ref.current || ref.current.contains(event.target)) {
                 return;
             }
@@ -23,11 +17,11 @@ function useClickOutside(ref, cb) {
         };
         document.addEventListener('click', handler);
         document.addEventListener('touchend', handler);
-        return function () {
+        return () => {
             document.removeEventListener('click', handler);
             document.removeEventListener('touchend', handler);
         };
     }, [ref, cb]);
 }
 
-exports.useClickOutside = useClickOutside;
+export { useClickOutside };

package/notification/esm/Component.js

@@ -9,7 +9,7 @@ import { stackingOrder, Stack } from '../../stack/esm';
 import { ToastPlateDesktop } from '../../toast-plate/esm/desktop';
 import { useClickOutside } from './utils/index.js';
 
-var styles = {"notificationComponent":"notification__notificationComponent_19vnl","isVisible":"notification__isVisible_19vnl","isClosing":"notification__isClosing_19vnl","toastContent":"notification__toastContent_19vnl","actionSection":"notification__actionSection_19vnl"};
+var styles = {"notificationComponent":"notification__notificationComponent_kh00k","isVisible":"notification__isVisible_kh00k","isClosing":"notification__isClosing_kh00k","toastContent":"notification__toastContent_kh00k","actionSection":"notification__actionSection_kh00k"};
 require('./index.css');
 
 var notificationClassNameSelector = ".".concat(styles.notificationComponent);

package/notification/esm/index.css

@@ -21,7 +21,7 @@
 } :root {
 } :root {
     --notification-desktop-content-width: 278px;
-} .notification__notificationComponent_19vnl {
+} .notification__notificationComponent_kh00k {
     visibility: hidden;
     right: var(--gap-s);
     transform: translate(0, -500px);
@@ -30,26 +30,26 @@
     -webkit-user-select: none;
             user-select: none;
     transition: transform 0.4s ease-out
-} @media screen and (min-width: 600px) { .notification__notificationComponent_19vnl {
+} @media screen and (min-width: 600px) { .notification__notificationComponent_kh00k {
         right: var(--gap-4xl);
         width: auto;
         transform: translate(calc(100% + var(--gap-4xl)), 0)
 }
-    } .notification__notificationComponent_19vnl.notification__isVisible_19vnl {
+    } .notification__notificationComponent_kh00k.notification__isVisible_kh00k {
         visibility: visible;
         transform: translate(0, 0);
-    } .notification__notificationComponent_19vnl.notification__isClosing_19vnl {
+    } .notification__notificationComponent_kh00k.notification__isClosing_kh00k {
         transition: transform 0.1s ease-out;
         transform: translate(100vw, 0)
-    } @media screen and (min-width: 600px) { .notification__notificationComponent_19vnl.notification__isClosing_19vnl {
+    } @media screen and (min-width: 600px) { .notification__notificationComponent_kh00k.notification__isClosing_kh00k {
             transform: translate(calc(100% + var(--gap-4xl)), 0)
     }
-        } .notification__notificationComponent_19vnl.notification__notificationComponent_19vnl {
+        } .notification__notificationComponent_kh00k.notification__notificationComponent_kh00k {
     position: fixed;
-} @media screen and (min-width: 600px) { .notification__toastContent_19vnl {
+} @media screen and (min-width: 600px) { .notification__toastContent_kh00k {
         width: var(--notification-desktop-content-width)
 }
-    } .notification__actionSection_19vnl {
+    } .notification__actionSection_kh00k {
     min-width: 104px;
     min-height: 48px;
     padding: 0 var(--gap-xs);

package/notification/index.css

@@ -21,7 +21,7 @@
 } :root {
 } :root {
     --notification-desktop-content-width: 278px;
-} .notification__notificationComponent_19vnl {
+} .notification__notificationComponent_kh00k {
     visibility: hidden;
     right: var(--gap-s);
     transform: translate(0, -500px);
@@ -30,26 +30,26 @@
     -webkit-user-select: none;
             user-select: none;
     transition: transform 0.4s ease-out
-} @media screen and (min-width: 600px) { .notification__notificationComponent_19vnl {
+} @media screen and (min-width: 600px) { .notification__notificationComponent_kh00k {
         right: var(--gap-4xl);
         width: auto;
         transform: translate(calc(100% + var(--gap-4xl)), 0)
 }
-    } .notification__notificationComponent_19vnl.notification__isVisible_19vnl {
+    } .notification__notificationComponent_kh00k.notification__isVisible_kh00k {
         visibility: visible;
         transform: translate(0, 0);
-    } .notification__notificationComponent_19vnl.notification__isClosing_19vnl {
+    } .notification__notificationComponent_kh00k.notification__isClosing_kh00k {
         transition: transform 0.1s ease-out;
         transform: translate(100vw, 0)
-    } @media screen and (min-width: 600px) { .notification__notificationComponent_19vnl.notification__isClosing_19vnl {
+    } @media screen and (min-width: 600px) { .notification__notificationComponent_kh00k.notification__isClosing_kh00k {
             transform: translate(calc(100% + var(--gap-4xl)), 0)
     }
-        } .notification__notificationComponent_19vnl.notification__notificationComponent_19vnl {
+        } .notification__notificationComponent_kh00k.notification__notificationComponent_kh00k {
     position: fixed;
-} @media screen and (min-width: 600px) { .notification__toastContent_19vnl {
+} @media screen and (min-width: 600px) { .notification__toastContent_kh00k {
         width: var(--notification-desktop-content-width)
 }
-    } .notification__actionSection_19vnl {
+    } .notification__actionSection_kh00k {
     min-width: 104px;
     min-height: 48px;
     padding: 0 var(--gap-xs);

package/notification/modern/Component.js

@@ -8,7 +8,7 @@ import { Stack, stackingOrder } from '../../stack/modern';
 import { ToastPlateDesktop } from '../../toast-plate/modern/desktop';
 import { useClickOutside } from './utils/index.js';
 
-const styles = {"notificationComponent":"notification__notificationComponent_19vnl","isVisible":"notification__isVisible_19vnl","isClosing":"notification__isClosing_19vnl","toastContent":"notification__toastContent_19vnl","actionSection":"notification__actionSection_19vnl"};
+const styles = {"notificationComponent":"notification__notificationComponent_kh00k","isVisible":"notification__isVisible_kh00k","isClosing":"notification__isClosing_kh00k","toastContent":"notification__toastContent_kh00k","actionSection":"notification__actionSection_kh00k"};
 require('./index.css');
 
 const notificationClassNameSelector = `.${styles.notificationComponent}`;

package/notification/modern/index.css

@@ -21,7 +21,7 @@
 } :root {
 } :root {
     --notification-desktop-content-width: 278px;
-} .notification__notificationComponent_19vnl {
+} .notification__notificationComponent_kh00k {
     visibility: hidden;
     right: var(--gap-s);
     transform: translate(0, -500px);
@@ -30,26 +30,26 @@
     -webkit-user-select: none;
             user-select: none;
     transition: transform 0.4s ease-out
-} @media screen and (min-width: 600px) { .notification__notificationComponent_19vnl {
+} @media screen and (min-width: 600px) { .notification__notificationComponent_kh00k {
         right: var(--gap-4xl);
         width: auto;
         transform: translate(calc(100% + var(--gap-4xl)), 0)
 }
-    } .notification__notificationComponent_19vnl.notification__isVisible_19vnl {
+    } .notification__notificationComponent_kh00k.notification__isVisible_kh00k {
         visibility: visible;
         transform: translate(0, 0);
-    } .notification__notificationComponent_19vnl.notification__isClosing_19vnl {
+    } .notification__notificationComponent_kh00k.notification__isClosing_kh00k {
         transition: transform 0.1s ease-out;
         transform: translate(100vw, 0)
-    } @media screen and (min-width: 600px) { .notification__notificationComponent_19vnl.notification__isClosing_19vnl {
+    } @media screen and (min-width: 600px) { .notification__notificationComponent_kh00k.notification__isClosing_kh00k {
             transform: translate(calc(100% + var(--gap-4xl)), 0)
     }
-        } .notification__notificationComponent_19vnl.notification__notificationComponent_19vnl {
+        } .notification__notificationComponent_kh00k.notification__notificationComponent_kh00k {
     position: fixed;
-} @media screen and (min-width: 600px) { .notification__toastContent_19vnl {
+} @media screen and (min-width: 600px) { .notification__toastContent_kh00k {
         width: var(--notification-desktop-content-width)
 }
-    } .notification__actionSection_19vnl {
+    } .notification__actionSection_kh00k {
     min-width: 104px;
     min-height: 48px;
     padding: 0 var(--gap-xs);

package/notification-manager/component.js

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"notification-manager__component_f6dih","notification":"notification-manager__notification_f6dih","withoutMargin":"notification-manager__withoutMargin_f6dih","enter":"notification-manager__enter_f6dih","enterActive":"notification-manager__enterActive_f6dih"};
+var styles = {"component":"notification-manager__component_19o99","notification":"notification-manager__notification_19o99","withoutMargin":"notification-manager__withoutMargin_19o99","enter":"notification-manager__enter_19o99","enterActive":"notification-manager__enterActive_19o99"};
 require('./index.css');
 
 var CSS_TRANSITION_CLASS_NAMES = {

package/notification-manager/cssm/component.js

@@ -1,39 +1,28 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef } from 'react';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import cn from 'classnames';
+import { Portal } from '../../portal/cssm';
+import { Stack, stackingOrder } from '../../stack/cssm';
+import { Notification } from './components/notification/component.js';
+import styles from './index.module.css';
 
-var tslib = require('tslib');
-var React = require('react');
-var reactTransitionGroup = require('react-transition-group');
-var cn = require('classnames');
-var coreComponentsPortal = require('../../portal/cssm');
-var coreComponentsStack = require('../../stack/cssm');
-var components_notification_component = require('./components/notification/component.js');
-var styles = require('./index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-
-var CSS_TRANSITION_CLASS_NAMES = {
-    enter: styles__default.default.enter,
-    enterActive: styles__default.default.enterActive,
+const CSS_TRANSITION_CLASS_NAMES = {
+    enter: styles.enter,
+    enterActive: styles.enterActive,
 };
-var TIMEOUT = {
+const TIMEOUT = {
     exit: 0,
     enter: 400,
 };
-var NotificationManager = React.forwardRef(function (_a, ref) {
-    var notifications = _a.notifications, className = _a.className, dataTestId = _a.dataTestId, _b = _a.zIndex, zIndex = _b === void 0 ? coreComponentsStack.stackingOrder.TOAST : _b, _c = _a.style, style = _c === void 0 ? {} : _c, offset = _a.offset, onRemoveNotification = _a.onRemoveNotification, container = _a.container, restProps = tslib.__rest(_a, ["notifications", "className", "dataTestId", "zIndex", "style", "offset", "onRemoveNotification", "container"]);
-    return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: container },
-        React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles__default.default.component, className), ref: ref, "data-test-id": dataTestId, style: tslib.__assign({ zIndex: computedZIndex, top: offset }, style) }, restProps),
-            React__default.default.createElement(reactTransitionGroup.TransitionGroup, null, notifications.map(function (element, index) {
-                var _a;
-                return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: element.props.id, timeout: TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAMES, unmountOnExit: true },
-                    React__default.default.createElement(components_notification_component.Notification, { element: element, className: cn__default.default(styles__default.default.notification, (_a = {},
-                            _a[styles__default.default.withoutMargin] = offset && index === 0,
-                            _a)), onRemoveNotification: onRemoveNotification })));
-            }))))); }));
-});
+const NotificationManager = forwardRef(({ notifications, className, dataTestId, zIndex = stackingOrder.TOAST, style = {}, offset, onRemoveNotification, container, ...restProps }, ref) => (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: container },
+    React.createElement("div", { className: cn(styles.component, className), ref: ref, "data-test-id": dataTestId, style: {
+            zIndex: computedZIndex,
+            top: offset,
+            ...style,
+        }, ...restProps },
+        React.createElement(TransitionGroup, null, notifications.map((element, index) => (React.createElement(CSSTransition, { key: element.props.id, timeout: TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAMES, unmountOnExit: true },
+            React.createElement(Notification, { element: element, className: cn(styles.notification, {
+                    [styles.withoutMargin]: offset && index === 0,
+                }), onRemoveNotification: onRemoveNotification })))))))))));
 
-exports.NotificationManager = NotificationManager;
+export { NotificationManager };

package/notification-manager/cssm/components/index.js

@@ -1,7 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_notification_component = require('./notification/component.js');
-
-
-
-exports.Notification = components_notification_component.Notification;
+export { Notification } from './notification/component.js';
+import 'react';
+import 'classnames';

package/notification-manager/cssm/components/notification/component.js

@@ -1,30 +1,30 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import { useCallback, useMemo, cloneElement } from 'react';
+import cn from 'classnames';
 
-var tslib = require('tslib');
-var React = require('react');
-var cn = require('classnames');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-
-var Notification = function (_a) {
-    var element = _a.element, className = _a.className, onRemoveNotification = _a.onRemoveNotification;
-    var _b = element.props, onClose = _b.onClose, onCloseTimeout = _b.onCloseTimeout;
-    var handleClose = React.useCallback(function () {
+const Notification = ({ element, className, onRemoveNotification, }) => {
+    const { onClose, onCloseTimeout } = element.props;
+    const handleClose = useCallback(() => {
         if (onClose) {
             onClose();
         }
         onRemoveNotification(element.props.id);
     }, [onClose, onRemoveNotification, element.props.id]);
-    var handleCloseTimeout = React.useCallback(function () {
+    const handleCloseTimeout = useCallback(() => {
         if (onCloseTimeout) {
             onCloseTimeout();
         }
         onRemoveNotification(element.props.id);
     }, [element.props.id, onCloseTimeout, onRemoveNotification]);
-    var notificationProps = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, element.props), { visible: true, className: cn__default.default(className, element.props.className), usePortal: false, offset: 0, onClose: handleClose, onCloseTimeout: handleCloseTimeout })); }, [element, handleClose, handleCloseTimeout, className]);
-    return React.cloneElement(element, notificationProps);
+    const notificationProps = useMemo(() => ({
+        ...element.props,
+        visible: true,
+        className: cn(className, element.props.className),
+        usePortal: false,
+        offset: 0,
+        onClose: handleClose,
+        onCloseTimeout: handleCloseTimeout,
+    }), [element, handleClose, handleCloseTimeout, className]);
+    return cloneElement(element, notificationProps);
 };
 
-exports.Notification = Notification;
+export { Notification };

package/notification-manager/cssm/components/notification/index.js

@@ -1,7 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_notification_component = require('./component.js');
-
-
-
-exports.Notification = components_notification_component.Notification;
+export { Notification } from './component.js';
+import 'react';
+import 'classnames';

package/notification-manager/cssm/index.js

@@ -1,7 +1,8 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var component = require('./component.js');
-
-
-
-exports.NotificationManager = component.NotificationManager;
+export { NotificationManager } from './component.js';
+import 'react';
+import 'react-transition-group';
+import 'classnames';
+import '../../portal/cssm';
+import '../../stack/cssm';
+import './components/notification/component.js';
+import './index.module.css';

package/notification-manager/esm/component.js

@@ -6,7 +6,7 @@ import { Portal } from '../../portal/esm';
 import { stackingOrder, Stack } from '../../stack/esm';
 import { Notification } from './components/notification/component.js';
 
-var styles = {"component":"notification-manager__component_f6dih","notification":"notification-manager__notification_f6dih","withoutMargin":"notification-manager__withoutMargin_f6dih","enter":"notification-manager__enter_f6dih","enterActive":"notification-manager__enterActive_f6dih"};
+var styles = {"component":"notification-manager__component_19o99","notification":"notification-manager__notification_19o99","withoutMargin":"notification-manager__withoutMargin_19o99","enter":"notification-manager__enter_19o99","enterActive":"notification-manager__enterActive_19o99"};
 require('./index.css');
 
 var CSS_TRANSITION_CLASS_NAMES = {

package/notification-manager/esm/index.css

@@ -5,7 +5,7 @@
     --gap-4xl: 48px;
 }
 
-.notification-manager__component_f6dih {
+.notification-manager__component_19o99 {
     position: fixed;
     top: 0;
     right: var(--gap-s);
@@ -13,45 +13,45 @@
     flex-direction: column;
 }
 
-.notification-manager__component_f6dih .notification-manager__notification_f6dih {
+.notification-manager__component_19o99 .notification-manager__notification_19o99 {
     width: calc(100vw - var(--gap-xl));
     margin-top: var(--gap-s);
     will-change: transform
 }
 
-.notification-manager__component_f6dih .notification-manager__notification_f6dih.notification-manager__withoutMargin_f6dih {
+.notification-manager__component_19o99 .notification-manager__notification_19o99.notification-manager__withoutMargin_19o99 {
         margin-top: 0;
     }
 
-.notification-manager__component_f6dih .notification-manager__notification_f6dih.notification-manager__notification_f6dih {
+.notification-manager__component_19o99 .notification-manager__notification_19o99.notification-manager__notification_19o99 {
     position: static;
 }
 
-.notification-manager__enter_f6dih {
+.notification-manager__enter_19o99 {
     visibility: hidden;
     transform: translate(0, -500px);
 }
 
-.notification-manager__enterActive_f6dih {
+.notification-manager__enterActive_19o99 {
     visibility: visible;
     transform: translate(0);
     transition: transform 0.4s ease-out;
 }
 
 @media (min-width: 600px) {
-    .notification-manager__component_f6dih {
+    .notification-manager__component_19o99 {
         right: var(--gap-4xl);
     }
 
-    .notification-manager__component_f6dih .notification-manager__notification_f6dih {
+    .notification-manager__component_19o99 .notification-manager__notification_19o99 {
         width: auto;
     }
 
-    .notification-manager__enter_f6dih {
+    .notification-manager__enter_19o99 {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_f6dih {
+    .notification-manager__enterActive_19o99 {
         transform: translate(0);
     }
 }