@alfalab/core-components-notification 8.0.0 → 8.1.0-snapshot-92b8690

package/dynamic-mixins/Component.d.ts

@@ -0,0 +1,86 @@
+import React, { MouseEvent } from 'react';
+import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/desktop';
+export declare type NotificationProps = ToastPlateDesktopProps & {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Отступ от верхнего края
+     */
+    offset?: number;
+    /**
+     * Время до закрытия компонента
+     */
+    autoCloseDelay?: number | null;
+    /**
+     * Использовать портал
+     */
+    usePortal?: boolean;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Позиционирование компонента от верхнего или нижнего края экрана
+     */
+    position?: 'top' | 'bottom';
+    /**
+     * Обработчик события истечения времени до закрытия компонента
+     */
+    onCloseTimeout?: () => void;
+    /**
+     * Обработчик события наведения курсора на компонент
+     */
+    onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик события снятия курсора с компонента
+     */
+    onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик клика вне компонента
+     */
+    onClickOutside?: (event?: MouseEvent<any>) => void;
+};
+export declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean | undefined;
+    /**
+     * Отступ от верхнего края
+     */
+    offset?: number | undefined;
+    /**
+     * Время до закрытия компонента
+     */
+    autoCloseDelay?: number | null | undefined;
+    /**
+     * Использовать портал
+     */
+    usePortal?: boolean | undefined;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number | undefined;
+    /**
+     * Позиционирование компонента от верхнего или нижнего края экрана
+     */
+    position?: "top" | "bottom" | undefined;
+    /**
+     * Обработчик события истечения времени до закрытия компонента
+     */
+    onCloseTimeout?: (() => void) | undefined;
+    /**
+     * Обработчик события наведения курсора на компонент
+     */
+    onMouseEnter?: ((event?: MouseEvent<HTMLDivElement>) => void) | undefined;
+    /**
+     * Обработчик события снятия курсора с компонента
+     */
+    onMouseLeave?: ((event?: MouseEvent<HTMLDivElement>) => void) | undefined;
+    /**
+     * Обработчик клика вне компонента
+     */
+    onClickOutside?: ((event?: MouseEvent<any>) => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dynamic-mixins/Component.js

@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 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 desktop = require('@alfalab/core-components-toast-plate/dynamic-mixins/desktop');
+var index = require('./utils/index.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 mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var elementClosest__default = /*#__PURE__*/_interopDefaultCompat(elementClosest);
+
+var notificationClassNameSelector = ".".concat(index_module.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 ? dynamicMixins.stackingOrder.TOAST : _f, style = _a.style, _g = _a.position, position = _g === void 0 ? 'top' : _g, 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", "position", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
+    var notificationRef = React.useRef(null);
+    var autoCloseTimeoutRef = React.useRef(0);
+    var closeTimeoutRef = React.useRef(0);
+    var _h = React.useState(false), isClosing = _h[0], setIsClosing = _h[1];
+    var startAutoCloseTimer = React.useCallback(function () {
+        if (autoCloseDelay !== null) {
+            autoCloseTimeoutRef.current = window.setTimeout(function () {
+                if (onCloseTimeout) {
+                    onCloseTimeout();
+                }
+            }, autoCloseDelay);
+        }
+    }, [autoCloseDelay, onCloseTimeout]);
+    var stopAutoCloseTimer = React.useCallback(function () {
+        clearTimeout(autoCloseTimeoutRef.current);
+    }, []);
+    React.useEffect(function () { return function () {
+        clearTimeout(closeTimeoutRef.current);
+    }; }, []);
+    React.useEffect(function () {
+        elementClosest__default.default(window);
+    }, []);
+    React.useEffect(function () {
+        if (visible) {
+            startAutoCloseTimer();
+        }
+        return function () {
+            stopAutoCloseTimer();
+        };
+    }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);
+    var handleMouseEnter = React.useCallback(function (event) {
+        stopAutoCloseTimer();
+        if (onMouseEnter) {
+            onMouseEnter(event);
+        }
+    }, [onMouseEnter, stopAutoCloseTimer]);
+    var handleMouseLeave = React.useCallback(function (event) {
+        stopAutoCloseTimer();
+        startAutoCloseTimer();
+        if (onMouseLeave) {
+            onMouseLeave(event);
+        }
+    }, [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer]);
+    var handleOutsideClick = React.useCallback(function (event) {
+        var isTargetNotification = !!event.target.closest(notificationClassNameSelector);
+        /*
+         * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick
+         * при клике на другие нотификации, если их несколько на странице
+         */
+        if (onClickOutside && visible && !isTargetNotification) {
+            onClickOutside(event);
+        }
+    }, [onClickOutside, visible]);
+    index.useClickOutside(notificationRef, handleOutsideClick);
+    var swipeableHandlers = reactSwipeable.useSwipeable({
+        onSwiped: function (_a) {
+            var dir = _a.dir;
+            if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {
+                setIsClosing(true);
+                closeTimeoutRef.current = window.setTimeout(function () {
+                    setIsClosing(false);
+                    onClose();
+                }, 100);
+            }
+        },
+        delta: 100,
+    });
+    var Wrapper = usePortal ? dynamicMixins$2.Portal : React.Fragment;
+    return (React__default.default.createElement(dynamicMixins$1.Stack, { value: zIndex }, function (computedZIndex) {
+        var _a, _b;
+        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(index_module.notificationComponent, (_a = {},
+                        _a[index_module.isVisible] = visible,
+                        _a[index_module.isClosing] = isClosing,
+                        _a), className), contentClassName: index_module.toastContent, actionSectionClassName: cn__default.default(actionSectionClassName, index_module.actionSection), style: tslib.__assign((_b = {}, _b[position] = offset, _b.zIndex = computedZIndex, _b), style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default.default([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
+    }));
+});
+Notification.displayName = 'Notification';
+
+exports.Notification = Notification;
+//# 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, {\n    forwardRef,\n    Fragment,\n    MouseEvent,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\nimport elementClosest from 'element-closest';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport {\n    ToastPlateDesktop,\n    ToastPlateDesktopProps,\n} from '@alfalab/core-components-toast-plate/desktop';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateDesktopProps & {\n    /**\n     * Управление видимостью компонента\n     */\n    visible?: boolean;\n\n    /**\n     * Отступ от верхнего края\n     */\n    offset?: number;\n\n    /**\n     * Время до закрытия компонента\n     */\n    autoCloseDelay?: number | null;\n\n    /**\n     * Использовать портал\n     */\n    usePortal?: boolean;\n\n    /**\n     * z-index компонента\n     */\n    zIndex?: number;\n\n    /**\n     * Позиционирование компонента от верхнего или нижнего края экрана\n     */\n    position?: 'top' | 'bottom';\n\n    /**\n     * Обработчик события истечения времени до закрытия компонента\n     */\n    onCloseTimeout?: () => void;\n\n    /**\n     * Обработчик события наведения курсора на компонент\n     */\n    onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Обработчик события снятия курсора с компонента\n     */\n    onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Обработчик клика вне компонента\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n    (\n        {\n            className,\n            actionSectionClassName,\n            children,\n            visible,\n            offset = 108,\n            hasCloser = true,\n            autoCloseDelay = 5000,\n            usePortal = true,\n            zIndex = stackingOrder.TOAST,\n            style,\n            position = 'top',\n            onClose,\n            onCloseTimeout,\n            onMouseEnter,\n            onMouseLeave,\n            onClickOutside,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const notificationRef = useRef<HTMLDivElement>(null);\n        const autoCloseTimeoutRef = useRef(0);\n        const closeTimeoutRef = useRef(0);\n\n        const [isClosing, setIsClosing] = useState(false);\n\n        const startAutoCloseTimer = useCallback(() => {\n            if (autoCloseDelay !== null) {\n                autoCloseTimeoutRef.current = window.setTimeout(() => {\n                    if (onCloseTimeout) {\n                        onCloseTimeout();\n                    }\n                }, autoCloseDelay);\n            }\n        }, [autoCloseDelay, onCloseTimeout]);\n\n        const stopAutoCloseTimer = useCallback(() => {\n            clearTimeout(autoCloseTimeoutRef.current);\n        }, []);\n\n        useEffect(\n            () => () => {\n                clearTimeout(closeTimeoutRef.current);\n            },\n            [],\n        );\n\n        useEffect(() => {\n            elementClosest(window);\n        }, []);\n\n        useEffect(() => {\n            if (visible) {\n                startAutoCloseTimer();\n            }\n\n            return () => {\n                stopAutoCloseTimer();\n            };\n        }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n        const handleMouseEnter = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                stopAutoCloseTimer();\n\n                if (onMouseEnter) {\n                    onMouseEnter(event);\n                }\n            },\n            [onMouseEnter, stopAutoCloseTimer],\n        );\n\n        const handleMouseLeave = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                stopAutoCloseTimer();\n                startAutoCloseTimer();\n\n                if (onMouseLeave) {\n                    onMouseLeave(event);\n                }\n            },\n            [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n        );\n\n        const handleOutsideClick = useCallback(\n            (event: React.MouseEvent | React.TouchEvent) => {\n                const isTargetNotification = !!(event.target as Element).closest(\n                    notificationClassNameSelector,\n                );\n\n                /*\n                 * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n                 * при клике на другие нотификации, если их несколько на странице\n                 */\n                if (onClickOutside && visible && !isTargetNotification) {\n                    onClickOutside(event as React.MouseEvent);\n                }\n            },\n            [onClickOutside, visible],\n        );\n\n        useClickOutside(notificationRef, handleOutsideClick);\n\n        const swipeableHandlers = useSwipeable({\n            onSwiped: ({ dir }) => {\n                if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {\n                    setIsClosing(true);\n\n                    closeTimeoutRef.current = window.setTimeout(() => {\n                        setIsClosing(false);\n                        onClose();\n                    }, 100);\n                }\n            },\n            delta: 100,\n        });\n\n        const Wrapper = usePortal ? Portal : Fragment;\n\n        return (\n            <Stack value={zIndex}>\n                {(computedZIndex) => (\n                    <Wrapper>\n                        <div {...swipeableHandlers}>\n                            <ToastPlateDesktop\n                                className={cn(\n                                    styles.notificationComponent,\n                                    {\n                                        [styles.isVisible]: visible,\n                                        [styles.isClosing]: isClosing,\n                                    },\n                                    className,\n                                )}\n                                contentClassName={styles.toastContent}\n                                actionSectionClassName={cn(\n                                    actionSectionClassName,\n                                    styles.actionSection,\n                                )}\n                                style={{\n                                    [position]: offset,\n                                    zIndex: computedZIndex,\n                                    ...style,\n                                }}\n                                onMouseEnter={handleMouseEnter}\n                                onMouseLeave={handleMouseLeave}\n                                ref={mergeRefs([ref, notificationRef])}\n                                role={visible ? 'alert' : undefined}\n                                hasCloser={hasCloser}\n                                onClose={onClose}\n                                {...restProps}\n                            >\n                                {children}\n                            </ToastPlateDesktop>\n                        </div>\n                    </Wrapper>\n                )}\n            </Stack>\n        );\n    },\n);\n\nNotification.displayName = 'Notification';\n"],"names":["styles","forwardRef","stackingOrder","__rest","useRef","useState","useCallback","useEffect","elementClosest","useClickOutside","useSwipeable","Portal","Fragment","React","Stack","__assign","ToastPlateDesktop","cn","mergeRefs"],"mappings":"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"}

package/dynamic-mixins/index.css

@@ -0,0 +1,49 @@
+:root {
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-xl: 24px;
+    --gap-4xl: 48px;
+    --gap-s-neg: -12px;
+    --gap-0: 0px;
+    --gap-8: var(--gap-xs);
+    --gap-12: var(--gap-s);
+    --gap-24: var(--gap-xl);
+    --gap-48: var(--gap-4xl);
+    --gap-12-neg: var(--gap-s-neg);
+} :root {
+    --notification-desktop-content-width: 278px;
+} .notification__notificationComponent_1wz1k {
+    visibility: hidden;
+    right: var(--gap-12);
+    transform: translate(0, -500px);
+    width: calc(100% - var(--gap-24));
+    max-width: calc(100vw - var(--gap-24));
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    transition: transform 0.4s ease-out
+} @media screen and (min-width: 600px) { .notification__notificationComponent_1wz1k {
+        right: var(--gap-48);
+        width: auto;
+        transform: translate(calc(100% + var(--gap-48)), 0)
+}
+    } .notification__notificationComponent_1wz1k.notification__isVisible_1wz1k {
+        visibility: visible;
+        transform: translate(0, 0);
+    } .notification__notificationComponent_1wz1k.notification__isClosing_1wz1k {
+        transition: transform 0.1s ease-out;
+        transform: translate(100vw, 0)
+    } @media screen and (min-width: 600px) { .notification__notificationComponent_1wz1k.notification__isClosing_1wz1k {
+            transform: translate(calc(100% + var(--gap-48)), 0)
+    }
+        } .notification__notificationComponent_1wz1k.notification__notificationComponent_1wz1k {
+    position: fixed;
+} @media screen and (min-width: 600px) { .notification__toastContent_1wz1k {
+        width: var(--notification-desktop-content-width)
+}
+    } .notification__actionSection_1wz1k {
+    min-width: 104px;
+    min-height: 48px;
+    padding: var(--gap-0) var(--gap-8);
+    margin: var(--gap-12-neg) var(--gap-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.Notification = Component.Notification;
+//# 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 = {"notificationComponent":"notification__notificationComponent_1wz1k","isVisible":"notification__isVisible_1wz1k","isClosing":"notification__isClosing_1wz1k","toastContent":"notification__toastContent_1wz1k","actionSection":"notification__actionSection_1wz1k"};
+
+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:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}

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

@@ -0,0 +1 @@
+export { getNotificationTestIds } from '../utils/getNotificationTestIds';

package/dynamic-mixins/shared/index.js

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

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

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

package/dynamic-mixins/utils/getNotificationTestIds.d.ts

@@ -0,0 +1,4 @@
+export declare function getNotificationTestIds(dataTestId: string): {
+    badge: string;
+    component: string;
+};

package/dynamic-mixins/utils/getNotificationTestIds.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dynamicMixins = require('@alfalab/core-components-shared/dynamic-mixins');
+
+function getNotificationTestIds(dataTestId) {
+    return {
+        badge: dynamicMixins.getDataTestId(dataTestId, 'badge'),
+        component: dynamicMixins.getDataTestId(dataTestId, 'component'),
+    };
+}
+
+exports.getNotificationTestIds = getNotificationTestIds;
+//# sourceMappingURL=getNotificationTestIds.js.map

package/dynamic-mixins/utils/getNotificationTestIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getNotificationTestIds.js","sources":["../../src/utils/getNotificationTestIds.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\n\nexport function getNotificationTestIds(dataTestId: string) {\n    return {\n        badge: getDataTestId(dataTestId, 'badge'),\n        component: getDataTestId(dataTestId, 'component'),\n    };\n}\n"],"names":["getDataTestId"],"mappings":";;;;;;AAEM,SAAU,sBAAsB,CAAC,UAAkB,EAAA;IACrD,OAAO;AACH,QAAA,KAAK,EAAEA,2BAAa,CAAC,UAAU,EAAE,OAAO,CAAC;AACzC,QAAA,SAAS,EAAEA,2BAAa,CAAC,UAAU,EAAE,WAAW,CAAC;KACpD;AACL;;;;"}

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function useClickOutside(ref: React.RefObject<HTMLElement>, cb: (e: React.MouseEvent | React.TouchEvent) => void): void;

package/dynamic-mixins/utils/index.js

@@ -0,0 +1,36 @@
+'use strict';
+
+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);
+
+/*
+ * Дублирую хук из @alfalab/hooks, так как не подходят названия событий
+ * https://github.com/core-ds/utils/blob/develop/packages/hooks/src/useClickOutside/hook.ts
+ * issue завел, когда изменения будут реализованы, отсюда можно будет удалить
+ * https://github.com/core-ds/utils/issues/35
+ */
+function useClickOutside(ref, cb) {
+    React__default.default.useEffect(function () {
+        // eslint-disable-next-line
+        var handler = function (event) {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            cb(event);
+        };
+        document.addEventListener('click', handler);
+        document.addEventListener('touchend', handler);
+        return function () {
+            document.removeEventListener('click', handler);
+            document.removeEventListener('touchend', handler);
+        };
+    }, [ref, cb]);
+}
+
+exports.useClickOutside = useClickOutside;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":["import React from 'react';\n\n/*\n * Дублирую хук из @alfalab/hooks, так как не подходят названия событий\n * https://github.com/core-ds/utils/blob/develop/packages/hooks/src/useClickOutside/hook.ts\n * issue завел, когда изменения будут реализованы, отсюда можно будет удалить\n * https://github.com/core-ds/utils/issues/35\n */\nexport function useClickOutside(\n    ref: React.RefObject<HTMLElement>,\n    cb: (e: React.MouseEvent | React.TouchEvent) => void,\n): void {\n    React.useEffect(() => {\n        // eslint-disable-next-line\n        const handler = (event: any) => {\n            if (!ref.current || ref.current.contains(event.target)) {\n                return;\n            }\n\n            cb(event);\n        };\n\n        document.addEventListener('click', handler);\n        document.addEventListener('touchend', handler);\n\n        return () => {\n            document.removeEventListener('click', handler);\n            document.removeEventListener('touchend', handler);\n        };\n    }, [ref, cb]);\n}\n"],"names":["React"],"mappings":";;;;;;;;;;AAEA;;;;;AAKG;AACa,SAAA,eAAe,CAC3B,GAAiC,EACjC,EAAoD,EAAA;IAEpDA,sBAAK,CAAC,SAAS,CAAC,YAAA;;QAEZ,IAAM,OAAO,GAAG,UAAC,KAAU,EAAA;AACvB,YAAA,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBACpD;AACH;YAED,EAAE,CAAC,KAAK,CAAC;AACb,SAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC3C,QAAA,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;QAE9C,OAAO,YAAA;AACH,YAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC9C,YAAA,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC;AACrD,SAAC;AACL,KAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AACjB;;;;"}

package/esm/index.css

@@ -12,7 +12,7 @@
     --gap-12-neg: var(--gap-s-neg);
 } :root {
     --notification-desktop-content-width: 278px;
-} .notification__notificationComponent_ue7qy {
+} .notification__notificationComponent_1wz1k {
     visibility: hidden;
     right: var(--gap-12);
     transform: translate(0, -500px);
@@ -22,26 +22,26 @@
        -moz-user-select: none;
             user-select: none;
     transition: transform 0.4s ease-out
-} @media screen and (min-width: 600px) { .notification__notificationComponent_ue7qy {
+} @media screen and (min-width: 600px) { .notification__notificationComponent_1wz1k {
         right: var(--gap-48);
         width: auto;
         transform: translate(calc(100% + var(--gap-48)), 0)
 }
-    } .notification__notificationComponent_ue7qy.notification__isVisible_ue7qy {
+    } .notification__notificationComponent_1wz1k.notification__isVisible_1wz1k {
         visibility: visible;
         transform: translate(0, 0);
-    } .notification__notificationComponent_ue7qy.notification__isClosing_ue7qy {
+    } .notification__notificationComponent_1wz1k.notification__isClosing_1wz1k {
         transition: transform 0.1s ease-out;
         transform: translate(100vw, 0)
-    } @media screen and (min-width: 600px) { .notification__notificationComponent_ue7qy.notification__isClosing_ue7qy {
+    } @media screen and (min-width: 600px) { .notification__notificationComponent_1wz1k.notification__isClosing_1wz1k {
             transform: translate(calc(100% + var(--gap-48)), 0)
     }
-        } .notification__notificationComponent_ue7qy.notification__notificationComponent_ue7qy {
+        } .notification__notificationComponent_1wz1k.notification__notificationComponent_1wz1k {
     position: fixed;
-} @media screen and (min-width: 600px) { .notification__toastContent_ue7qy {
+} @media screen and (min-width: 600px) { .notification__toastContent_1wz1k {
         width: var(--notification-desktop-content-width)
 }
-    } .notification__actionSection_ue7qy {
+    } .notification__actionSection_1wz1k {
     min-width: 104px;
     min-height: 48px;
     padding: var(--gap-0) var(--gap-8);

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"notificationComponent":"notification__notificationComponent_ue7qy","isVisible":"notification__isVisible_ue7qy","isClosing":"notification__isClosing_ue7qy","toastContent":"notification__toastContent_ue7qy","actionSection":"notification__actionSection_ue7qy"};
+var styles = {"notificationComponent":"notification__notificationComponent_1wz1k","isVisible":"notification__isVisible_1wz1k","isClosing":"notification__isClosing_1wz1k","toastContent":"notification__toastContent_1wz1k","actionSection":"notification__actionSection_1wz1k"};
 
 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:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,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:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}

package/index.css

@@ -12,7 +12,7 @@
     --gap-12-neg: var(--gap-s-neg);
 } :root {
     --notification-desktop-content-width: 278px;
-} .notification__notificationComponent_ue7qy {
+} .notification__notificationComponent_1wz1k {
     visibility: hidden;
     right: var(--gap-12);
     transform: translate(0, -500px);
@@ -22,26 +22,26 @@
        -moz-user-select: none;
             user-select: none;
     transition: transform 0.4s ease-out
-} @media screen and (min-width: 600px) { .notification__notificationComponent_ue7qy {
+} @media screen and (min-width: 600px) { .notification__notificationComponent_1wz1k {
         right: var(--gap-48);
         width: auto;
         transform: translate(calc(100% + var(--gap-48)), 0)
 }
-    } .notification__notificationComponent_ue7qy.notification__isVisible_ue7qy {
+    } .notification__notificationComponent_1wz1k.notification__isVisible_1wz1k {
         visibility: visible;
         transform: translate(0, 0);
-    } .notification__notificationComponent_ue7qy.notification__isClosing_ue7qy {
+    } .notification__notificationComponent_1wz1k.notification__isClosing_1wz1k {
         transition: transform 0.1s ease-out;
         transform: translate(100vw, 0)
-    } @media screen and (min-width: 600px) { .notification__notificationComponent_ue7qy.notification__isClosing_ue7qy {
+    } @media screen and (min-width: 600px) { .notification__notificationComponent_1wz1k.notification__isClosing_1wz1k {
             transform: translate(calc(100% + var(--gap-48)), 0)
     }
-        } .notification__notificationComponent_ue7qy.notification__notificationComponent_ue7qy {
+        } .notification__notificationComponent_1wz1k.notification__notificationComponent_1wz1k {
     position: fixed;
-} @media screen and (min-width: 600px) { .notification__toastContent_ue7qy {
+} @media screen and (min-width: 600px) { .notification__toastContent_1wz1k {
         width: var(--notification-desktop-content-width)
 }
-    } .notification__actionSection_ue7qy {
+    } .notification__actionSection_1wz1k {
     min-width: 104px;
     min-height: 48px;
     padding: var(--gap-0) var(--gap-8);

package/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"notificationComponent":"notification__notificationComponent_ue7qy","isVisible":"notification__isVisible_ue7qy","isClosing":"notification__isClosing_ue7qy","toastContent":"notification__toastContent_ue7qy","actionSection":"notification__actionSection_ue7qy"};
+var styles = {"notificationComponent":"notification__notificationComponent_1wz1k","isVisible":"notification__isVisible_1wz1k","isClosing":"notification__isClosing_1wz1k","toastContent":"notification__toastContent_1wz1k","actionSection":"notification__actionSection_1wz1k"};
 
 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:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,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:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}

package/modern/index.css

@@ -12,7 +12,7 @@
     --gap-12-neg: var(--gap-s-neg);
 } :root {
     --notification-desktop-content-width: 278px;
-} .notification__notificationComponent_ue7qy {
+} .notification__notificationComponent_1wz1k {
     visibility: hidden;
     right: var(--gap-12);
     transform: translate(0, -500px);
@@ -22,26 +22,26 @@
        -moz-user-select: none;
             user-select: none;
     transition: transform 0.4s ease-out
-} @media screen and (min-width: 600px) { .notification__notificationComponent_ue7qy {
+} @media screen and (min-width: 600px) { .notification__notificationComponent_1wz1k {
         right: var(--gap-48);
         width: auto;
         transform: translate(calc(100% + var(--gap-48)), 0)
 }
-    } .notification__notificationComponent_ue7qy.notification__isVisible_ue7qy {
+    } .notification__notificationComponent_1wz1k.notification__isVisible_1wz1k {
         visibility: visible;
         transform: translate(0, 0);
-    } .notification__notificationComponent_ue7qy.notification__isClosing_ue7qy {
+    } .notification__notificationComponent_1wz1k.notification__isClosing_1wz1k {
         transition: transform 0.1s ease-out;
         transform: translate(100vw, 0)
-    } @media screen and (min-width: 600px) { .notification__notificationComponent_ue7qy.notification__isClosing_ue7qy {
+    } @media screen and (min-width: 600px) { .notification__notificationComponent_1wz1k.notification__isClosing_1wz1k {
             transform: translate(calc(100% + var(--gap-48)), 0)
     }
-        } .notification__notificationComponent_ue7qy.notification__notificationComponent_ue7qy {
+        } .notification__notificationComponent_1wz1k.notification__notificationComponent_1wz1k {
     position: fixed;
-} @media screen and (min-width: 600px) { .notification__toastContent_ue7qy {
+} @media screen and (min-width: 600px) { .notification__toastContent_1wz1k {
         width: var(--notification-desktop-content-width)
 }
-    } .notification__actionSection_ue7qy {
+    } .notification__actionSection_1wz1k {
     min-width: 104px;
     min-height: 48px;
     padding: var(--gap-0) var(--gap-8);

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"notificationComponent":"notification__notificationComponent_ue7qy","isVisible":"notification__isVisible_ue7qy","isClosing":"notification__isClosing_ue7qy","toastContent":"notification__toastContent_ue7qy","actionSection":"notification__actionSection_ue7qy"};
+const styles = {"notificationComponent":"notification__notificationComponent_1wz1k","isVisible":"notification__isVisible_1wz1k","isClosing":"notification__isClosing_1wz1k","toastContent":"notification__toastContent_1wz1k","actionSection":"notification__actionSection_1wz1k"};
 
 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:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,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:root {\n    --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n    visibility: hidden;\n    right: var(--gap-12);\n    transform: translate(0, -500px);\n    width: calc(100% - var(--gap-24));\n    max-width: calc(100vw - var(--gap-24));\n    user-select: none;\n    transition: transform 0.4s ease-out;\n\n    @media screen and (min-width: 600px) {\n        right: var(--gap-48);\n        width: auto;\n        transform: translate(calc(100% + var(--gap-48)), 0);\n    }\n\n    &.isVisible {\n        visibility: visible;\n        transform: translate(0, 0);\n    }\n\n    &.isClosing {\n        transition: transform 0.1s ease-out;\n        transform: translate(100vw, 0);\n\n        @media screen and (min-width: 600px) {\n            transform: translate(calc(100% + var(--gap-48)), 0);\n        }\n    }\n}\n\n.notificationComponent.notificationComponent {\n    position: fixed;\n}\n\n.toastContent {\n    @media screen and (min-width: 600px) {\n        width: var(--notification-desktop-content-width);\n    }\n}\n\n.actionSection {\n    min-width: 104px;\n    min-height: 48px;\n    padding: var(--gap-0) var(--gap-8);\n    margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}

package/moderncssm/index.module.css

@@ -1,3 +1,5 @@
+
+
 :root {
     --notification-desktop-content-width: 278px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-notification",
-    "version": "8.0.0",
+    "version": "8.1.0-snapshot-92b8690",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -10,10 +10,10 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-portal": "^4.0.0",
-        "@alfalab/core-components-shared": "^1.0.0",
-        "@alfalab/core-components-stack": "^6.0.0",
-        "@alfalab/core-components-toast-plate": "^8.0.0",
+        "@alfalab/core-components-portal": "4.1.0-snapshot-92b8690",
+        "@alfalab/core-components-shared": "1.1.0-snapshot-92b8690",
+        "@alfalab/core-components-stack": "6.1.0-snapshot-92b8690",
+        "@alfalab/core-components-toast-plate": "8.1.0-snapshot-92b8690",
         "classnames": "^2.5.1",
         "element-closest": "^3.0.2",
         "react-merge-refs": "^1.1.0",
@@ -21,7 +21,7 @@
         "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"
     },
@@ -29,6 +29,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';
 
 :root {
     --notification-desktop-content-width: 278px;