@cloud-ru/uikit-product-mobile-alert 0.4.64 → 0.4.65

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.4.65 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 ## 0.4.64 (2025-11-12)
 
 ### Only dependencies have been changed

package/dist/cjs/components/AdaptiveAlert/AdaptiveAlert.d.ts

@@ -0,0 +1,7 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { AlertProps, AlertTopProps } from '@snack-uikit/alert';
+export type AdaptiveAlertProps = WithLayoutType<AlertProps>;
+export declare function AdaptiveAlert({ layoutType, ...props }: AdaptiveAlertProps): import("react/jsx-runtime").JSX.Element;
+export type AdaptiveAlertTopProps = WithLayoutType<AlertTopProps>;
+export declare function AdaptiveAlertTop({ layoutType, ...props }: AdaptiveAlertTopProps): import("react/jsx-runtime").JSX.Element;
+export type { AlertProps, AlertTopProps };

package/dist/cjs/components/AdaptiveAlert/AdaptiveAlert.js

@@ -0,0 +1,28 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptiveAlert = AdaptiveAlert;
+exports.AdaptiveAlertTop = AdaptiveAlertTop;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const alert_1 = require("@snack-uikit/alert");
+const MobileAlertTop_1 = require("../MobileAlertTop");
+function AdaptiveAlert(_a) {
+    var { layoutType } = _a, props = __rest(_a, ["layoutType"]);
+    const isMobile = layoutType === 'mobile';
+    return (0, jsx_runtime_1.jsx)(alert_1.Alert, Object.assign({ truncate: isMobile ? { title: 2 } : undefined }, props));
+}
+function AdaptiveAlertTop(_a) {
+    var { layoutType } = _a, props = __rest(_a, ["layoutType"]);
+    const isMobile = layoutType === 'mobile';
+    return isMobile ? (0, jsx_runtime_1.jsx)(MobileAlertTop_1.MobileAlertTop, Object.assign({}, props)) : (0, jsx_runtime_1.jsx)(alert_1.AlertTop, Object.assign({}, props));
+}

package/dist/cjs/components/AdaptiveAlert/index.d.ts

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

package/dist/cjs/components/AdaptiveAlert/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AdaptiveAlert"), exports);

