@snack-uikit/alert 0.5.20-preview-85c5f47b.0

package/dist/components/Alert/Alert.js

@@ -0,0 +1,28 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { CrossSVG } from '@snack-uikit/icons';
+import { Link } from '@snack-uikit/link';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { Appearance, APPEARANCE_TO_COLOR_MAP } from '../../constants';
+import { getIcon } from '../../utils';
+import styles from './styles.module.css';
+/**
+ * Компонент для отображения уведомления.
+ */
+export function Alert(_a) {
+    var { icon = true, title, href, link, description, onClose, appearance = Alert.appearances.Neutral, className } = _a, rest = __rest(_a, ["icon", "title", "href", "link", "description", "onClose", "appearance", "className"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.alert, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance] }, { children: [icon && (_jsx("div", Object.assign({ className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__icon' }, { children: getIcon(appearance) }))), _jsxs("div", Object.assign({ className: styles.content }, { children: [_jsxs("div", Object.assign({ className: styles.textlayout }, { children: [title && _jsx(TruncateString, { text: title, maxLines: 1, className: styles.title, "data-test-id": 'alert__title' }), _jsx("span", Object.assign({ "data-test-id": 'alert__description', className: styles.description }, { children: description }))] })), link && (_jsx("span", { children: _jsx(Link, { href: href, text: link, onSurface: Link.onSurfaces.Decor, external: true, onColor: APPEARANCE_TO_COLOR_MAP[appearance], size: Link.sizes.M, "data-test-id": 'alert__link' }) }))] })), onClose && (_jsx("button", Object.assign({ onClick: onClose, className: styles.closeButton, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__close-button' }, { children: _jsx(CrossSVG, {}) })))] })));
+}
+Alert.appearances = Appearance;

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

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

package/dist/components/Alert/index.js

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

package/dist/components/Alert/styles.module.css

