@alfalab/core-components-notification-manager 6.0.0 → 6.1.0-snapshot-92b8690

package/dynamic-mixins/component.d.ts

@@ -0,0 +1,69 @@
+import React, { HTMLAttributes } from 'react';
+import { PortalProps } from '@alfalab/core-components-portal';
+import { NotificationElement } from './components';
+export declare type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Массив нотификаций.
+     * В нотификации обязательно передавайте id.
+     */
+    notifications: NotificationElement[];
+    /**
+     * Дополнительный класс (native prop)
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Отступ от верхнего края
+     */
+    offset?: number;
+    /**
+     * Удаление нотификации
+     */
+    onRemoveNotification: (id: string) => void;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: PortalProps['getPortalContainer'];
+};
+export declare const NotificationManager: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Массив нотификаций.
+     * В нотификации обязательно передавайте id.
+     */
+    notifications: NotificationElement[];
+    /**
+     * Дополнительный класс (native prop)
+     */
+    className?: string | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number | undefined;
+    /**
+     * Отступ от верхнего края
+     */
+    offset?: number | undefined;
+    /**
+     * Удаление нотификации
+     */
+    onRemoveNotification: (id: string) => void;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: PortalProps['getPortalContainer'];
+} & React.RefAttributes<HTMLDivElement>>;

package/dynamic-mixins/component.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var reactTransitionGroup = require('react-transition-group');
+var cn = require('classnames');
+var dynamicMixins$2 = require('@alfalab/core-components-portal/dynamic-mixins');
+var dynamicMixins$1 = require('@alfalab/core-components-stack/dynamic-mixins');
+var dynamicMixins = require('@alfalab/core-components-stack-context/dynamic-mixins');
+var component = require('./components/notification/component.js');
+var index_module = require('./index.module.css.js');
+
+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 CSS_TRANSITION_CLASS_NAMES = {
+    enter: index_module.enter,
+    enterActive: index_module.enterActive,
+};
+var 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 ? dynamicMixins.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(dynamicMixins$1.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(dynamicMixins$2.Portal, { getPortalContainer: container },
+        React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(index_module.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(component.Notification, { element: element, className: cn__default.default(index_module.notification, (_a = {},
+                            _a[index_module.withoutMargin] = offset && index === 0,
+                            _a)), onRemoveNotification: onRemoveNotification })));
+            }))))); }));
+});
+NotificationManager.displayName = 'NotificationManager';
+
+exports.NotificationManager = NotificationManager;
+//# sourceMappingURL=component.js.map