package/dist/cjs/components/MobileAlertTop/MobileAlertTop.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { LinkProps } from '@snack-uikit/link';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { AlertButtonProps } from '../../helperComponents';
+import { Appearance } from '../../types';
+export type MobileAlertTopProps = WithSupportProps<{
+    /** Заголовок */
+    title?: string;
+    /** Описание */
+    description: ReactNode;
+    /** Cсылка */
+    link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
+    /** Кнопка дополнительного действия */
+    action?: AlertButtonProps;
+    /** Колбек закрытия */
+    onClose?: () => void;
+    /** Внешний вид */
+    appearance?: Appearance;
+    /** CSS-класс */
+    className?: string;
+    truncate?: {
+        title?: number;
+    };
+    icon?: boolean;
+}>;
+/**
+ * Компонент для отображения уведомления вверху экрана.
+ */
+export declare function MobileAlertTop({ title, description, link, onClose, appearance, action, className, ...rest }: MobileAlertTopProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MobileAlertTop/MobileAlertTop.js

@@ -0,0 +1,85 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileAlertTop = MobileAlertTop;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const link_1 = require("@snack-uikit/link");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const ONE_LINE_TEXT_HEIGHT = 20;
+/**
+ * Компонент для отображения уведомления вверху экрана.
+ */
+function MobileAlertTop(_a) {
+    var { title, description, link, onClose, appearance = constants_1.APPEARANCE.Neutral, action, className } = _a, rest = __rest(_a, ["title", "description", "link", "onClose", "appearance", "action", "className"]);
+    const titleRef = (0, react_1.useRef)(null);
+    const descriptionRef = (0, react_1.useRef)(null);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const [isTitleLarge, setIsTitleLarge] = (0, react_1.useState)(false);
+    const [isDescriptionLarge, setIsDescriptionLarge] = (0, react_1.useState)(false);
+    const invertAppearance = constants_2.APPEARANCE_TO_COLOR_MAP_INVERT[appearance];
+    const handleExpand = () => setIsExpanded(val => !val);
+    const canExpand = Boolean(isTitleLarge || isDescriptionLarge || link || action);
+    const showCloseButton = Boolean(onClose && ((canExpand && isExpanded) || !canExpand));
+    const showLink = Boolean(link && isExpanded);
+    const showAction = Boolean(action && isExpanded);
+    const handleClose = event => {
+        event.stopPropagation();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const handleActionButtonClick = event => {
+        var _a;
+        event.stopPropagation();
+        (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, event);
+    };
+    const handleLinkClick = event => {
+        var _a;
+        event.stopPropagation();
+        (_a = link === null || link === void 0 ? void 0 : link.onClick) === null || _a === void 0 ? void 0 : _a.call(link, event);
+    };
+    const updateIsLarge = (0, react_1.useCallback)(({ ref, setter }) => {
+        const element = ref.current;
+        if (element) {
+            const { offsetWidth, scrollWidth, offsetHeight } = element;
+            setter(offsetHeight > ONE_LINE_TEXT_HEIGHT || scrollWidth > offsetWidth);
+        }
+    }, []);
+    const observeElement = (0, react_1.useCallback)(({ ref, setter }) => {
+        const refElement = ref.current;
+        if (refElement && (0, utils_1.isBrowser)()) {
+            const observer = new ResizeObserver(entities => entities.forEach(entity => {
+                if (entity.target === refElement) {
+                    updateIsLarge({ ref, setter });
+                }
+            }));
+            observer.observe(refElement);
+            return () => observer.disconnect();
+        }
+    }, [updateIsLarge]);
+    (0, utils_1.useLayoutEffect)(() => observeElement({ ref: titleRef, setter: setIsTitleLarge }), [observeElement]);
+    (0, utils_1.useLayoutEffect)(() => updateIsLarge({ ref: titleRef, setter: setIsTitleLarge }), [title, updateIsLarge]);
+    (0, utils_1.useLayoutEffect)(() => observeElement({ ref: descriptionRef, setter: setIsDescriptionLarge }), [observeElement]);
+    (0, utils_1.useLayoutEffect)(() => updateIsLarge({ ref: descriptionRef, setter: setIsDescriptionLarge }), [description, updateIsLarge]);
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.alertTop, className) }, (0, utils_1.extractSupportProps)(rest), { "data-color": invertAppearance, role: 'alert', onClick: canExpand ? handleExpand : undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentLayout, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textLayout, "data-expanded": isExpanded || undefined, children: [title && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.title, ref: titleRef, "data-color": invertAppearance, "data-test-id": 'alert-top__title', children: title })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.description, ref: descriptionRef, "data-color": invertAppearance, "data-test-id": 'alert-top__description', "data-expanded": isExpanded || undefined, children: description })] }), showLink && ((0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({}, link, { onClick: handleLinkClick, appearance: constants_1.APPEARANCE_TO_COLOR_MAP[appearance], textMode: 'on-accent', size: 'm', "data-test-id": 'alert-top__link' })) }))] }), showAction && ((0, jsx_runtime_1.jsx)(helperComponents_1.AlertButton, Object.assign({}, action, { onClick: handleActionButtonClick, appearance: invertAppearance, variant: 'tonal' })))] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actions, children: [canExpand && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.expandingIcon, "data-appearance": invertAppearance, "data-test-id": 'alert-top__expanding-icon', children: isExpanded ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronDownSVG, {}) })), showCloseButton && ((0, jsx_runtime_1.jsx)(helperComponents_1.AlertButton, { onClick: handleClose, appearance: invertAppearance, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CrossSVG, {}), variant: 'tonal', dataTestId: 'alert-top__close-button' }))] })] })));
+}

package/dist/cjs/components/MobileAlertTop/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const APPEARANCE_TO_COLOR_MAP_INVERT: {
+    readonly neutral: "invert-neutral";
+    readonly primary: "primary";
+    readonly error: "red";
+    readonly warning: "yellow";
+    readonly success: "green";
+    readonly info: "blue";
+};

