@snack-uikit/alert 0.13.6 → 0.13.7-preview-1f246c4a.0

package/dist/cjs/components/Alert/Alert.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__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 = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Alert = Alert;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const icons_1 = require("@snack-uikit/icons");
+const link_1 = require("@snack-uikit/link");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const utils_2 = require("../../utils");
+const styles_module_scss_1 = __importDefault({});
+/**
+ * Компонент для отображения уведомления.
+ */
+function Alert(_a) {
+  var _b;
+  var {
+      icon = true,
+      title,
+      truncate,
+      link,
+      description,
+      onClose,
+      appearance = constants_1.APPEARANCE.Neutral,
+      className,
+      actions,
+      outline,
+      size = 'm'
+    } = _a,
+    rest = __rest(_a, ["icon", "title", "truncate", "link", "description", "onClose", "appearance", "className", "actions", "outline", "size"]);
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.alert, {
+      [styles_module_scss_1.default.alertOutline]: outline
+    }, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    "data-color": constants_1.APPEARANCE_TO_COLOR_MAP[appearance],
+    "data-size": size,
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.body,
+      "data-size": size,
+      children: [icon && (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.icon,
+        "data-color": constants_1.APPEARANCE_TO_COLOR_MAP[appearance],
+        "data-test-id": 'alert__icon',
+        "data-size": size,
+        children: (0, utils_2.getIcon)(appearance, size === 's' ? 16 : 24)
+      }), (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.contentLayout,
+        "data-size": size,
+        children: [title && (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+          text: title,
+          maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.title) !== null && _b !== void 0 ? _b : 1,
+          className: styles_module_scss_1.default.title,
+          "data-test-id": 'alert__title',
+          "data-size": size
+        }), (0, jsx_runtime_1.jsx)("span", {
+          "data-test-id": 'alert__description',
+          className: styles_module_scss_1.default.description,
+          "data-size": size,
+          children: description
+        }), link && (0, jsx_runtime_1.jsx)("span", {
+          children: (0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({}, link, {
+            appearance: constants_1.APPEARANCE_TO_LINK_COLOR_MAP[appearance],
+            textMode: 'default',
+            size: size,
+            "data-test-id": 'alert__link'
+          }))
+        })]
+      }), onClose && (0, jsx_runtime_1.jsx)(helperComponents_1.AlertButton, {
+        onClick: onClose,
+        appearance: constants_1.APPEARANCE_TO_COLOR_MAP[appearance],
+        icon: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {}),
+        variant: 'simple',
+        dataTestId: 'alert__close-button'
+      })]
+    }), actions && (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.footer,
+      "data-size": size,
+      children: [actions.primary && (0, jsx_runtime_1.jsx)(helperComponents_1.AlertButton, Object.assign({}, actions.primary, {
+        appearance: constants_1.APPEARANCE_TO_COLOR_MAP[appearance],
+        variant: 'simple',
+        size: size
+      })), (actions === null || actions === void 0 ? void 0 : actions.secondary) && (0, jsx_runtime_1.jsx)(helperComponents_1.AlertButton, Object.assign({}, actions.secondary, {
+        appearance: constants_1.APPEARANCE_TO_COLOR_MAP[appearance],
+        variant: 'simple',
+        size: size
+      }))]
+    })]
+  }));
+}

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./Alert"), exports);