@@ -0,0 +1,187 @@
+.alert{
+  padding-top:var(--space-alert-container-vertical-padding, 14px);
+  padding-bottom:var(--space-alert-container-vertical-padding, 14px);
+  padding-left:var(--space-alert-container-horizontal-padding, 14px);
+  padding-right:var(--space-alert-container-horizontal-padding, 14px);
+  gap:var(--space-alert-container-gap, 8px);
+  border-radius:var(--radius-alert-container, 8px);
+  border-width:var(--border-width-general-xs, 1px);
+  display:flex;
+  box-sizing:border-box;
+  min-width:256px;
+  border-style:solid;
+}
+.alert[data-color=neutral]{
+  background-color:var(--sys-neutral-background, #f0f0f0);
+  border-color:var(--sys-neutral-decor-default, #dedede);
+}
+.alert[data-color=primary]{
+  background-color:var(--sys-primary-background, #f6effe);
+  border-color:var(--sys-primary-decor-default, #ebdefd);
+}
+.alert[data-color=red]{
+  background-color:var(--sys-red-background, #fdede8);
+  border-color:var(--sys-red-decor-default, #ffd8d0);
+}
+.alert[data-color=yellow]{
+  background-color:var(--sys-yellow-background, #fbf4d6);
+  border-color:var(--sys-yellow-decor-default, #f9e5ad);
+}
+.alert[data-color=green]{
+  background-color:var(--sys-green-background, #e9f6f3);
+  border-color:var(--sys-green-decor-default, #cdebe3);
+}
+
+.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);
+  color:var(--sys-neutral-text-main, #333333);
+}
+
+.textlayout{
+  padding-top:var(--space-alert-container-content-layout-text-layout-padding-top, 2px);
+  overflow:hidden;
+}
+
+.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);
+  color:var(--sys-neutral-text-support, #565656);
+  word-wrap:break-word;
+}
+
+.content{
+  gap:var(--space-alert-container-content-layout-gap, 8px);
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  min-width:0;
+}
+
+.icon[data-color=neutral]{
+  color:var(--sys-neutral-accent-default, #757575);
+}
+.icon[data-color=primary]{
+  color:var(--sys-primary-accent-default, #794ed3);
+}
+.icon[data-color=red]{
+  color:var(--sys-red-accent-default, #d93f2f);
+}
+.icon[data-color=yellow]{
+  color:var(--sys-yellow-accent-default, #feb528);
+}
+.icon[data-color=green]{
+  color:var(--sys-green-accent-default, #0bbe8f);
+}
+.icon svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+
+.closeButton{
+  height:var(--size-alert-button-close, 24px);
+  width:var(--size-alert-button-close, 24px);
+  border-radius:var(--radius-alert-button-close, 8px);
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  margin-left:auto;
+  padding:0;
+  background:none;
+  border:none;
+}
+.closeButton svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+.closeButton[data-color=neutral]{
+  color:var(--sys-neutral-text-light, #898989);
+}
+.closeButton[data-color=neutral]:hover{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.closeButton[data-color=neutral]: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, );
+  color:var(--sys-neutral-text-support, #565656);
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.closeButton[data-color=neutral]:active{
+  color:var(--sys-neutral-text-main, #333333);
+}
+.closeButton[data-color=primary]{
+  color:var(--sys-primary-text-light, #997adc);
+}
+.closeButton[data-color=primary]:hover{
+  color:var(--sys-primary-text-support, #5b4796);
+}
+.closeButton[data-color=primary]: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, );
+  color:var(--sys-primary-text-support, #5b4796);
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.closeButton[data-color=primary]:active{
+  color:var(--sys-primary-text-main, #382a62);
+}
+.closeButton[data-color=red]{
+  color:var(--sys-red-text-light, #ec7465);
+}
+.closeButton[data-color=red]:hover{
+  color:var(--sys-red-text-support, #a93936);
+}
+.closeButton[data-color=red]: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, );
+  color:var(--sys-red-text-support, #a93936);
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.closeButton[data-color=red]:active{
+  color:var(--sys-red-text-main, #621c1e);
+}
+.closeButton[data-color=yellow]{
+  color:var(--sys-yellow-text-light, #be7d3c);
+}
+.closeButton[data-color=yellow]:hover{
+  color:var(--sys-yellow-text-support, #80461b);
+}
+.closeButton[data-color=yellow]: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, );
+  color:var(--sys-yellow-text-support, #80461b);
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.closeButton[data-color=yellow]:active{
+  color:var(--sys-yellow-text-main, #54290f);
+}
+.closeButton[data-color=green]{
+  color:var(--sys-green-text-light, #4d9e80);
+}
+.closeButton[data-color=green]:hover{
+  color:var(--sys-green-text-support, #335747);
+}
+.closeButton[data-color=green]: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, );
+  color:var(--sys-green-text-support, #335747);
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.closeButton[data-color=green]:active{
+  color:var(--sys-green-text-main, #1f392a);
+}

package/dist/components/AlertTop/AlertTop.d.ts

@@ -0,0 +1,34 @@
+import { ReactElement } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Appearance } from '../../constants';
+export type AlertTopProps = WithSupportProps<{
+    /** Отображать иконку */
+    icon?: boolean;
+    /** Заголовок */
+    title?: string;
+    /** Описание */
+    description: string;
+    /** Текст ссылки */
+    link?: string;
+    /** Ссылка */
+    href?: string;
+    /** Колбек закрытия */
+    onClose?: () => void;
+    /** Внешний вид */
+    appearance?: Appearance;
+    /** Текст кнопки */
+    buttonText?: string;
+    /** Колбек клика по кнопке */
+    buttonOnClick?: () => void;
+    /** Иконка в кнопке */
+    buttonIcon?: ReactElement;
+    /** CSS-класс */
+    className?: string;
+}>;
+/**
+ * Компонент для отображения уведомления вверху экрана.
+ */
+export declare function AlertTop({ icon, title, description, link, href, onClose, appearance, buttonText, buttonOnClick, buttonIcon, className, ...rest }: AlertTopProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AlertTop {
+    var appearances: typeof Appearance;
+}

package/dist/components/AlertTop/AlertTop.js

@@ -0,0 +1,30 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { CrossSVG } from '@snack-uikit/icons';
+import { Link } from '@snack-uikit/link';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { Appearance, APPEARANCE_TO_COLOR_MAP } from '../../constants';
+import { AlertTopButton } from '../../helperComponents';
+import { getIcon } from '../../utils';
+import { APPEARANCE_TO_COLOR_MAP_INVERT } from './constants';
+import styles from './styles.module.css';
+/**
+ * Компонент для отображения уведомления вверху экрана.
+ */
+export function AlertTop(_a) {
+    var { icon = true, title, description, link, href, onClose, appearance = AlertTop.appearances.Neutral, buttonText, buttonOnClick, buttonIcon, className } = _a, rest = __rest(_a, ["icon", "title", "description", "link", "href", "onClose", "appearance", "buttonText", "buttonOnClick", "buttonIcon", "className"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.alertTop, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance] }, { children: [_jsxs("div", Object.assign({ className: styles.contentWrapper }, { children: [icon && (_jsx("div", Object.assign({ className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__icon' }, { children: getIcon(appearance) }))), _jsxs("div", Object.assign({ className: styles.contentLayout }, { children: [_jsxs("div", Object.assign({ className: styles.textLayout }, { children: [title && (_jsx("div", Object.assign({ className: styles.title, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__title' }, { children: _jsx(TruncateString, { text: title, maxLines: 1 }) }))), _jsx("span", Object.assign({ className: styles.description, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__description' }, { children: description }))] })), link && (_jsx("span", { children: _jsx(Link, { onSurface: Link.onSurfaces.Accent, href: href, text: link, external: true, onColor: APPEARANCE_TO_COLOR_MAP[appearance], size: Link.sizes.M, "data-test-id": 'alert-top__link' }) }))] }))] })), _jsxs("div", Object.assign({ className: styles.actions }, { children: [buttonText && (_jsx(AlertTopButton, { buttonIcon: buttonIcon, buttonOnClick: buttonOnClick, buttonText: buttonText, appearance: appearance })), onClose && (_jsx("button", Object.assign({ onClick: onClose, className: styles.closeButton, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__close-button' }, { children: _jsx(CrossSVG, {}) })))] }))] })));
+}
+AlertTop.appearances = Appearance;

package/dist/components/AlertTop/constants.d.ts

@@ -0,0 +1,14 @@
+export declare enum Color {
+    InvertNeutral = "invert-neutral",
+    Primary = "primary",
+    Red = "red",
+    Yellow = "yellow",
+    Green = "green"
+}
+export declare const APPEARANCE_TO_COLOR_MAP_INVERT: {
+    readonly neutral: Color.InvertNeutral;
+    readonly primary: Color.Primary;
+    readonly error: Color.Red;
+    readonly warning: Color.Yellow;
+    readonly success: Color.Green;
+};

package/dist/components/AlertTop/constants.js

@@ -0,0 +1,16 @@
+import { Appearance } from '../../constants';
+export var Color;
+(function (Color) {
+    Color["InvertNeutral"] = "invert-neutral";
+    Color["Primary"] = "primary";
+    Color["Red"] = "red";
+    Color["Yellow"] = "yellow";
+    Color["Green"] = "green";
+})(Color || (Color = {}));
+export const APPEARANCE_TO_COLOR_MAP_INVERT = {
+    [Appearance.Neutral]: Color.InvertNeutral,
+    [Appearance.Primary]: Color.Primary,
+    [Appearance.Error]: Color.Red,
+    [Appearance.Warning]: Color.Yellow,
+    [Appearance.Success]: Color.Green,
+};

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

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

package/dist/components/AlertTop/index.js

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

package/dist/components/AlertTop/styles.module.css

@@ -0,0 +1,237 @@
+.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;
+}
+.alertTop[data-color=invert-neutral]{
+  background-color:var(--sys-invert-neutral-background, #232323);
+}
+.alertTop[data-color=primary]{
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.alertTop[data-color=red]{
+  background-color:var(--sys-red-accent-default, #d93f2f);
+}
+.alertTop[data-color=yellow]{
+  background-color:var(--sys-yellow-accent-default, #feb528);
+}
+.alertTop[data-color=green]{
+  background-color:var(--sys-green-accent-default, #0bbe8f);
+}
+
+.icon[data-color=invert-neutral]{
+  color:var(--sys-invert-neutral-text-main, #e7e7e7);
+}
+.icon[data-color=primary]{
+  color:var(--sys-primary-on-accent, #fdfbff);
+}
+.icon[data-color=red]{
+  color:var(--sys-red-on-accent, #fffbfa);
+}
+.icon[data-color=yellow]{
+  color:var(--sys-yellow-on-accent, #54290f);
+}
+.icon[data-color=green]{
+  color:var(--sys-green-on-accent, #1f392a);
+}
+.icon svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 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);
+}
+.title[data-color=invert-neutral]{
+  color:var(--sys-invert-neutral-text-main, #e7e7e7);
+}
+.title[data-color=primary]{
+  color:var(--sys-primary-on-accent, #fdfbff);
+}
+.title[data-color=red]{
+  color:var(--sys-red-on-accent, #fffbfa);
+}
+.title[data-color=yellow]{
+  color:var(--sys-yellow-on-accent, #54290f);
+}
+.title[data-color=green]{
+  color:var(--sys-green-on-accent, #1f392a);
+}
+
+.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;
+}
+.description[data-color=invert-neutral]{
+  color:var(--sys-invert-neutral-text-main, #e7e7e7);
+}
+.description[data-color=primary]{
+  color:var(--sys-primary-on-accent, #fdfbff);
+}
+.description[data-color=red]{
+  color:var(--sys-red-on-accent, #fffbfa);
+}
+.description[data-color=yellow]{
+  color:var(--sys-yellow-on-accent, #54290f);
+}
+.description[data-color=green]{
+  color:var(--sys-green-on-accent, #1f392a);
+}
+
+.contentWrapper{
+  display:flex;
+  gap:var(--dimension-2m, 16px);
+  align-items:center;
+  min-width:0;
+}
+
+.contentLayout{
+  gap:var(--space-alert-top-container-content-layout-gap, 2px);
+  display:flex;
+  flex-direction:column;
+  min-width:0;
+}
+
+.textLayout{
+  overflow:hidden;
+}
+
+.closeButton{
+  border-radius:var(--radius-alert-top-button, 12px);
+  height:var(--size-alert-top-button, 32px);
+  width:var(--size-alert-top-button, 32px);
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  background:none;
+  border:none;
+}
+.closeButton svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+.closeButton[data-color=invert-neutral]{
+  color:var(--sys-invert-neutral-text-main, #e7e7e7);
+  opacity:var(--opacity-a080, 0.8);
+}
+.closeButton[data-color=invert-neutral]:hover{
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
+}
+.closeButton[data-color=invert-neutral]: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, );
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
+  outline-color:var(--sys-available-on-complementary, #fdfdfd);
+}
+.closeButton[data-color=invert-neutral]:active{
+  opacity:var(--opacity-a080, 0.8);
+  background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
+}
+.closeButton[data-color=primary]{
+  color:var(--sys-primary-on-accent, #fdfbff);
+  opacity:var(--opacity-a080, 0.8);
+}
+.closeButton[data-color=primary]:hover{
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
+}
+.closeButton[data-color=primary]: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, );
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
+  outline-color:var(--sys-available-on-complementary, #fdfdfd);
+}
+.closeButton[data-color=primary]:active{
+  opacity:var(--opacity-a080, 0.8);
+  background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
+}
+.closeButton[data-color=red]{
+  color:var(--sys-red-on-accent, #fffbfa);
+  opacity:var(--opacity-a080, 0.8);
+}
+.closeButton[data-color=red]:hover{
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
+}
+.closeButton[data-color=red]: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, );
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
+  outline-color:var(--sys-available-on-complementary, #fdfdfd);
+}
+.closeButton[data-color=red]:active{
+  opacity:var(--opacity-a080, 0.8);
+  background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
+}
+.closeButton[data-color=yellow]{
+  color:var(--sys-yellow-on-accent, #54290f);
+  opacity:var(--opacity-a080, 0.8);
+}
+.closeButton[data-color=yellow]:hover{
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
+}
+.closeButton[data-color=yellow]: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, );
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
+  outline-color:var(--sys-available-on-complementary, #fdfdfd);
+}
+.closeButton[data-color=yellow]:active{
+  opacity:var(--opacity-a080, 0.8);
+  background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
+}
+.closeButton[data-color=green]{
+  color:var(--sys-green-on-accent, #1f392a);
+  opacity:var(--opacity-a080, 0.8);
+}
+.closeButton[data-color=green]:hover{
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
+}
+.closeButton[data-color=green]: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, );
+  opacity:unset;
+  background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
+  outline-color:var(--sys-available-on-complementary, #fdfdfd);
+}
+.closeButton[data-color=green]:active{
+  opacity:var(--opacity-a080, 0.8);
+  background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
+}
+
+.actions{
+  display:flex;
+  gap:var(--dimension-2m, 16px);
+  align-items:center;
+}

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Alert';
+export * from './AlertTop';

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export * from './Alert';
+export * from './AlertTop';

package/dist/constants.d.ts

@@ -0,0 +1,15 @@
+import { OnColor } from '@snack-uikit/link';
+export declare enum Appearance {
+    Neutral = "neutral",
+    Primary = "primary",
+    Error = "error",
+    Warning = "warning",
+    Success = "success"
+}
+export declare const APPEARANCE_TO_COLOR_MAP: {
+    readonly neutral: OnColor.Neutral;
+    readonly primary: OnColor.Primary;
+    readonly error: OnColor.Red;
+    readonly warning: OnColor.Yellow;
+    readonly success: OnColor.Green;
+};

package/dist/constants.js

@@ -0,0 +1,16 @@
+import { OnColor } from '@snack-uikit/link';
+export var Appearance;
+(function (Appearance) {
+    Appearance["Neutral"] = "neutral";
+    Appearance["Primary"] = "primary";
+    Appearance["Error"] = "error";
+    Appearance["Warning"] = "warning";
+    Appearance["Success"] = "success";
+})(Appearance || (Appearance = {}));
+export const APPEARANCE_TO_COLOR_MAP = {
+    [Appearance.Neutral]: OnColor.Neutral,
+    [Appearance.Primary]: OnColor.Primary,
+    [Appearance.Error]: OnColor.Red,
+    [Appearance.Warning]: OnColor.Yellow,
+    [Appearance.Success]: OnColor.Green,
+};

package/dist/helperComponents/AlertTopButton/AlertTopButton.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { Appearance } from '../../constants';
+export type AlertTopButtonProps = {
+    appearance: Appearance;
+    buttonText: string;
+    buttonIcon?: ReactElement;
+    buttonOnClick?: () => void;
+};
+export declare function AlertTopButton({ appearance, buttonText, buttonIcon, buttonOnClick }: AlertTopButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/AlertTopButton/AlertTopButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { APPEARANCE_TO_COLOR_MAP_INVERT } from '../../components/AlertTop/constants';
+import styles from './styles.module.css';
+export function AlertTopButton({ appearance, buttonText, buttonIcon, buttonOnClick }) {
+    return (_jsxs("button", Object.assign({ onClick: buttonOnClick, className: styles.alertTopButton, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance] }, { children: [_jsx("span", { children: buttonText }), buttonIcon] })));
+}

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

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

package/dist/helperComponents/AlertTopButton/index.js

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