package/dynamic-mixins/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../src/component.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport cn from 'classnames';\n\nimport { Portal, PortalProps } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\n\nimport { Notification, NotificationElement } from './components';\n\nimport styles from './index.module.css';\n\nexport type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Массив нотификаций.\n     * В нотификации обязательно передавайте id.\n     */\n    notifications: NotificationElement[];\n\n    /**\n     * Дополнительный класс (native prop)\n     */\n    className?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * z-index компонента\n     */\n    zIndex?: number;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * Удаление нотификации\n     */\n    onRemoveNotification: (id: string) => void;\n\n    /**\n     * Нода, компонент или функция возвращающая их\n     *\n     * Контейнер к которому будут добавляться порталы\n     */\n    container?: PortalProps['getPortalContainer'];\n};\n\nconst CSS_TRANSITION_CLASS_NAMES = {\n    enter: styles.enter,\n    enterActive: styles.enterActive,\n};\n\nconst TIMEOUT = {\n    exit: 0,\n    enter: 400,\n};\n\nexport const NotificationManager = forwardRef<HTMLDivElement, NotificationManagerProps>(\n    (\n        {\n            notifications,\n            className,\n            dataTestId,\n            zIndex = stackingOrder.TOAST,\n            style = {},\n            offset,\n            onRemoveNotification,\n            container,\n            ...restProps\n        },\n        ref,\n    ) => (\n        <Stack value={zIndex}>\n            {(computedZIndex) => (\n                <Portal getPortalContainer={container}>\n                    <div\n                        className={cn(styles.component, className)}\n                        ref={ref}\n                        data-test-id={dataTestId}\n                        style={{\n                            zIndex: computedZIndex,\n                            top: offset,\n                            ...style,\n                        }}\n                        {...restProps}\n                    >\n                        <TransitionGroup>\n                            {notifications.map((element, index) => (\n                                <CSSTransition\n                                    key={element.props.id}\n                                    timeout={TIMEOUT}\n                                    classNames={CSS_TRANSITION_CLASS_NAMES}\n                                    unmountOnExit={true}\n                                >\n                                    <Notification\n                                        element={element}\n                                        className={cn(styles.notification, {\n                                            [styles.withoutMargin]: offset && index === 0,\n                                        })}\n                                        onRemoveNotification={onRemoveNotification}\n                                    />\n                                </CSSTransition>\n                            ))}\n                        </TransitionGroup>\n                    </div>\n                </Portal>\n            )}\n        </Stack>\n    ),\n);\n\nNotificationManager.displayName = 'NotificationManager';\n"],"names":["styles","forwardRef","stackingOrder","__rest","React","Stack","Portal","__assign","cn","TransitionGroup","CSSTransition","Notification"],"mappings":";;;;;;;;;;;;;;;;;;;AAoDA,IAAM,0BAA0B,GAAG;IAC/B,KAAK,EAAEA,YAAM,CAAC,KAAK;IACnB,WAAW,EAAEA,YAAM,CAAC,WAAW;CAClC;AAED,IAAM,OAAO,GAAG;AACZ,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,GAAG;CACb;IAEY,mBAAmB,GAAGC,gBAAU,CACzC,UACI,EAUC,EACD,GAAG,EAAA;AAVC,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAA,GAAA,EAAA,CAAA,MAA4B,EAA5B,MAAM,GAAA,EAAA,KAAA,MAAA,GAAGC,2BAAa,CAAC,KAAK,GAAA,EAAA,EAC5B,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAAC,YAAA,CAAA,EAAA,EAThB,8GAUC,CADe;AAGf,IAAA,QACDC,sBAAC,CAAA,aAAA,CAAAC,qBAAK,IAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA,EAAK,QACjBD,sBAAA,CAAA,aAAA,CAACE,sBAAM,EAAC,EAAA,kBAAkB,EAAE,SAAS,EAAA;AACjC,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAAG,cAAA,CAAA,EACI,SAAS,EAAEC,mBAAE,CAACR,YAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,EACM,cAAA,EAAA,UAAU,EACxB,KAAK,EACDO,cAAA,CAAA,EAAA,MAAM,EAAE,cAAc,EACtB,GAAG,EAAE,MAAM,EACR,EAAA,KAAK,KAER,SAAS,CAAA;YAEbH,sBAAC,CAAA,aAAA,CAAAK,oCAAe,QACX,aAAa,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,EAAA;;gBAAK,QACnCL,qCAACM,kCAAa,EAAA,EACV,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACrB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,0BAA0B,EACtC,aAAa,EAAE,IAAI,EAAA;AAEnB,oBAAAN,sBAAA,CAAA,aAAA,CAACO,sBAAY,EAAA,EACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEH,mBAAE,CAACR,YAAM,CAAC,YAAY,GAAA,EAAA,GAAA,EAAA;4BAC7B,EAAC,CAAAA,YAAM,CAAC,aAAa,CAAA,GAAG,MAAM,IAAI,KAAK,KAAK,CAAC;AAC/C,4BAAA,EAAA,EAAA,EACF,oBAAoB,EAAE,oBAAoB,EAAA,CAC5C,CACU;aACnB,CAAC,CACY,CAChB,CACD,EAhCQ,EAiCpB,CACG;AACX,CAAA;AAGL,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}

package/dynamic-mixins/components/index.d.ts

@@ -0,0 +1 @@
+export * from './notification';

package/dynamic-mixins/components/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var component = require('./notification/component.js');
+
+
+
+exports.Notification = component.Notification;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dynamic-mixins/components/notification/component.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';
+export declare type NotificationElement = ReactElement<CoreNotificationProps & {
+    id: string;
+}>;
+declare type NotificationProps = {
+    element: NotificationElement;
+    className: string;
+    onRemoveNotification: (id: string) => void;
+};
+export declare const Notification: FC<NotificationProps>;
+export {};

package/dynamic-mixins/components/notification/component.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 () {
+        if (onClose) {
+            onClose();
+        }
+        onRemoveNotification(element.props.id);
+    }, [onClose, onRemoveNotification, element.props.id]);
+    var handleCloseTimeout = React.useCallback(function () {
+        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);
+};
+
+exports.Notification = Notification;
+//# sourceMappingURL=component.js.map