package/dist/cjs/components/AlertTop/AlertTop.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__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 = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlertTop = AlertTop;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const icons_1 = require("@snack-uikit/icons");
+const link_1 = require("@snack-uikit/link");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const utils_2 = require("../../utils");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault({});
+/**
+ * Компонент для отображения уведомления вверху экрана.
+ */
+function AlertTop(_a) {
+  var _b;
+  var {
+      icon = true,
+      title,
+      description,
+      link,
+      onClose,
+      truncate,
+      appearance = constants_1.APPEARANCE.Neutral,
+      action,
+      className
+    } = _a,
+    rest = __rest(_a, ["icon", "title", "description", "link", "onClose", "truncate", "appearance", "action", "className"]);
+  return (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": constants_2.APPEARANCE_TO_COLOR_MAP_INVERT[appearance],
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.contentWrapper,
+      children: [icon && (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.icon,
+        "data-color": constants_2.APPEARANCE_TO_COLOR_MAP_INVERT[appearance],
+        "data-test-id": 'alert-top__icon',
+        children: (0, utils_2.getIcon)(appearance, 24)
+      }), (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,
+          children: [title && (0, jsx_runtime_1.jsx)("div", {
+            className: styles_module_scss_1.default.title,
+            "data-color": constants_2.APPEARANCE_TO_COLOR_MAP_INVERT[appearance],
+            "data-test-id": 'alert-top__title',
+            children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+              text: title,
+              maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.title) !== null && _b !== void 0 ? _b : 1
+            })
+          }), (0, jsx_runtime_1.jsx)("span", {
+            className: styles_module_scss_1.default.description,
+            "data-color": constants_2.APPEARANCE_TO_COLOR_MAP_INVERT[appearance],
+            "data-test-id": 'alert-top__description',
+            children: description
+          })]
+        }), link && (0, jsx_runtime_1.jsx)("span", {
+          children: (0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({}, link, {
+            appearance: constants_1.APPEARANCE_TO_COLOR_MAP[appearance],
+            textMode: 'on-accent',
+            size: 'm',
+            "data-test-id": 'alert-top__link'
+          }))
+        })]
+      })]
+    }), (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.actions,
+      children: [action && (0, jsx_runtime_1.jsx)(helperComponents_1.AlertButton, Object.assign({}, action, {
+        appearance: constants_2.APPEARANCE_TO_COLOR_MAP_INVERT[appearance],
+        variant: 'tonal'
+      })), onClose && (0, jsx_runtime_1.jsx)(helperComponents_1.AlertButton, {
+        onClick: onClose,
+        appearance: constants_2.APPEARANCE_TO_COLOR_MAP_INVERT[appearance],
+        icon: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {}),
+        variant: 'tonal',
+        dataTestId: 'alert-top__close-button'
+      })]
+    })]
+  }));
+}

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

@@ -0,0 +1,23 @@
+"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/AlertTop/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./AlertTop"), exports);

package/dist/cjs/components/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./Alert"), exports);
+__exportStar(require("./AlertTop"), exports);

package/dist/cjs/constants.js