package/dist/cjs/components/MobileAlertTop/constants.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.APPEARANCE_TO_COLOR_MAP_INVERT = void 0;
+const constants_1 = require("../../constants");
+const COLOR = {
+    InvertNeutral: 'invert-neutral',
+    Primary: 'primary',
+    Red: 'red',
+    Yellow: 'yellow',
+    Green: 'green',
+    Blue: 'blue',
+};
+exports.APPEARANCE_TO_COLOR_MAP_INVERT = {
+    [constants_1.APPEARANCE.Neutral]: COLOR.InvertNeutral,
+    [constants_1.APPEARANCE.Primary]: COLOR.Primary,
+    [constants_1.APPEARANCE.Error]: COLOR.Red,
+    [constants_1.APPEARANCE.Warning]: COLOR.Yellow,
+    [constants_1.APPEARANCE.Success]: COLOR.Green,
+    [constants_1.APPEARANCE.Info]: COLOR.Blue,
+};

package/dist/cjs/components/MobileAlertTop/index.d.ts

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

package/dist/cjs/components/MobileAlertTop/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MobileAlertTop"), exports);

package/dist/cjs/components/MobileAlertTop/styles.module.css

@@ -0,0 +1,177 @@
+.alertTop{
+  padding-top:var(--space-alert-top-container-vertical-padding, 8px);
+  padding-bottom:var(--space-alert-top-container-vertical-padding, 8px);
+  padding-left:var(--space-alert-top-container-horizontal-padding, 16px);
+  padding-right:var(--space-alert-top-container-horizontal-padding, 16px);
+  gap:var(--space-alert-top-container-gap, 16px);
+  display:flex;
+  justify-content:space-between;
+  box-sizing:border-box;
+  gap:0;
+}
+.alertTop[data-color=invert-neutral]{
+  background-color:var(--sys-invert-neutral-background, #30303c);
+}
+.alertTop[data-color=primary]{
+  background-color:var(--sys-primary-accent-default, #389f74);
+}
+.alertTop[data-color=red]{
+  background-color:var(--sys-red-accent-default, #cb3f3e);
+}
+.alertTop[data-color=yellow]{
+  background-color:var(--sys-yellow-accent-default, #e2b134);
+}
+.alertTop[data-color=green]{
+  background-color:var(--sys-green-accent-default, #57b762);
+}
+.alertTop[data-color=blue]{
+  background-color:var(--sys-blue-accent-default, #5388d1);
+}
+
+.icon{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.icon[data-color=invert-neutral]{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.icon[data-color=primary]{
+  color:var(--sys-primary-on-accent, #fbfffc);
+}
+.icon[data-color=red]{
+  color:var(--sys-red-on-accent, #fffbf9);
+}
+.icon[data-color=yellow]{
+  color:var(--sys-yellow-on-accent, #583f1f);
+}
+.icon[data-color=green]{
+  color:var(--sys-green-on-accent, #fcfefa);
+}
+.icon[data-color=blue]{
+  color:var(--sys-blue-on-accent, #fdfeff);
+}
+.icon svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+
+.title{
+  font-family:var(--sans-title-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-s-font-weight, Semibold);
+  line-height:var(--sans-title-s-line-height, 20px);
+  font-size:var(--sans-title-s-font-size, 14px);
+  letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
+  word-wrap:break-word;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.title[data-color=invert-neutral]{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.title[data-color=primary]{
+  color:var(--sys-primary-on-accent, #fbfffc);
+}
+.title[data-color=red]{
+  color:var(--sys-red-on-accent, #fffbf9);
+}
+.title[data-color=yellow]{
+  color:var(--sys-yellow-on-accent, #583f1f);
+}
+.title[data-color=green]{
+  color:var(--sys-green-on-accent, #fcfefa);
+}
+.title[data-color=blue]{
+  color:var(--sys-blue-on-accent, #fdfeff);
+}
+
+.description{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  word-wrap:break-word;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.description[data-color=invert-neutral]{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.description[data-color=primary]{
+  color:var(--sys-primary-on-accent, #fbfffc);
+}
+.description[data-color=red]{
+  color:var(--sys-red-on-accent, #fffbf9);
+}
+.description[data-color=yellow]{
+  color:var(--sys-yellow-on-accent, #583f1f);
+}
+.description[data-color=green]{
+  color:var(--sys-green-on-accent, #fcfefa);
+}
+.description[data-color=blue]{
+  color:var(--sys-blue-on-accent, #fdfeff);
+}
+
+.contentWrapper{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+  align-items:flex-start;
+  min-width:0;
+  justify-content:center;
+}
+
+.contentLayout{
+  gap:var(--space-alert-top-container-content-layout-gap, 2px);
+  display:flex;
+  flex-direction:column;
+  min-width:0;
+  width:100%;
+}
+
+.textLayout{
+  overflow:hidden;
+}
+.textLayout[data-expanded] .title, .textLayout[data-expanded] .description{
+  overflow:initial;
+  text-overflow:initial;
+  white-space:initial;
+}
+
+.actions{
+  display:flex;
+  flex-direction:column;
+}
+
+.expandingIcon{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  flex-shrink:0;
+  width:var(--dimension-5m, 40px);
+  height:var(--dimension-5m, 40px);
+}
+.expandingIcon[data-appearance=invert-neutral]{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.expandingIcon[data-appearance=primary]{
+  color:var(--sys-primary-on-accent, #fbfffc);
+}
+.expandingIcon[data-appearance=red]{
+  color:var(--sys-red-on-accent, #fffbf9);
+}
+.expandingIcon[data-appearance=yellow]{
+  color:var(--sys-yellow-on-accent, #583f1f);
+}
+.expandingIcon[data-appearance=green]{
+  color:var(--sys-green-on-accent, #fcfefa);
+}
+.expandingIcon[data-appearance=blue]{
+  color:var(--sys-blue-on-accent, #fdfeff);
+}

package/dist/cjs/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AdaptiveAlert';
+export * from './MobileAlertTop';

package/dist/cjs/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AdaptiveAlert"), exports);
+__exportStar(require("./MobileAlertTop"), exports);

package/dist/cjs/constants.d.ts

@@ -0,0 +1,16 @@
+import { LinkProps } from '@snack-uikit/link';
+import { ValueOf } from '@snack-uikit/utils';
+export declare const APPEARANCE: {
+    readonly Neutral: "neutral";
+    readonly Primary: "primary";
+    readonly Error: "error";
+    readonly Warning: "warning";
+    readonly Success: "success";
+    readonly Info: "info";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+};
+export declare const APPEARANCE_TO_COLOR_MAP: Record<ValueOf<typeof APPEARANCE>, LinkProps['appearance']>;
+export declare const APPEARANCE_TO_LINK_COLOR_MAP: Record<ValueOf<typeof APPEARANCE>, LinkProps['appearance']>;

package/dist/cjs/constants.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.APPEARANCE_TO_LINK_COLOR_MAP = exports.APPEARANCE_TO_COLOR_MAP = exports.SIZE = exports.APPEARANCE = void 0;
+exports.APPEARANCE = {
+    Neutral: 'neutral',
+    Primary: 'primary',
+    Error: 'error',
+    Warning: 'warning',
+    Success: 'success',
+    Info: 'info',
+};
+exports.SIZE = {
+    S: 's',
+    M: 'm',
+};
+exports.APPEARANCE_TO_COLOR_MAP = {
+    [exports.APPEARANCE.Neutral]: 'neutral',
+    [exports.APPEARANCE.Primary]: 'primary',
+    [exports.APPEARANCE.Error]: 'red',
+    [exports.APPEARANCE.Warning]: 'yellow',
+    [exports.APPEARANCE.Success]: 'green',
+    [exports.APPEARANCE.Info]: 'blue',
+};
+exports.APPEARANCE_TO_LINK_COLOR_MAP = {
+    [exports.APPEARANCE.Neutral]: 'primary',
+    [exports.APPEARANCE.Primary]: 'primary',
+    [exports.APPEARANCE.Error]: 'red',
+    [exports.APPEARANCE.Warning]: 'yellow',
+    [exports.APPEARANCE.Success]: 'green',
+    [exports.APPEARANCE.Info]: 'blue',
+};

package/dist/cjs/helperComponents/AlertButton.d.ts

@@ -0,0 +1,24 @@
+import { MouseEvent, ReactElement } from 'react';
+import { LinkProps } from '@snack-uikit/link';
+import { Size } from '../types';
+type PrivateAlertButtonProps = {
+    /** Внешний вид */
+    appearance?: LinkProps['appearance'] | 'invert-neutral';
+    /** Текст кнопки */
+    text?: string;
+    /** Иконка в кнопке */
+    icon?: ReactElement;
+    /** Вариант отображения */
+    variant?: 'simple' | 'tonal';
+    /** Колбек клика */
+    onClick?(e: MouseEvent<HTMLButtonElement>): void;
+    /** Дата тест айди */
+    dataTestId?: string;
+    /** Управление состоянием загрузки */
+    loading?: boolean;
+    /** Размер */
+    size?: Size;
+};
+export type AlertButtonProps = Omit<PrivateAlertButtonProps, 'appearance' | 'variant'>;
+export declare function AlertButton({ appearance, text, icon, onClick, dataTestId, loading }: PrivateAlertButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/AlertButton.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertButton = AlertButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const loaders_1 = require("@snack-uikit/loaders");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function AlertButton({ appearance, text, icon, onClick, dataTestId, loading = false }) {
+    return ((0, jsx_runtime_1.jsxs)("button", { type: 'button', onClick: onClick, className: styles_module_scss_1.default.alertButton, "data-variant": 'tonal', "data-appearance": appearance, "data-test-id": dataTestId || 'alert__action-button', "data-icon-only": !text || undefined, "data-loading": loading, "data-size": 'm', children: [text && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.text, "data-size": 'm', children: text })), icon && (loading ? (0, jsx_runtime_1.jsx)(loaders_1.Sun, { size: 's' }) : (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.icon, children: icon }))] }));
+}

package/dist/cjs/helperComponents/index.d.ts

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

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AlertButton"), exports);

package/dist/cjs/helperComponents/styles.module.css

@@ -0,0 +1,85 @@
+.alertButton{
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  white-space:nowrap;
+  background:none;
+  border:0;
+}
+.alertButton .text[data-size=m]{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.alertButton .icon{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+}
+.alertButton .icon svg{
+  max-width:var(--size-icon-container-s, 24px);
+  max-height:var(--size-icon-container-s, 24px);
+}
+.alertButton[data-loading=true]{
+  cursor:not-allowed;
+}
+.alertButton[data-loading=true] > *{
+  cursor:not-allowed;
+}
+.alertButton[data-variant=tonal]{
+  height:var(--size-alert-top-button, 32px);
+  gap:var(--space-alert-top-button-gap, 4px);
+  border-radius:var(--radius-alert-top-button, 4px);
+  padding-left:var(--space-alert-top-button-horizontal-padding, 12px);
+  padding-right:var(--space-alert-top-button-horizontal-padding, 12px);
+  background:var(--sys-opacity-enabled, rgba(255, 255, 255, 0.1607843137));
+}
+.alertButton[data-variant=tonal][data-icon-only]{
+  border-radius:var(--radius-alert-top-button, 4px);
+  height:var(--size-alert-top-button, 32px);
+  width:var(--size-alert-top-button, 32px);
+  height:var(--dimension-5m, 40px);
+  width:var(--dimension-5m, 40px);
+  background:none;
+}
+.alertButton[data-variant=tonal]:hover{
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
+}
+.alertButton[data-variant=tonal]:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
+  outline-color:var(--sys-available-on-complementary, #ffffff);
+}
+.alertButton[data-variant=tonal]:active{
+  background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
+}
+.alertButton[data-variant=tonal][data-appearance=invert-neutral]{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.alertButton[data-variant=tonal][data-appearance=primary]{
+  color:var(--sys-primary-on-accent, #fbfffc);
+}
+.alertButton[data-variant=tonal][data-appearance=red]{
+  color:var(--sys-red-on-accent, #fffbf9);
+}
+.alertButton[data-variant=tonal][data-appearance=yellow]{
+  color:var(--sys-yellow-on-accent, #583f1f);
+}
+.alertButton[data-variant=tonal][data-appearance=green]{
+  color:var(--sys-green-on-accent, #fcfefa);
+}
+.alertButton[data-variant=tonal][data-appearance=blue]{
+  color:var(--sys-blue-on-accent, #fdfeff);
+}

package/dist/cjs/index.d.ts

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