@hh.ru/magritte-ui-alert 1.2.8

package/Alert.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactElement, RefObject } from 'react';
+import { AlertProps } from './types';
+type AnimationTimeout = {
+    enter: number;
+    exit: number;
+};
+type AnimationComponentProps = {
+    animationTimeout: AnimationTimeout;
+    visible: boolean;
+    render: (animatedElementRef: RefObject<HTMLDivElement>, props?: JSX.IntrinsicElements['div']) => ReactElement;
+};
+export declare const OpacityAnimation: FC<AnimationComponentProps>;
+export declare const TransformAnimation: FC<AnimationComponentProps & {
+    onClose: VoidFunction;
+}>;
+export declare const Alert: FC<AlertProps>;
+export {};

package/Alert.js

@@ -0,0 +1,113 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, Fragment } from 'react';
+import { createPortal } from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import classnames from 'classnames';
+import { disableScroll } from '@hh.ru/magritte-common-modal-helper';
+import { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';
+import { useSwipe } from '@hh.ru/magritte-common-use-swipe';
+import { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { Layer } from '@hh.ru/magritte-ui-layer';
+
+var styles = {"animation-timeout":"magritte-animation-timeout___cwIwT_1-2-8","animationTimeout":"magritte-animation-timeout___cwIwT_1-2-8","enter-animation-active":"magritte-enter-animation-active___Qti02_1-2-8","enterAnimationActive":"magritte-enter-animation-active___Qti02_1-2-8","exit-animation-active":"magritte-exit-animation-active___deHqY_1-2-8","exitAnimationActive":"magritte-exit-animation-active___deHqY_1-2-8","opacity-animation":"magritte-opacity-animation___m7RYi_1-2-8","opacityAnimation":"magritte-opacity-animation___m7RYi_1-2-8","enter-animation":"magritte-enter-animation___CbUHN_1-2-8","enterAnimation":"magritte-enter-animation___CbUHN_1-2-8","exit-animation":"magritte-exit-animation___d2AJ4_1-2-8","exitAnimation":"magritte-exit-animation___d2AJ4_1-2-8","overlay":"magritte-overlay___hMlKJ_1-2-8","mobile-container":"magritte-mobile-container___dQRCl_1-2-8","mobileContainer":"magritte-mobile-container___dQRCl_1-2-8","desktop-container":"magritte-desktop-container___26vkq_1-2-8","desktopContainer":"magritte-desktop-container___26vkq_1-2-8","main":"magritte-main___iCU-E_1-2-8","icon":"magritte-icon___fLpa-_1-2-8","icon_neutral":"magritte-icon_neutral___Jyl3l_1-2-8","iconNeutral":"magritte-icon_neutral___Jyl3l_1-2-8","icon_accent":"magritte-icon_accent___Nn-T1_1-2-8","iconAccent":"magritte-icon_accent___Nn-T1_1-2-8","icon_positive":"magritte-icon_positive___OU9Zu_1-2-8","iconPositive":"magritte-icon_positive___OU9Zu_1-2-8","icon_warning":"magritte-icon_warning___7BbUi_1-2-8","iconWarning":"magritte-icon_warning___7BbUi_1-2-8","icon_negative":"magritte-icon_negative___s0OA8_1-2-8","iconNegative":"magritte-icon_negative___s0OA8_1-2-8","title":"magritte-title___yG219_1-2-8","description":"magritte-description___KeNoT_1-2-8","buttons":"magritte-buttons___lyxBC_1-2-8","buttons_vertical":"magritte-buttons_vertical___8lPCo_1-2-8","buttonsVertical":"magritte-buttons_vertical___8lPCo_1-2-8"};
+
+const OPACITY_ANIMATION_CLASSES = {
+    enter: classnames(styles.opacityAnimation, styles.enterAnimation),
+    enterActive: classnames(styles.enterAnimationActive, styles.opacityAnimation),
+    exit: classnames(styles.opacityAnimation, styles.exitAnimation),
+    exitActive: classnames(styles.exitAnimationActive, styles.opacityAnimation),
+};
+const TRANSFORM_ANIMATION_CLASSES = {
+    enterActive: styles.enterAnimationActive,
+    exitActive: styles.exitAnimationActive,
+};
+const VIEWPORT_HEIGHT = (typeof window !== 'undefined' ? window.visualViewport?.height : null) ?? 0;
+const SWIPE_THRESHOLD_REF = { current: { max: Math.round(VIEWPORT_HEIGHT * 0.8) } };
+const toInteger = (value) => {
+    const result = parseInt(value, 10);
+    return !Number.isNaN(result) ? result : 0;
+};
+const withStopPropagation = (handler) => {
+    return (event) => {
+        event.stopPropagation();
+        handler?.(event);
+    };
+};
+const OpacityAnimation = ({ animationTimeout, visible, render }) => {
+    const animatedElementRef = useRef(null);
+    return (jsx(CSSTransition, { appear: true, classNames: OPACITY_ANIMATION_CLASSES, in: visible, mountOnEnter: true, nodeRef: animatedElementRef, timeout: animationTimeout, unmountOnExit: true, children: render(animatedElementRef) }));
+};
+const TransformAnimation = ({ animationTimeout, visible, render, onClose, }) => {
+    const animatedElementRef = useRef(null);
+    const swipeOffsetRef = useRef(0);
+    const runTranslateYAnimation = () => {
+        if (animatedElementRef.current !== null && visualViewport !== null) {
+            animatedElementRef.current.style.transform = `translateY(${visualViewport.height + swipeOffsetRef.current - animatedElementRef.current.getBoundingClientRect().top}px)`;
+        }
+    };
+    const resetTranslateY = () => {
+        if (animatedElementRef.current !== null) {
+            animatedElementRef.current.style.transform = `translateY(${swipeOffsetRef.current}px)`;
+        }
+    };
+    const resetSwipeOffset = () => {
+        swipeOffsetRef.current = 0;
+    };
+    const swipeHandlers = useSwipe({
+        thresholdYRef: SWIPE_THRESHOLD_REF,
+        onSwipeMove: (event) => {
+            if (animatedElementRef.current !== null) {
+                animatedElementRef.current.style.transform = `translateY(${Math.max(event.distanceY, 0)}px)`;
+            }
+        },
+        onSwipeEnd: (event) => {
+            swipeOffsetRef.current = event.distanceY;
+            onClose();
+        },
+        onSwipeCancel: () => {
+            if (animatedElementRef.current !== null) {
+                animatedElementRef.current.style.transform = `translateY(0px)`;
+            }
+        },
+    });
+    return (jsx(CSSTransition, { appear: true, classNames: TRANSFORM_ANIMATION_CLASSES, in: visible, mountOnEnter: true, nodeRef: animatedElementRef, onEnter: runTranslateYAnimation, onEntering: resetTranslateY, onExit: resetTranslateY, onExiting: runTranslateYAnimation, onExited: resetSwipeOffset, timeout: animationTimeout, unmountOnExit: true, children: render(animatedElementRef, {
+            ...swipeHandlers,
+            onTouchStart: withStopPropagation(swipeHandlers.onTouchStart),
+            onTouchMove: withStopPropagation(swipeHandlers.onTouchMove),
+        }) }));
+};
+const Alert = ({ iconStyle = 'neutral', layout, icon, title, description, buttons, visible, onClose, }) => {
+    const [animationTimeout, setAnimationTimeout] = useState(null);
+    const clickElementRef = useRef(null);
+    const { isMobile } = useBreakpoint();
+    useEffect(() => {
+        const animationTimeoutElement = document.createElement('div');
+        animationTimeoutElement.classList.add(styles.animationTimeout);
+        document.body.appendChild(animationTimeoutElement);
+        const style = window.getComputedStyle(animationTimeoutElement);
+        const enter = toInteger(style.getPropertyValue('--enter-animation-duration'));
+        const exit = toInteger(style.getPropertyValue('--exit-animation-duration'));
+        setAnimationTimeout({ enter, exit });
+        document.body.removeChild(animationTimeoutElement);
+    }, [setAnimationTimeout]);
+    useEffect(() => {
+        if (visible) {
+            return disableScroll();
+        }
+        return void 0;
+    }, [visible]);
+    useCloseByClickOutside(clickElementRef, onClose, visible);
+    if (!animationTimeout) {
+        return null;
+    }
+    const content = (jsxs(Fragment, { children: [jsxs("div", { className: styles.main, children: [icon && (jsx("div", { className: classnames(styles.icon, { [styles[`icon_${iconStyle}`]]: iconStyle }), children: icon })), jsx("div", { className: styles.title, children: title }), description && jsx("div", { className: styles.description, children: description })] }), jsx("div", { className: classnames(styles.buttons, { [styles[`buttons_${layout}`]]: layout }), children: buttons })] }));
+    if (isMobile) {
+        return createPortal(jsxs(Fragment, { children: [jsx(OpacityAnimation, { animationTimeout: animationTimeout, visible: visible, render: (animatedElementRef) => (jsx(Layer, { layer: InternalLayerName.BottomSheet, children: jsx("div", { className: classnames(styles.overlay, styles.animationTimeout), onClick: onClose, ref: animatedElementRef }) })) }), jsx(TransformAnimation, { animationTimeout: animationTimeout, visible: visible, render: (animatedElementRef, props) => (jsx(Layer, { layer: InternalLayerName.BottomSheet, children: jsx("div", { ...props, className: classnames(styles.mobileContainer, styles.animationTimeout), ref: animatedElementRef, children: content }) })), onClose: onClose })] }), document.body);
+    }
+    return createPortal(jsx(OpacityAnimation, { animationTimeout: animationTimeout, visible: visible, render: (animatedElementRef) => (jsx(Layer, { layer: InternalLayerName.Modal, children: jsx("div", { className: classnames(styles.overlay, styles.animationTimeout), ref: animatedElementRef, children: jsx("div", { className: classnames(styles.desktopContainer), ref: clickElementRef, children: content }) }) })) }), document.body);
+};
+
+export { Alert, OpacityAnimation, TransformAnimation };
+//# sourceMappingURL=Alert.js.map

package/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../src/Alert.tsx"],"sourcesContent":["import { FC, Fragment, ReactElement, RefObject, TouchEventHandler, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { disableScroll } from '@hh.ru/magritte-common-modal-helper';\nimport { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';\nimport { SwipeEvent, useSwipe } from '@hh.ru/magritte-common-use-swipe';\nimport { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';\nimport { AlertProps } from '@hh.ru/magritte-ui-alert/types';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\n\nimport styles from './alert.less';\n\ntype AnimationTimeout = { enter: number; exit: number };\n\ntype AnimationComponentProps = {\n    animationTimeout: AnimationTimeout;\n    visible: boolean;\n    render: (animatedElementRef: RefObject<HTMLDivElement>, props?: JSX.IntrinsicElements['div']) => ReactElement;\n};\n\nconst OPACITY_ANIMATION_CLASSES = {\n    enter: classnames(styles.opacityAnimation, styles.enterAnimation),\n    enterActive: classnames(styles.enterAnimationActive, styles.opacityAnimation),\n    exit: classnames(styles.opacityAnimation, styles.exitAnimation),\n    exitActive: classnames(styles.exitAnimationActive, styles.opacityAnimation),\n};\n\nconst TRANSFORM_ANIMATION_CLASSES = {\n    enterActive: styles.enterAnimationActive,\n    exitActive: styles.exitAnimationActive,\n};\n\nconst VIEWPORT_HEIGHT = (typeof window !== 'undefined' ? window.visualViewport?.height : null) ?? 0;\nconst SWIPE_THRESHOLD_REF = { current: { max: Math.round(VIEWPORT_HEIGHT * 0.8) } };\n\nconst toInteger = (value: string) => {\n    const result = parseInt(value, 10);\n    return !Number.isNaN(result) ? result : 0;\n};\n\nconst withStopPropagation = (handler?: TouchEventHandler): TouchEventHandler => {\n    return (event) => {\n        event.stopPropagation();\n        handler?.(event);\n    };\n};\n\nexport const OpacityAnimation: FC<AnimationComponentProps> = ({ animationTimeout, visible, render }) => {\n    const animatedElementRef = useRef<HTMLDivElement | null>(null);\n\n    return (\n        <CSSTransition\n            appear\n            classNames={OPACITY_ANIMATION_CLASSES}\n            in={visible}\n            mountOnEnter\n            nodeRef={animatedElementRef}\n            timeout={animationTimeout}\n            unmountOnExit\n        >\n            {render(animatedElementRef)}\n        </CSSTransition>\n    );\n};\n\nexport const TransformAnimation: FC<AnimationComponentProps & { onClose: VoidFunction }> = ({\n    animationTimeout,\n    visible,\n    render,\n    onClose,\n}) => {\n    const animatedElementRef = useRef<HTMLDivElement | null>(null);\n    const swipeOffsetRef = useRef(0);\n\n    const runTranslateYAnimation = () => {\n        if (animatedElementRef.current !== null && visualViewport !== null) {\n            animatedElementRef.current.style.transform = `translateY(${\n                visualViewport.height + swipeOffsetRef.current - animatedElementRef.current.getBoundingClientRect().top\n            }px)`;\n        }\n    };\n\n    const resetTranslateY = () => {\n        if (animatedElementRef.current !== null) {\n            animatedElementRef.current.style.transform = `translateY(${swipeOffsetRef.current}px)`;\n        }\n    };\n\n    const resetSwipeOffset = () => {\n        swipeOffsetRef.current = 0;\n    };\n\n    const swipeHandlers = useSwipe({\n        thresholdYRef: SWIPE_THRESHOLD_REF,\n        onSwipeMove: (event: SwipeEvent) => {\n            if (animatedElementRef.current !== null) {\n                animatedElementRef.current.style.transform = `translateY(${Math.max(event.distanceY, 0)}px)`;\n            }\n        },\n        onSwipeEnd: (event: SwipeEvent) => {\n            swipeOffsetRef.current = event.distanceY;\n            onClose();\n        },\n        onSwipeCancel: () => {\n            if (animatedElementRef.current !== null) {\n                animatedElementRef.current.style.transform = `translateY(0px)`;\n            }\n        },\n    });\n\n    return (\n        <CSSTransition\n            appear\n            classNames={TRANSFORM_ANIMATION_CLASSES}\n            in={visible}\n            mountOnEnter\n            nodeRef={animatedElementRef}\n            onEnter={runTranslateYAnimation}\n            onEntering={resetTranslateY}\n            onExit={resetTranslateY}\n            onExiting={runTranslateYAnimation}\n            onExited={resetSwipeOffset}\n            timeout={animationTimeout}\n            unmountOnExit\n        >\n            {render(animatedElementRef, {\n                ...swipeHandlers,\n                onTouchStart: withStopPropagation(swipeHandlers.onTouchStart),\n                onTouchMove: withStopPropagation(swipeHandlers.onTouchMove),\n            })}\n        </CSSTransition>\n    );\n};\n\nexport const Alert: FC<AlertProps> = ({\n    iconStyle = 'neutral',\n    layout,\n    icon,\n    title,\n    description,\n    buttons,\n    visible,\n    onClose,\n}) => {\n    const [animationTimeout, setAnimationTimeout] = useState<AnimationTimeout | null>(null);\n    const clickElementRef = useRef<HTMLDivElement | null>(null);\n    const { isMobile } = useBreakpoint();\n\n    useEffect(() => {\n        const animationTimeoutElement = document.createElement('div');\n        animationTimeoutElement.classList.add(styles.animationTimeout);\n        document.body.appendChild(animationTimeoutElement);\n        const style = window.getComputedStyle(animationTimeoutElement);\n        const enter = toInteger(style.getPropertyValue('--enter-animation-duration'));\n        const exit = toInteger(style.getPropertyValue('--exit-animation-duration'));\n        setAnimationTimeout({ enter, exit });\n        document.body.removeChild(animationTimeoutElement);\n    }, [setAnimationTimeout]);\n\n    useEffect(() => {\n        if (visible) {\n            return disableScroll();\n        }\n\n        return void 0;\n    }, [visible]);\n\n    useCloseByClickOutside(clickElementRef, onClose, visible);\n\n    if (!animationTimeout) {\n        return null;\n    }\n\n    const content = (\n        <Fragment>\n            <div className={styles.main}>\n                {icon && (\n                    <div className={classnames(styles.icon, { [styles[`icon_${iconStyle}`]]: iconStyle })}>{icon}</div>\n                )}\n                <div className={styles.title}>{title}</div>\n                {description && <div className={styles.description}>{description}</div>}\n            </div>\n            <div className={classnames(styles.buttons, { [styles[`buttons_${layout}`]]: layout })}>{buttons}</div>\n        </Fragment>\n    );\n\n    if (isMobile) {\n        return createPortal(\n            <Fragment>\n                <OpacityAnimation\n                    animationTimeout={animationTimeout}\n                    visible={visible}\n                    render={(animatedElementRef) => (\n                        <Layer layer={InternalLayerName.BottomSheet}>\n                            <div\n                                className={classnames(styles.overlay, styles.animationTimeout)}\n                                onClick={onClose}\n                                ref={animatedElementRef}\n                            />\n                        </Layer>\n                    )}\n                />\n                <TransformAnimation\n                    animationTimeout={animationTimeout}\n                    visible={visible}\n                    render={(animatedElementRef, props) => (\n                        <Layer layer={InternalLayerName.BottomSheet}>\n                            <div\n                                {...props}\n                                className={classnames(styles.mobileContainer, styles.animationTimeout)}\n                                ref={animatedElementRef}\n                            >\n                                {content}\n                            </div>\n                        </Layer>\n                    )}\n                    onClose={onClose}\n                />\n            </Fragment>,\n            document.body\n        );\n    }\n\n    return createPortal(\n        <OpacityAnimation\n            animationTimeout={animationTimeout}\n            visible={visible}\n            render={(animatedElementRef) => (\n                <Layer layer={InternalLayerName.Modal}>\n                    <div className={classnames(styles.overlay, styles.animationTimeout)} ref={animatedElementRef}>\n                        <div className={classnames(styles.desktopContainer)} ref={clickElementRef}>\n                            {content}\n                        </div>\n                    </div>\n                </Layer>\n            )}\n        />,\n        document.body\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/index.css

@@ -0,0 +1,178 @@
+:root{
+  --magritte-color-background-primary-v18-1-1:#ffffff;
+  --magritte-color-background-secondary-v18-1-1:#F1F4F9;
+  --magritte-color-background-accent-v18-1-1:#EDF6FF;
+  --magritte-color-background-positive-v18-1-1:#E8F9EC;
+  --magritte-color-background-negative-v18-1-1:#FEF2EF;
+  --magritte-color-background-warning-v18-1-1:#FFF3E6;
+  --magritte-color-text-primary-v18-1-1:#000000;
+  --magritte-color-text-secondary-v18-1-1:#768694;
+  --magritte-color-icon-tertiary-v18-1-1:#AABBCA;
+  --magritte-color-icon-accent-v18-1-1:#0070ff;
+  --magritte-color-icon-positive-v18-1-1:#0dc267;
+  --magritte-color-icon-negative-v18-1-1:#ff4d3a;
+  --magritte-color-icon-warning-secondary-v18-1-1:#ff9900;
+  --magritte-color-component-_overlay-background-content-v18-1-1:#20262b99;
+}
+:root{
+  --magritte-typography-title-4-semibold-font-family-v18-1-1:"Inter";
+  --magritte-typography-title-4-semibold-font-weight-v18-1-1:600;
+  --magritte-typography-title-4-semibold-line-height-v18-1-1:32px;
+  --magritte-typography-title-4-semibold-font-size-v18-1-1:22px;
+  --magritte-typography-title-4-semibold-letter-spacing-v18-1-1:-0.0075em;
+  --magritte-typography-title-4-semibold-text-indent-v18-1-1:0px;
+  --magritte-typography-title-4-semibold-text-transform-v18-1-1:none;
+  --magritte-typography-title-4-semibold-text-decoration-v18-1-1:none;
+  --magritte-typography-paragraph-2-regular-font-family-v18-1-1:"Inter";
+  --magritte-typography-paragraph-2-regular-font-weight-v18-1-1:400;
+  --magritte-typography-paragraph-2-regular-line-height-v18-1-1:26px;
+  --magritte-typography-paragraph-2-regular-font-size-v18-1-1:16px;
+  --magritte-typography-paragraph-2-regular-letter-spacing-v18-1-1:0.005em;
+  --magritte-typography-paragraph-2-regular-text-indent-v18-1-1:0px;
+  --magritte-typography-paragraph-2-regular-text-transform-v18-1-1:none;
+  --magritte-typography-paragraph-2-regular-text-decoration-v18-1-1:none;
+  --magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-1:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-200-duration-v18-1-1:200ms;
+  --magritte-static-border-radius-600-v18-1-1:24px;
+}
+.magritte-night-theme{
+  --magritte-color-background-primary-v18-1-1:#000000;
+  --magritte-color-background-secondary-v18-1-1:#1B1B1B;
+  --magritte-color-background-accent-v18-1-1:#222D3D;
+  --magritte-color-background-positive-v18-1-1:#16321F;
+  --magritte-color-background-negative-v18-1-1:#3D2622;
+  --magritte-color-background-warning-v18-1-1:#3D270E;
+  --magritte-color-text-primary-v18-1-1:#ffffff;
+  --magritte-color-text-secondary-v18-1-1:#ABABAB;
+  --magritte-color-icon-tertiary-v18-1-1:#767676;
+  --magritte-color-icon-accent-v18-1-1:#5e9eff;
+  --magritte-color-icon-positive-v18-1-1:#10b55f;
+  --magritte-color-icon-negative-v18-1-1:#ff4d3a;
+  --magritte-color-icon-warning-secondary-v18-1-1:#9c5b03;
+  --magritte-color-component-_overlay-background-content-v18-1-1:#26262699;
+}
+.magritte-animation-timeout___cwIwT_1-2-8{
+  --enter-animation-duration:0ms;
+  --exit-animation-duration:0ms;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-animation-timeout___cwIwT_1-2-8{
+    --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-1-1);
+    --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-1-1);
+  }
+}
+.magritte-enter-animation-active___Qti02_1-2-8{
+  transition-property:transform, opacity;
+  transition-duration:var(--enter-animation-duration);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-1);
+}
+.magritte-exit-animation-active___deHqY_1-2-8{
+  transition-property:transform, opacity;
+  transition-duration:var(--exit-animation-duration);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-1);
+}
+.magritte-opacity-animation___m7RYi_1-2-8{
+  pointer-events:none;
+}
+.magritte-opacity-animation___m7RYi_1-2-8.magritte-enter-animation___CbUHN_1-2-8{
+  opacity:0;
+}
+.magritte-opacity-animation___m7RYi_1-2-8.magritte-enter-animation-active___Qti02_1-2-8{
+  opacity:1;
+}
+.magritte-opacity-animation___m7RYi_1-2-8.magritte-exit-animation___d2AJ4_1-2-8{
+  opacity:1;
+}
+.magritte-opacity-animation___m7RYi_1-2-8.magritte-exit-animation-active___deHqY_1-2-8{
+  opacity:0;
+}
+.magritte-overlay___hMlKJ_1-2-8{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  position:fixed;
+  inset:0;
+  background-color:var(--magritte-color-component-_overlay-background-content-v18-1-1);
+}
+.magritte-mobile-container___dQRCl_1-2-8,
+.magritte-desktop-container___26vkq_1-2-8{
+  background-color:var(--magritte-color-background-primary-v18-1-1);
+  border-radius:var(--magritte-static-border-radius-600-v18-1-1);
+}
+.magritte-mobile-container___dQRCl_1-2-8{
+  position:fixed;
+  inset:auto 12px 40px 12px;
+  max-width:400px;
+  margin:auto;
+}
+.magritte-desktop-container___26vkq_1-2-8{
+  width:400px;
+}
+.magritte-main___iCU-E_1-2-8{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  padding:32px 32px 12px;
+}
+.magritte-icon___fLpa-_1-2-8{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:48px;
+  height:48px;
+  border-radius:50%;
+  margin-bottom:24px;
+}
+.magritte-icon_neutral___Jyl3l_1-2-8{
+  background-color:var(--magritte-color-background-secondary-v18-1-1);
+  --magritte-ui-icon-color-override:var(--magritte-color-icon-tertiary-v18-1-1);
+}
+.magritte-icon_accent___Nn-T1_1-2-8{
+  background-color:var(--magritte-color-background-accent-v18-1-1);
+  --magritte-ui-icon-color-override:var(--magritte-color-icon-accent-v18-1-1);
+}
+.magritte-icon_positive___OU9Zu_1-2-8{
+  background-color:var(--magritte-color-background-positive-v18-1-1);
+  --magritte-ui-icon-color-override:var(--magritte-color-icon-positive-v18-1-1);
+}
+.magritte-icon_warning___7BbUi_1-2-8{
+  background-color:var(--magritte-color-background-warning-v18-1-1);
+  --magritte-ui-icon-color-override:var(--magritte-color-icon-warning-secondary-v18-1-1);
+}
+.magritte-icon_negative___s0OA8_1-2-8{
+  background-color:var(--magritte-color-background-negative-v18-1-1);
+  --magritte-ui-icon-color-override:var(--magritte-color-icon-negative-v18-1-1);
+}
+.magritte-title___yG219_1-2-8{
+  font-family:var(--magritte-typography-title-4-semibold-font-family-v18-1-1);
+  font-weight:var(--magritte-typography-title-4-semibold-font-weight-v18-1-1);
+  line-height:var(--magritte-typography-title-4-semibold-line-height-v18-1-1);
+  font-size:var(--magritte-typography-title-4-semibold-font-size-v18-1-1);
+  letter-spacing:var(--magritte-typography-title-4-semibold-letter-spacing-v18-1-1);
+  text-indent:var(--magritte-typography-title-4-semibold-text-indent-v18-1-1);
+  text-transform:var(--magritte-typography-title-4-semibold-text-transform-v18-1-1);
+  text-decoration:var(--magritte-typography-title-4-semibold-text-decoration-v18-1-1);
+  color:var(--magritte-color-text-primary-v18-1-1);
+  text-align:center;
+}
+.magritte-description___KeNoT_1-2-8{
+  font-family:var(--magritte-typography-paragraph-2-regular-font-family-v18-1-1);
+  font-weight:var(--magritte-typography-paragraph-2-regular-font-weight-v18-1-1);
+  line-height:var(--magritte-typography-paragraph-2-regular-line-height-v18-1-1);
+  font-size:var(--magritte-typography-paragraph-2-regular-font-size-v18-1-1);
+  letter-spacing:var(--magritte-typography-paragraph-2-regular-letter-spacing-v18-1-1);
+  text-indent:var(--magritte-typography-paragraph-2-regular-text-indent-v18-1-1);
+  text-transform:var(--magritte-typography-paragraph-2-regular-text-transform-v18-1-1);
+  text-decoration:var(--magritte-typography-paragraph-2-regular-text-decoration-v18-1-1);
+  color:var(--magritte-color-text-secondary-v18-1-1);
+  text-align:center;
+  margin-top:6px;
+}
+.magritte-buttons___lyxBC_1-2-8{
+  display:flex;
+  gap:12px;
+  padding:12px;
+}
+.magritte-buttons_vertical___8lPCo_1-2-8{
+  flex-direction:column;
+}

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Alert';
+export * from './types';
+export * from '@hh.ru/magritte-ui-theme-provider';

package/index.js

@@ -0,0 +1,15 @@
+import './index.css';
+export { Alert, OpacityAnimation, TransformAnimation } from './Alert.js';
+export * from '@hh.ru/magritte-ui-theme-provider';
+import 'react/jsx-runtime';
+import 'react';
+import 'react-dom';
+import 'react-transition-group';
+import 'classnames';
+import '@hh.ru/magritte-common-modal-helper';
+import '@hh.ru/magritte-common-mouse';
+import '@hh.ru/magritte-common-use-swipe';
+import '@hh.ru/magritte-internal-layer-name';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-layer';
+//# sourceMappingURL=index.js.map

package/index.js.map

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

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@hh.ru/magritte-ui-alert",
+  "version": "1.2.8",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "changelog": "yarn root:changelog $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-test": "yarn root:stylelint-test $(pwd)",
+    "eslint-test": "yarn root:eslint-test $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-modal-helper": "1.2.5",
+    "@hh.ru/magritte-common-mouse": "1.1.8",
+    "@hh.ru/magritte-common-use-swipe": "3.0.1",
+    "@hh.ru/magritte-design-tokens": "18.1.1",
+    "@hh.ru/magritte-internal-layer-name": "2.1.1",
+    "@hh.ru/magritte-ui-breakpoint": "4.0.1",
+    "@hh.ru/magritte-ui-layer": "2.0.3",
+    "@hh.ru/magritte-ui-theme-provider": "1.1.21"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "react-transition-group": ">=4.4.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "b660dd64fca3eaad5ec44ea9a73f92bb0d9694aa"
+}

package/types.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export interface AlertProps {
+    /** Иконка размера 24px (будет отцентрирована на подложке 48x48px), Avatar либо другой компонент размера 48x48px */
+    icon?: ReactNode;
+    /** Стиль, определяющий цвет иконки и подложки */
+    iconStyle?: 'neutral' | 'accent' | 'positive' | 'warning' | 'negative';
+    /** Лейаут блока кнопок */
+    layout: 'horizontal' | 'vertical';
+    /** Заголовок */
+    title: ReactNode;
+    /** Описание */
+    description?: ReactNode;
+    /** Кнопки */
+    buttons: ReactNode;
+    /** Флаг видимости */
+    visible: boolean;
+    /** Колбек закрытия алерта, должен устанавливать visible в false */
+    onClose: VoidFunction;
+}

package/types.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=types.js.map

package/types.js.map

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