@@ -0,0 +1,34 @@
+"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.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__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({});
+function AlertButton(_ref) {
+  let {
+    appearance,
+    text,
+    icon,
+    onClick,
+    variant = 'simple',
+    dataTestId,
+    loading = false,
+    size = 's'
+  } = _ref;
+  return (0, jsx_runtime_1.jsxs)("button", {
+    type: 'button',
+    onClick: onClick,
+    className: styles_module_scss_1.default.alertButton,
+    "data-variant": variant,
+    "data-appearance": appearance,
+    "data-test-id": dataTestId || 'alert__action-button',
+    "data-icon-only": !text || undefined,
+    "data-loading": loading,
+    "data-size": size,
+    children: [text && (0, jsx_runtime_1.jsx)("span", {
+      className: styles_module_scss_1.default.text,
+      "data-size": size,
+      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.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./components"), exports);

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getIcon = getIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@snack-uikit/icons");
+const constants_1 = require("./constants");
+function getIcon(appearance, size) {
+  switch (appearance) {
+    case constants_1.APPEARANCE.Success:
+      return (0, jsx_runtime_1.jsx)(icons_1.CheckFilledSVG, {
+        size: size
+      });
+    case constants_1.APPEARANCE.Error:
+      return (0, jsx_runtime_1.jsx)(icons_1.CrossFilledSVG, {
+        size: size
+      });
+    case constants_1.APPEARANCE.Warning:
+      return (0, jsx_runtime_1.jsx)(icons_1.AlarmFilledSVG, {
+        size: size
+      });
+    case constants_1.APPEARANCE.Primary:
+    case constants_1.APPEARANCE.Neutral:
+    default:
+      return (0, jsx_runtime_1.jsx)(icons_1.InfoFilledSVG, {
+        size: size
+      });
+  }
+}

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

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

package/dist/esm/components/Alert/index.js

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

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

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

package/dist/esm/components/AlertTop/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/esm/components/AlertTop/index.js

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

package/dist/esm/components/index.js

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

package/dist/esm/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/esm/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, variant, dataTestId, loading, size, }: PrivateAlertButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/index.js

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

package/dist/esm/index.js

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

package/dist/esm/types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE, SIZE } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type Size = ValueOf<typeof SIZE>;

package/dist/esm/utils.d.ts

@@ -0,0 +1,2 @@
+import { Appearance } from './types';
+export declare function getIcon(appearance: Appearance, size: number): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Alert",
-  "version": "0.13.6",
+  "version": "0.13.7-preview-1f246c4a.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/alert",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Alexander Starodubtsev <avstarodubtsev@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,12 +34,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.22.1",
-    "@snack-uikit/link": "0.13.4",
-    "@snack-uikit/loaders": "0.5.3",
-    "@snack-uikit/truncate-string": "0.4.24",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/icons": "0.22.2-preview-1f246c4a.0",
+    "@snack-uikit/link": "0.13.5-preview-1f246c4a.0",
+    "@snack-uikit/loaders": "0.5.4-preview-1f246c4a.0",
+    "@snack-uikit/truncate-string": "0.4.25-preview-1f246c4a.0",
+    "@snack-uikit/utils": "3.4.1-preview-1f246c4a.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "6f68e2729e48e5b34674af649dc9dfb3bda3951f"
+  "gitHead": "a185a55c0722b19f70dd168cf299e6f53a0fd93f"
 }

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

@@ -1,198 +0,0 @@
-.alert{
-  display:flex;
-  flex-direction:column;
-  box-sizing:border-box;
-  min-width:256px;
-}
-.alert[data-color=neutral]{
-  background-color:var(--sys-neutral-background, #eeeff3);
-}
-.alert[data-color=primary]{
-  background-color:var(--sys-primary-background, #f6effe);
-}
-.alert[data-color=red]{
-  background-color:var(--sys-red-background, #fdf1ef);
-}
-.alert[data-color=yellow]{
-  background-color:var(--sys-yellow-background, #fef7e1);
-}
-.alert[data-color=green]{
-  background-color:var(--sys-green-background, #f1fbee);
-}
-.alert[data-color=blue]{
-  background-color:var(--sys-blue-background, #eef8ff);
-}
-.alert[data-size=s]{
-  padding-top:var(--space-alert-s-container-vertical-padding, 7px);
-  padding-bottom:var(--space-alert-s-container-vertical-padding, 7px);
-  padding-left:var(--space-alert-s-container-horizontal-padding, 7px);
-  padding-right:var(--space-alert-s-container-horizontal-padding, 7px);
-  gap:var(--space-alert-s-container-gap, 7px);
-  border-radius:var(--radius-alert-container, 8px);
-  border-width:var(--border-width-alert-single, 1px);
-}
-.alert[data-size=m]{
-  padding-top:var(--space-alert-m-container-vertical-padding, 15px);
-  padding-bottom:var(--space-alert-m-container-vertical-padding, 15px);
-  padding-left:var(--space-alert-m-container-horizontal-padding, 15px);
-  padding-right:var(--space-alert-m-container-horizontal-padding, 15px);
-  gap:var(--space-alert-m-container-gap, 15px);
-  border-radius:var(--radius-alert-container, 8px);
-  border-width:var(--border-width-alert-single, 1px);
-}
-
-.alertOutline{
-  outline-style:solid;
-  outline-width:var(--border-width-accordion-collapse-block-primary, 1px);
-}
-.alertOutline[data-color=neutral]{
-  outline-color:var(--sys-neutral-decor-default, #dde0ea);
-}
-.alertOutline[data-color=neutral]:focus-within, .alertOutline[data-color=neutral]:hover{
-  outline-color:var(--sys-neutral-decor-default, #dde0ea);
-}
-.alertOutline[data-color=primary]{
-  outline-color:var(--sys-primary-decor-default, #ebdefd);
-}
-.alertOutline[data-color=primary]:focus-within, .alertOutline[data-color=primary]:hover{
-  outline-color:var(--sys-primary-decor-default, #ebdefd);
-}
-.alertOutline[data-color=red]{
-  outline-color:var(--sys-red-decor-default, #fdd6cd);
-}
-.alertOutline[data-color=red]:focus-within, .alertOutline[data-color=red]:hover{
-  outline-color:var(--sys-red-decor-default, #fdd6cd);
-}
-.alertOutline[data-color=yellow]{
-  outline-color:var(--sys-yellow-decor-default, #f0dfb1);
-}
-.alertOutline[data-color=yellow]:focus-within, .alertOutline[data-color=yellow]:hover{
-  outline-color:var(--sys-yellow-decor-default, #f0dfb1);
-}
-.alertOutline[data-color=green]{
-  outline-color:var(--sys-green-decor-default, #d2ead0);
-}
-.alertOutline[data-color=green]:focus-within, .alertOutline[data-color=green]:hover{
-  outline-color:var(--sys-green-decor-default, #d2ead0);
-}
-.alertOutline[data-color=blue]{
-  outline-color:var(--sys-blue-decor-default, #d6e2f4);
-}
-.alertOutline[data-color=blue]:focus-within, .alertOutline[data-color=blue]:hover{
-  outline-color:var(--sys-blue-decor-default, #d6e2f4);
-}
-
-.body{
-  display:flex;
-  box-sizing:border-box;
-  width:100%;
-}
-.body[data-size=s]{
-  gap:var(--space-alert-s-container-body-gap, 4px);
-}
-.body[data-size=m]{
-  gap:var(--space-alert-m-container-body-gap, 8px);
-}
-
-.icon[data-color=neutral]{
-  color:var(--sys-neutral-accent-default, #787b8a);
-}
-.icon[data-color=primary]{
-  color:var(--sys-primary-accent-default, #794ed3);
-}
-.icon[data-color=red]{
-  color:var(--sys-red-accent-default, #cb3f3e);
-}
-.icon[data-color=yellow]{
-  color:var(--sys-yellow-accent-default, #e2b134);
-}
-.icon[data-color=green]{
-  color:var(--sys-green-accent-default, #57b762);
-}
-.icon[data-color=blue]{
-  color:var(--sys-blue-accent-default, #5388d1);
-}
-.icon[data-size=s]{
-  width:var(--size-icon-container-xs, 16px);
-  height:var(--size-icon-container-xs, 16px);
-}
-.icon[data-size=s] svg{
-  max-width:var(--size-icon-container-xs, 16px);
-  max-height:var(--size-icon-container-xs, 16px);
-}
-.icon[data-size=m]{
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
-}
-.icon[data-size=m] svg{
-  max-width:var(--size-icon-container-s, 24px);
-  max-height:var(--size-icon-container-s, 24px);
-}
-
-.contentLayout{
-  display:flex;
-  flex:1;
-  flex-direction:column;
-  min-width:0;
-}
-.contentLayout[data-size=s]{
-  padding-top:var(--space-alert-s-container-content-layout-padding-top, 0px);
-}
-.contentLayout[data-size=m]{
-  padding-top:var(--space-alert-m-container-content-layout-padding-top, 2px);
-}
-
-.title{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-.title[data-size=s]{
-  font-family:var(--sans-label-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-m-font-weight, Semibold);
-  line-height:var(--sans-label-m-line-height, 16px);
-  font-size:var(--sans-label-m-font-size, 12px);
-  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
-}
-.title[data-size=m]{
-  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);
-}
-
-.description{
-  color:var(--sys-neutral-text-support, #6d707f);
-  word-wrap:break-word;
-}
-.description[data-size=s]{
-  font-family:var(--sans-body-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-s-font-weight, Regular);
-  line-height:var(--sans-body-s-line-height, 16px);
-  font-size:var(--sans-body-s-font-size, 12px);
-  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
-}
-.description[data-size=m]{
-  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);
-}
-
-.footer{
-  position:relative;
-  display:flex;
-  flex-direction:row-reverse;
-  align-items:center;
-  width:100%;
-}
-.footer[data-size=s]{
-  gap:var(--space-alert-s-container-footer-gap, 16px);
-}
-.footer[data-size=m]{
-  gap:var(--space-alert-m-container-footer-gap, 16px);
-}

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

@@ -1,135 +0,0 @@
-.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, #30303c);
-}
-.alertTop[data-color=primary]{
-  background-color:var(--sys-primary-accent-default, #794ed3);
-}
-.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, #fdfbff);
-}
-.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);
-}
-.title[data-color=invert-neutral]{
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
-}
-.title[data-color=primary]{
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-.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;
-}
-.description[data-color=invert-neutral]{
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
-}
-.description[data-color=primary]{
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-.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;
-  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;
-}
-
-.actions{
-  display:flex;
-  gap:var(--dimension-2m, 16px);
-  align-items:center;
-}

package/dist/helperComponents/styles.module.css

@@ -1,171 +0,0 @@
-.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=s]{
-  font-family:var(--sans-label-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-m-font-weight, Semibold);
-  line-height:var(--sans-label-m-line-height, 16px);
-  font-size:var(--sans-label-m-font-size, 12px);
-  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
-}
-.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=simple][data-size=s]{
-  height:var(--size-alert-button-m, 24px);
-  gap:var(--space-alert-m-button-gap, 4px);
-  border-radius:var(--radius-alert-button, 8px);
-}
-.alertButton[data-variant=simple][data-size=s][data-icon-only]{
-  height:var(--size-alert-button-s, 16px);
-  width:var(--size-alert-button-s, 16px);
-  border-radius:var(--radius-alert-button, 8px);
-}
-.alertButton[data-variant=simple][data-size=m]{
-  height:var(--size-alert-button-m, 24px);
-  gap:var(--space-alert-m-button-gap, 4px);
-  border-radius:var(--radius-alert-button, 8px);
-}
-.alertButton[data-variant=simple][data-size=m][data-icon-only]{
-  height:var(--size-alert-button-m, 24px);
-  width:var(--size-alert-button-m, 24px);
-  border-radius:var(--radius-alert-button, 8px);
-}
-.alertButton[data-variant=simple]:focus-visible{
-  outline-color:var(--sys-available-complementary, #1c1c24);
-  outline-offset:var(--spacing-state-focus-offset, 2px);
-}
-.alertButton[data-variant=simple][data-appearance=neutral]{
-  color:var(--sys-neutral-text-support, #6d707f);
-}
-.alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-.alertButton[data-variant=simple][data-appearance=neutral]:active{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-.alertButton[data-variant=simple][data-appearance=primary]{
-  color:var(--sys-primary-text-support, #5b4796);
-}
-.alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
-  color:var(--sys-primary-text-main, #382a62);
-}
-.alertButton[data-variant=simple][data-appearance=primary]:active{
-  color:var(--sys-primary-text-main, #382a62);
-}
-.alertButton[data-variant=simple][data-appearance=red]{
-  color:var(--sys-red-text-support, #ae514c);
-}
-.alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
-  color:var(--sys-red-text-main, #7a2d2d);
-}
-.alertButton[data-variant=simple][data-appearance=red]:active{
-  color:var(--sys-red-text-main, #7a2d2d);
-}
-.alertButton[data-variant=simple][data-appearance=yellow]{
-  color:var(--sys-yellow-text-support, #b78c32);
-}
-.alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
-  color:var(--sys-yellow-text-main, #815f19);
-}
-.alertButton[data-variant=simple][data-appearance=yellow]:active{
-  color:var(--sys-yellow-text-main, #815f19);
-}
-.alertButton[data-variant=simple][data-appearance=green]{
-  color:var(--sys-green-text-support, #55915a);
-}
-.alertButton[data-variant=simple][data-appearance=green]:hover, .alertButton[data-variant=simple][data-appearance=green]:focus-visible{
-  color:var(--sys-green-text-main, #3d6035);
-}
-.alertButton[data-variant=simple][data-appearance=green]:active{
-  color:var(--sys-green-text-main, #3d6035);
-}
-.alertButton[data-variant=simple][data-appearance=blue]{
-  color:var(--sys-blue-text-support, #4877b0);
-}
-.alertButton[data-variant=simple][data-appearance=blue]:hover, .alertButton[data-variant=simple][data-appearance=blue]:focus-visible{
-  color:var(--sys-blue-text-main, #2b537e);
-}
-.alertButton[data-variant=simple][data-appearance=blue]:active{
-  color:var(--sys-blue-text-main, #2b537e);
-}
-
-.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, 12px);
-  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, 12px);
-  height:var(--size-alert-top-button, 32px);
-  width:var(--size-alert-top-button, 32px);
-  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, #fdfbff);
-}
-.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);
-}