package/dynamic-mixins/components/notification/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../src/components/notification/component.tsx"],"sourcesContent":["import { cloneElement, FC, ReactElement, useCallback, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';\n\nexport type NotificationElement = ReactElement<CoreNotificationProps & { id: string }>;\n\ntype NotificationProps = {\n    element: NotificationElement;\n    className: string;\n    onRemoveNotification: (id: string) => void;\n};\n\nexport const Notification: FC<NotificationProps> = ({\n    element,\n    className,\n    onRemoveNotification,\n}) => {\n    const { onClose, onCloseTimeout } = element.props;\n\n    const handleClose = useCallback(() => {\n        if (onClose) {\n            onClose();\n        }\n\n        onRemoveNotification(element.props.id);\n    }, [onClose, onRemoveNotification, element.props.id]);\n\n    const handleCloseTimeout = useCallback(() => {\n        if (onCloseTimeout) {\n            onCloseTimeout();\n        }\n\n        onRemoveNotification(element.props.id);\n    }, [element.props.id, onCloseTimeout, onRemoveNotification]);\n\n    const notificationProps = useMemo<CoreNotificationProps>(\n        () => ({\n            ...element.props,\n            visible: true,\n            className: cn(className, element.props.className),\n            usePortal: false,\n            offset: 0,\n            onClose: handleClose,\n            onCloseTimeout: handleCloseTimeout,\n        }),\n        [element, handleClose, handleCloseTimeout, className],\n    );\n\n    return cloneElement(element, notificationProps);\n};\n"],"names":["useCallback","useMemo","__assign","cn","cloneElement"],"mappings":";;;;;;;;;;;;AAaO,IAAM,YAAY,GAA0B,UAAC,EAInD,EAAA;AAHG,IAAA,IAAA,OAAO,aAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,oBAAoB,GAAA,EAAA,CAAA,oBAAA;IAEd,IAAA,EAAA,GAA8B,OAAO,CAAC,KAAK,EAAzC,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,cAAc,GAAA,EAAA,CAAA,cAAkB;IAEjD,IAAM,WAAW,GAAGA,iBAAW,CAAC,YAAA;AAC5B,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,EAAE;AACZ;AAED,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAErD,IAAM,kBAAkB,GAAGA,iBAAW,CAAC,YAAA;AACnC,QAAA,IAAI,cAAc,EAAE;AAChB,YAAA,cAAc,EAAE;AACnB;AAED,QAAA,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAC1C,KAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,oBAAoB,CAAC,CAAC;IAE5D,IAAM,iBAAiB,GAAGC,aAAO,CAC7B,YAAA,EAAM,QAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,OAAO,CAAC,KAAK,CAAA,EAAA,EAChB,OAAO,EAAE,IAAI,EACb,SAAS,EAAEC,mBAAE,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,EACjD,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,kBAAkB,EACpC,CAAA,EAAA,EAAA,EACF,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,CAAC,CACxD;AAED,IAAA,OAAOC,kBAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC;AACnD;;;;"}

package/dynamic-mixins/components/notification/index.d.ts

@@ -0,0 +1 @@
+export * from './component';

package/dynamic-mixins/components/notification/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var component = require('./component.js');
+
+
+
+exports.Notification = component.Notification;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/components/notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dynamic-mixins/index.css

@@ -0,0 +1,46 @@
+:root {
+    --gap-s: 12px;
+    --gap-xl: 24px;
+    --gap-4xl: 48px;
+    --gap-0: 0px;
+    --gap-12: var(--gap-s);
+    --gap-24: var(--gap-xl);
+    --gap-48: var(--gap-4xl);
+} .notification-manager__component_19gii {
+    position: fixed;
+    top: var(--gap-0);
+    right: var(--gap-12);
+    display: flex;
+    flex-direction: column;
+} .notification-manager__component_19gii .notification-manager__notification_19gii {
+    width: calc(100vw - var(--gap-24));
+    margin-top: var(--gap-12);
+    will-change: transform
+} .notification-manager__component_19gii .notification-manager__notification_19gii.notification-manager__withoutMargin_19gii {
+        margin-top: var(--gap-0);
+    } .notification-manager__component_19gii .notification-manager__notification_19gii.notification-manager__notification_19gii {
+    position: static;
+} .notification-manager__enter_19gii {
+    visibility: hidden;
+    transform: translate(0, -500px);
+} .notification-manager__enterActive_19gii {
+    visibility: visible;
+    transform: translate(0);
+    transition: transform 0.4s ease-out;
+} @media (min-width: 600px) {
+    .notification-manager__component_19gii {
+        right: var(--gap-48);
+    }
+
+    .notification-manager__component_19gii .notification-manager__notification_19gii {
+        width: auto;
+    }
+
+    .notification-manager__enter_19gii {
+        transform: translate(100%, 0);
+    }
+
+    .notification-manager__enterActive_19gii {
+        transform: translate(0);
+    }
+}

package/dynamic-mixins/index.d.ts

@@ -0,0 +1 @@
+export * from './component';

package/dynamic-mixins/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var component = require('./component.js');
+
+
+
+exports.NotificationManager = component.NotificationManager;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dynamic-mixins/index.module.css.js

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./index.css');
+
+var styles = {"component":"notification-manager__component_19gii","notification":"notification-manager__notification_19gii","withoutMargin":"notification-manager__withoutMargin_19gii","enter":"notification-manager__enter_19gii","enterActive":"notification-manager__enterActive_19gii"};
+
+module.exports = styles;
+//# sourceMappingURL=index.module.css.js.map

package/dynamic-mixins/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\n\n.enter {\n    visibility: hidden;\n    transform: translate(0, -500px);\n}\n\n.enterActive {\n    visibility: visible;\n    transform: translate(0);\n    transition: transform 0.4s ease-out;\n}\n\n@media (--tablet-s) {\n    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n\n    .enter {\n        transform: translate(100%, 0);\n    }\n\n    .enterActive {\n        transform: translate(0);\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}

package/esm/index.css

@@ -6,41 +6,41 @@
     --gap-12: var(--gap-s);
     --gap-24: var(--gap-xl);
     --gap-48: var(--gap-4xl);
-} .notification-manager__component_16uav {
+} .notification-manager__component_19gii {
     position: fixed;
     top: var(--gap-0);
     right: var(--gap-12);
     display: flex;
     flex-direction: column;
-} .notification-manager__component_16uav .notification-manager__notification_16uav {
+} .notification-manager__component_19gii .notification-manager__notification_19gii {
     width: calc(100vw - var(--gap-24));
     margin-top: var(--gap-12);
     will-change: transform
-} .notification-manager__component_16uav .notification-manager__notification_16uav.notification-manager__withoutMargin_16uav {
+} .notification-manager__component_19gii .notification-manager__notification_19gii.notification-manager__withoutMargin_19gii {
         margin-top: var(--gap-0);
-    } .notification-manager__component_16uav .notification-manager__notification_16uav.notification-manager__notification_16uav {
+    } .notification-manager__component_19gii .notification-manager__notification_19gii.notification-manager__notification_19gii {
     position: static;
-} .notification-manager__enter_16uav {
+} .notification-manager__enter_19gii {
     visibility: hidden;
     transform: translate(0, -500px);
-} .notification-manager__enterActive_16uav {
+} .notification-manager__enterActive_19gii {
     visibility: visible;
     transform: translate(0);
     transition: transform 0.4s ease-out;
 } @media (min-width: 600px) {
-    .notification-manager__component_16uav {
+    .notification-manager__component_19gii {
         right: var(--gap-48);
     }
 
-    .notification-manager__component_16uav .notification-manager__notification_16uav {
+    .notification-manager__component_19gii .notification-manager__notification_19gii {
         width: auto;
     }
 
-    .notification-manager__enter_16uav {
+    .notification-manager__enter_19gii {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_16uav {
+    .notification-manager__enterActive_19gii {
         transform: translate(0);
     }
 }

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"notification-manager__component_16uav","notification":"notification-manager__notification_16uav","withoutMargin":"notification-manager__withoutMargin_16uav","enter":"notification-manager__enter_16uav","enterActive":"notification-manager__enterActive_16uav"};
+var styles = {"component":"notification-manager__component_19gii","notification":"notification-manager__notification_19gii","withoutMargin":"notification-manager__withoutMargin_19gii","enter":"notification-manager__enter_19gii","enterActive":"notification-manager__enterActive_19gii"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\n\n.enter {\n    visibility: hidden;\n    transform: translate(0, -500px);\n}\n\n.enterActive {\n    visibility: visible;\n    transform: translate(0);\n    transition: transform 0.4s ease-out;\n}\n\n@media (--tablet-s) {\n    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n\n    .enter {\n        transform: translate(100%, 0);\n    }\n\n    .enterActive {\n        transform: translate(0);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\n\n.enter {\n    visibility: hidden;\n    transform: translate(0, -500px);\n}\n\n.enterActive {\n    visibility: visible;\n    transform: translate(0);\n    transition: transform 0.4s ease-out;\n}\n\n@media (--tablet-s) {\n    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n\n    .enter {\n        transform: translate(100%, 0);\n    }\n\n    .enterActive {\n        transform: translate(0);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}

package/index.css

@@ -6,41 +6,41 @@
     --gap-12: var(--gap-s);
     --gap-24: var(--gap-xl);
     --gap-48: var(--gap-4xl);
-} .notification-manager__component_16uav {
+} .notification-manager__component_19gii {
     position: fixed;
     top: var(--gap-0);
     right: var(--gap-12);
     display: flex;
     flex-direction: column;
-} .notification-manager__component_16uav .notification-manager__notification_16uav {
+} .notification-manager__component_19gii .notification-manager__notification_19gii {
     width: calc(100vw - var(--gap-24));
     margin-top: var(--gap-12);
     will-change: transform
-} .notification-manager__component_16uav .notification-manager__notification_16uav.notification-manager__withoutMargin_16uav {
+} .notification-manager__component_19gii .notification-manager__notification_19gii.notification-manager__withoutMargin_19gii {
         margin-top: var(--gap-0);
-    } .notification-manager__component_16uav .notification-manager__notification_16uav.notification-manager__notification_16uav {
+    } .notification-manager__component_19gii .notification-manager__notification_19gii.notification-manager__notification_19gii {
     position: static;
-} .notification-manager__enter_16uav {
+} .notification-manager__enter_19gii {
     visibility: hidden;
     transform: translate(0, -500px);
-} .notification-manager__enterActive_16uav {
+} .notification-manager__enterActive_19gii {
     visibility: visible;
     transform: translate(0);
     transition: transform 0.4s ease-out;
 } @media (min-width: 600px) {
-    .notification-manager__component_16uav {
+    .notification-manager__component_19gii {
         right: var(--gap-48);
     }
 
-    .notification-manager__component_16uav .notification-manager__notification_16uav {
+    .notification-manager__component_19gii .notification-manager__notification_19gii {
         width: auto;
     }
 
-    .notification-manager__enter_16uav {
+    .notification-manager__enter_19gii {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_16uav {
+    .notification-manager__enterActive_19gii {
         transform: translate(0);
     }
 }

package/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"notification-manager__component_16uav","notification":"notification-manager__notification_16uav","withoutMargin":"notification-manager__withoutMargin_16uav","enter":"notification-manager__enter_16uav","enterActive":"notification-manager__enterActive_16uav"};
+var styles = {"component":"notification-manager__component_19gii","notification":"notification-manager__notification_19gii","withoutMargin":"notification-manager__withoutMargin_19gii","enter":"notification-manager__enter_19gii","enterActive":"notification-manager__enterActive_19gii"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\n\n.enter {\n    visibility: hidden;\n    transform: translate(0, -500px);\n}\n\n.enterActive {\n    visibility: visible;\n    transform: translate(0);\n    transition: transform 0.4s ease-out;\n}\n\n@media (--tablet-s) {\n    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n\n    .enter {\n        transform: translate(100%, 0);\n    }\n\n    .enterActive {\n        transform: translate(0);\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\n\n.enter {\n    visibility: hidden;\n    transform: translate(0, -500px);\n}\n\n.enterActive {\n    visibility: visible;\n    transform: translate(0);\n    transition: transform 0.4s ease-out;\n}\n\n@media (--tablet-s) {\n    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n\n    .enter {\n        transform: translate(100%, 0);\n    }\n\n    .enterActive {\n        transform: translate(0);\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}

package/modern/index.css

@@ -6,41 +6,41 @@
     --gap-12: var(--gap-s);
     --gap-24: var(--gap-xl);
     --gap-48: var(--gap-4xl);
-} .notification-manager__component_16uav {
+} .notification-manager__component_19gii {
     position: fixed;
     top: var(--gap-0);
     right: var(--gap-12);
     display: flex;
     flex-direction: column;
-} .notification-manager__component_16uav .notification-manager__notification_16uav {
+} .notification-manager__component_19gii .notification-manager__notification_19gii {
     width: calc(100vw - var(--gap-24));
     margin-top: var(--gap-12);
     will-change: transform
-} .notification-manager__component_16uav .notification-manager__notification_16uav.notification-manager__withoutMargin_16uav {
+} .notification-manager__component_19gii .notification-manager__notification_19gii.notification-manager__withoutMargin_19gii {
         margin-top: var(--gap-0);
-    } .notification-manager__component_16uav .notification-manager__notification_16uav.notification-manager__notification_16uav {
+    } .notification-manager__component_19gii .notification-manager__notification_19gii.notification-manager__notification_19gii {
     position: static;
-} .notification-manager__enter_16uav {
+} .notification-manager__enter_19gii {
     visibility: hidden;
     transform: translate(0, -500px);
-} .notification-manager__enterActive_16uav {
+} .notification-manager__enterActive_19gii {
     visibility: visible;
     transform: translate(0);
     transition: transform 0.4s ease-out;
 } @media (min-width: 600px) {
-    .notification-manager__component_16uav {
+    .notification-manager__component_19gii {
         right: var(--gap-48);
     }
 
-    .notification-manager__component_16uav .notification-manager__notification_16uav {
+    .notification-manager__component_19gii .notification-manager__notification_19gii {
         width: auto;
     }
 
-    .notification-manager__enter_16uav {
+    .notification-manager__enter_19gii {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_16uav {
+    .notification-manager__enterActive_19gii {
         transform: translate(0);
     }
 }

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"notification-manager__component_16uav","notification":"notification-manager__notification_16uav","withoutMargin":"notification-manager__withoutMargin_16uav","enter":"notification-manager__enter_16uav","enterActive":"notification-manager__enterActive_16uav"};
+const styles = {"component":"notification-manager__component_19gii","notification":"notification-manager__notification_19gii","withoutMargin":"notification-manager__withoutMargin_19gii","enter":"notification-manager__enter_19gii","enterActive":"notification-manager__enterActive_19gii"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\n\n.enter {\n    visibility: hidden;\n    transform: translate(0, -500px);\n}\n\n.enterActive {\n    visibility: visible;\n    transform: translate(0);\n    transition: transform 0.4s ease-out;\n}\n\n@media (--tablet-s) {\n    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n\n    .enter {\n        transform: translate(100%, 0);\n    }\n\n    .enterActive {\n        transform: translate(0);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n    position: fixed;\n    top: var(--gap-0);\n    right: var(--gap-12);\n    display: flex;\n    flex-direction: column;\n}\n\n.component .notification {\n    width: calc(100vw - var(--gap-24));\n    margin-top: var(--gap-12);\n    will-change: transform;\n\n    &.withoutMargin {\n        margin-top: var(--gap-0);\n    }\n}\n\n.component .notification.notification {\n    position: static;\n}\n\n.enter {\n    visibility: hidden;\n    transform: translate(0, -500px);\n}\n\n.enterActive {\n    visibility: visible;\n    transform: translate(0);\n    transition: transform 0.4s ease-out;\n}\n\n@media (--tablet-s) {\n    .component {\n        right: var(--gap-48);\n    }\n\n    .component .notification {\n        width: auto;\n    }\n\n    .enter {\n        transform: translate(100%, 0);\n    }\n\n    .enterActive {\n        transform: translate(0);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,uCAAuC,CAAC,cAAc,CAAC,0CAA0C,CAAC,eAAe,CAAC,2CAA2C,CAAC,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,yCAAyC,CAAC;;;;"}

package/moderncssm/index.module.css

@@ -1,3 +1,5 @@
+
+
 .component {
     position: fixed;
     top: var(--gap-0);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-notification-manager",
-    "version": "6.0.0",
+    "version": "6.1.0-snapshot-92b8690",
     "description": "Notification manager",
     "keywords": [],
     "license": "MIT",
@@ -10,15 +10,15 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-notification": "^8.0.0",
-        "@alfalab/core-components-portal": "^4.0.0",
-        "@alfalab/core-components-stack": "^6.0.0",
+        "@alfalab/core-components-notification": "8.1.0-snapshot-92b8690",
+        "@alfalab/core-components-portal": "4.1.0-snapshot-92b8690",
+        "@alfalab/core-components-stack": "6.1.0-snapshot-92b8690",
         "classnames": "^2.5.1",
         "react-transition-group": "^4.4.5",
         "tslib": "^2.4.0"
     },
     "peerDependencies": {
-        "@alfalab/core-components-stack-context": "^1.0.0",
+        "@alfalab/core-components-stack-context": "1.1.0-snapshot-92b8690",
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0",
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
@@ -26,6 +26,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.0.0",
-    "varsVersion": "10.0.0"
+    "themesVersion": "14.1.0-snapshot-92b8690",
+    "varsVersion": "10.1.0-snapshot-92b8690"
 }

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';
 
 .component {
     position: fixed;