@snack-uikit/toaster 0.8.19 → 0.9.0

package/dist/cjs/components/ToastUpload/helperComponents/FileItem/FileItem.js

@@ -0,0 +1,90 @@
+"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.FileItem = FileItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@snack-uikit/icons");
+const link_1 = require("@snack-uikit/link");
+const progress_bar_1 = require("@snack-uikit/progress-bar");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const testIds_1 = require("../../../../testIds");
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const ButtonIcon_1 = require("../ButtonIcon");
+const LoadingStatus_1 = require("../LoadingStatus");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function FileItem(_ref) {
+  let {
+    item: initItem
+  } = _ref;
+  var _a, _b, _c;
+  const [item, setItem] = (0, react_1.useState)(initItem);
+  const showLink = item.status === 'uploaded' && item.link;
+  const showCancelButton = !showLink;
+  (0, react_1.useEffect)(() => {
+    if (initItem.subscribeToState) {
+      initItem.subscribeToState(newValue => setItem(prev => Object.assign(Object.assign({}, prev), newValue)));
+    }
+    return setItem(initItem);
+  }, [initItem]);
+  const isError = item.status === 'error';
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: styles_module_scss_1.default.fileLine,
+    "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.uploadItem,
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.fileHeadLine,
+      children: [(0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+        text: item.title,
+        className: styles_module_scss_1.default.fileTitle,
+        maxLines: 1
+      }), showLink && (0, jsx_runtime_1.jsx)(link_1.Link, {
+        text: (_a = item.link) === null || _a === void 0 ? void 0 : _a.text,
+        href: (_b = item.link) === null || _b === void 0 ? void 0 : _b.href,
+        size: 's',
+        truncateVariant: 'end',
+        onClick: (_c = item.link) === null || _c === void 0 ? void 0 : _c.onClick,
+        appearance: 'invert-neutral',
+        textMode: 'accent',
+        "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.uploadItemLink
+      }), showCancelButton && (0, jsx_runtime_1.jsx)(ButtonIcon_1.ButtonIcon, {
+        onClick: item.actions.onCancel,
+        "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.uploadItemCancel,
+        children: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {})
+      })]
+    }), (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, {
+      progress: isError ? 100 : item.progress,
+      size: 'xs',
+      appearance: constants_1.progressBarAppearanceByStatus[item.status]
+    }), (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.fileStatusLine,
+      children: [(0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.fileStatusWrap,
+        children: [(0, jsx_runtime_1.jsx)(LoadingStatus_1.LoadingStatus, {
+          status: item.status,
+          actions: item.actions,
+          isFileItem: true
+        }), (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+          className: styles_module_scss_1.default.fileStatusDescription,
+          "data-status": item.status,
+          text: item.statusLabel
+        })]
+      }), (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.fileSize,
+        "data-status": item.status,
+        children: item.formattedSize
+      }), (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.fileStatusPercentage,
+        "data-status": item.status,
+        children: (0, utils_1.formatPercent)(isError ? 0 : item.progress)
+      })]
+    })]
+  });
+}

package/dist/cjs/components/ToastUpload/helperComponents/FileItem/index.d.ts

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

package/dist/cjs/components/ToastUpload/helperComponents/FileItem/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("./FileItem"), exports);

package/dist/cjs/components/ToastUpload/helperComponents/FileItem/styles.module.css

@@ -0,0 +1,87 @@
+.fileLine{
+  padding-top:var(--space-toaster-toast-upload-file-line-vertical-padding, 4px);
+  padding-bottom:var(--space-toaster-toast-upload-file-line-vertical-padding, 4px);
+  display:flex;
+  flex-direction:column;
+}
+
+.fileHeadLine{
+  gap:var(--space-toaster-toast-upload-headline-gap, 16px);
+  min-height:var(--size-toaster-toast-upload-file-line-headline-height, 24px);
+  display:flex;
+  align-items:center;
+}
+
+.fileTitle{
+  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);
+  flex-grow:1;
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+
+.fileStatusLine{
+  gap:var(--space-toaster-toast-upload-status-line-gap, 8px);
+  display:flex;
+  align-items:center;
+}
+
+.fileStatusWrap{
+  gap:var(--space-toaster-toast-upload-status-wrap-gap, 4px);
+  overflow:hidden;
+  display:flex;
+  flex-grow:1;
+  align-items:center;
+}
+
+.fileStatusDescription{
+  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);
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.fileStatusDescription[data-status=loading]{
+  color:var(--sys-invert-neutral-text-disabled, #656774);
+}
+.fileStatusDescription[data-status=uploaded]{
+  color:var(--sys-invert-neutral-text-disabled, #656774);
+}
+
+.fileSize{
+  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);
+  color:var(--sys-invert-neutral-text-disabled, #656774);
+  text-wrap:nowrap;
+}
+.fileSize[data-status=loading]{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.fileSize[data-status=uploaded]{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+
+.fileStatusPercentage{
+  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);
+  color:var(--sys-invert-neutral-text-disabled, #656774);
+}
+.fileStatusPercentage[data-status=loading]{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.fileStatusPercentage[data-status=uploaded]{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}

package/dist/cjs/components/ToastUpload/helperComponents/LoadingStatus/LoadingStatus.d.ts

@@ -0,0 +1,7 @@
+import { ToastUploadStatus, UploadActions } from '../../types';
+export type LoadingStatusProps = {
+    status: ToastUploadStatus;
+    actions: UploadActions;
+    isFileItem?: boolean;
+};
+export declare function LoadingStatus({ status, actions, isFileItem }: LoadingStatusProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ToastUpload/helperComponents/LoadingStatus/LoadingStatus.js

@@ -0,0 +1,43 @@
+"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.LoadingStatus = LoadingStatus;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@snack-uikit/icons");
+const ButtonIcon_1 = require("../ButtonIcon");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function LoadingStatus(_ref) {
+  let {
+    status,
+    actions,
+    isFileItem
+  } = _ref;
+  if (status === 'loading' || status === 'error' && !isFileItem) {
+    return (0, jsx_runtime_1.jsx)(ButtonIcon_1.ButtonIcon, {
+      onClick: actions.onPause,
+      children: (0, jsx_runtime_1.jsx)(icons_1.PauseSVG, {})
+    });
+  }
+  if (status === 'pause') {
+    return (0, jsx_runtime_1.jsx)(ButtonIcon_1.ButtonIcon, {
+      onClick: actions.onContinue,
+      children: (0, jsx_runtime_1.jsx)(icons_1.PlaySVG, {})
+    });
+  }
+  if (status === 'uploaded') {
+    return (0, jsx_runtime_1.jsx)(icons_1.CheckFilledSVG, {
+      className: styles_module_scss_1.default.successIcon
+    });
+  }
+  return (0, jsx_runtime_1.jsx)(ButtonIcon_1.ButtonIcon, {
+    onClick: actions.onRetry,
+    children: (0, jsx_runtime_1.jsx)(icons_1.UpdateSVG, {})
+  });
+}

package/dist/cjs/components/ToastUpload/helperComponents/LoadingStatus/index.d.ts

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

package/dist/cjs/components/ToastUpload/helperComponents/LoadingStatus/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("./LoadingStatus"), exports);

package/dist/cjs/components/ToastUpload/helperComponents/LoadingStatus/styles.module.css

@@ -0,0 +1,3 @@
+.successIcon{
+  color:var(--sys-green-accent-default, #57b762);
+}

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

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

package/dist/cjs/components/ToastUpload/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("./ToastUpload"), exports);

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

@@ -0,0 +1,111 @@
+.container{
+  padding:var(--space-toaster-toast-system-event-container-padding, 16px);
+  border-radius:var(--radius-toaster-toast-system-event-container, 16px);
+  gap:var(--space-toaster-toast-system-event-container-gap, 16px);
+  cursor:default;
+  position:relative;
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  width:calc(var(--size-toaster-toast-system-event-container, 320px) - var(--space-toaster-toast-system-event-container-padding, 16px));
+  max-width:100%;
+  max-height:386px;
+  background-color:var(--sys-invert-neutral-background, #30303c);
+}
+.container[data-collapsed]{
+  gap:0;
+}
+
+.titleLine{
+  display:flex;
+  flex-direction:column;
+}
+
+.titleLineBody{
+  gap:var(--space-toaster-toast-upload-body-gap, 16px);
+  display:flex;
+  align-items:center;
+}
+
+.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);
+  flex-grow:1;
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+
+.generalProgress{
+  gap:var(--space-toaster-toast-upload-general-progress-gap, 4px);
+  display:flex;
+  flex-direction:column;
+  align-self:stretch;
+}
+
+.statusLine{
+  gap:var(--space-toaster-toast-upload-status-line-gap, 8px);
+  display:flex;
+  align-items:center;
+}
+
+.statusWrap{
+  gap:var(--space-toaster-toast-upload-status-wrap-gap, 4px);
+  overflow:hidden;
+  display:flex;
+  flex-grow:1;
+  align-items:center;
+}
+
+.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-invert-neutral-text-main, #e6e8ef);
+}
+.description[data-status=loading]{
+  color:var(--sys-invert-neutral-text-light, #8b8e9b);
+}
+.description[data-status=uploaded]{
+  color:var(--sys-invert-neutral-text-light, #8b8e9b);
+}
+
+.totalCounter{
+  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-invert-neutral-text-support, #bec2cf);
+}
+
+.totalPercentage{
+  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-invert-neutral-text-support, #bec2cf);
+}
+
+.list{
+  overflow-x:hidden;
+  display:flex;
+  flex-direction:column;
+  box-sizing:content-box;
+  max-height:288px;
+  margin-top:0;
+  padding-right:calc(var(--space-toaster-toast-system-event-container-padding, 16px) - var(--dimension-050m, 4px));
+  transition:all 0.1s;
+}
+[data-collapsed] .list{
+  max-height:0;
+}

package/dist/cjs/components/ToastUpload/types.d.ts

@@ -0,0 +1,55 @@
+import { LinkProps } from '@snack-uikit/link';
+import { ProgressBarProps } from '@snack-uikit/progress-bar';
+import { ValueOf } from '@snack-uikit/utils';
+import { TOAST_UPLOAD_ITEM_STATUS, TOAST_UPLOAD_STATUS } from './constants';
+export type ToastUploadStatus = ValueOf<typeof TOAST_UPLOAD_STATUS>;
+export type ToastUploadItemStatus = ValueOf<typeof TOAST_UPLOAD_ITEM_STATUS>;
+export type ToastUploadStateSubscription<T> = (subscription: (newValue: T) => void) => () => void;
+export type WithStateSubscription<T> = {
+    /**Позволяет подписываться на изменения процесса загрузки файла внутри конпонента,
+     * тем самым обновляет элементы не зависимо от всего списка
+     * (можно использовать для улучшения производительности из-за частых обновлений)
+     */
+    subscribeToState?: ToastUploadStateSubscription<Partial<T>>;
+} & T;
+export type ToastUploadItemLink = Pick<LinkProps, 'target' | 'href' | 'onClick' | 'text'>;
+export type UploadActions = {
+    onCancel?: () => void;
+    onPause?: () => void;
+    onRetry?: () => void;
+    onContinue?: () => void;
+};
+export type UploadItem = WithStateSubscription<{
+    /**
+     * Уникальный id элемента
+     */
+    id?: string;
+    /**
+     * Название элемента
+     */
+    title: string;
+    /**
+     * Статус загрузки
+     */
+    status: ToastUploadItemStatus;
+    /**
+     * Описание статуса загрузки
+     */
+    statusLabel: string;
+    /**
+     * Процент прогресса
+     */
+    progress: ProgressBarProps['progress'];
+    /**
+     * Отображаемый размер файла
+     */
+    formattedSize: string;
+    /**
+     * Экшены для управления загрузкой
+     */
+    actions: UploadActions;
+    /**
+     * Ссылка на файл
+     */
+    link?: ToastUploadItemLink;
+}>;

package/dist/cjs/components/ToastUpload/types.js

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

package/dist/cjs/components/ToastUpload/utils/formatPercent.d.ts

@@ -0,0 +1 @@
+export declare const formatPercent: (value: number) => string;

package/dist/cjs/components/ToastUpload/utils/formatPercent.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatPercent = void 0;
+const formatPercent = value => `${value}%`;
+exports.formatPercent = formatPercent;

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

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

package/dist/cjs/components/ToastUpload/utils/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("./formatPercent"), exports);

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

@@ -1,6 +1,6 @@
 .buttonCloseColumnWrapper{
-  gap:var(--space-toaster-system-event-gap, 8px);
-  padding:var(--space-toaster-system-event-padding, 8px);
+  gap:var(--space-toaster-toast-system-event-gap, 8px);
+  padding:var(--space-toaster-toast-system-event-padding, 8px);
   width:var(--size-toaster-toast-system-event-container, 320px);
   position:fixed;
   box-sizing:border-box;
@@ -56,7 +56,7 @@
 }
 
 .containerWithCloseAllButton{
-  margin-bottom:calc(var(--size-toaster-button-close-column, 40px) + var(--space-toaster-system-event-gap, 8px));
+  margin-bottom:calc(var(--size-toaster-button-close-column, 40px) + var(--space-toaster-toast-system-event-gap, 8px));
 }
 
 @media only screen and (max-width: 480px){
@@ -95,8 +95,8 @@
   max-width:100%;
 }
 :global .osThemeSnack.Toastify__toast-container .container-user-action{
-  padding-bottom:var(--space-toaster-user-action-padding-bottom, 8px);
-  gap:var(--space-toaster-user-action-gap, 8px);
+  padding-bottom:var(--space-toaster-toast-user-action-padding-bottom, 8px);
+  gap:var(--space-toaster-toast-user-action-gap, 8px);
   display:flex;
   flex-direction:column;
   align-items:center;
@@ -138,16 +138,16 @@
   animation-name:osSnackTheme__toast__bounceOutDown;
 }
 :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__system-event{
-  gap:var(--space-toaster-system-event-gap, 8px);
-  padding:var(--space-toaster-system-event-padding, 8px);
+  gap:var(--space-toaster-toast-system-event-gap, 8px);
+  padding:var(--space-toaster-toast-system-event-padding, 8px);
   width:var(--size-toaster-toast-system-event-container, 320px);
   display:flex;
   flex-direction:column;
   max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 16px));
 }
 :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__user-action{
-  padding-bottom:var(--space-toaster-user-action-padding-bottom, 8px);
-  gap:var(--space-toaster-user-action-gap, 8px);
+  padding-bottom:var(--space-toaster-toast-user-action-padding-bottom, 8px);
+  gap:var(--space-toaster-toast-user-action-gap, 8px);
   display:flex;
   flex-direction:column;
   align-items:center;

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

@@ -1,3 +1,4 @@
 export * from './ToastSystemEvent';
 export * from './ToastUserAction';
 export * from './ToasterContainer';
+export * from './ToastUpload';

package/dist/cjs/components/index.js

@@ -24,4 +24,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 __exportStar(require("./ToastSystemEvent"), exports);
 __exportStar(require("./ToastUserAction"), exports);
-__exportStar(require("./ToasterContainer"), exports);
+__exportStar(require("./ToasterContainer"), exports);
+__exportStar(require("./ToastUpload"), exports);

package/dist/cjs/constants.d.ts

@@ -3,11 +3,9 @@ import { ToasterType } from './types';
 export declare const TOASTER_TYPE: {
     readonly SystemEvent: "system-event";
     readonly UserAction: "user-action";
+    readonly Upload: "upload";
 };
 export declare const TOASTER_CONTAINER_DEFAULT_PROPS: Record<ToasterType, ToasterContainerProps>;
-export declare const AUTO_CLOSE_TIME: {
-    "system-event": number;
-    "user-action": number;
-};
+export declare const AUTO_CLOSE_TIME: Record<ToasterType, number | false>;
 export declare const TOASTER_ROOT_ID = "toaster-root";
 export declare const TOASTER_CONTAINER_PREFIX = "toaster-container__";

package/dist/cjs/constants.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.TOASTER_CONTAINER_PREFIX = exports.TOASTER_ROOT_ID = exports.AUTO_CLOSE_TIME = exports.TOASTER_CONTAINER_DEFAULT_PROPS = exports.TOASTER_TYPE = void 0;
 exports.TOASTER_TYPE = {
   SystemEvent: 'system-event',
-  UserAction: 'user-action'
+  UserAction: 'user-action',
+  Upload: 'upload'
 };
 exports.TOASTER_CONTAINER_DEFAULT_PROPS = {
   [exports.TOASTER_TYPE.SystemEvent]: {
@@ -20,11 +21,18 @@ exports.TOASTER_CONTAINER_DEFAULT_PROPS = {
     position: 'bottom-center',
     displayCloseAllButton: false,
     type: exports.TOASTER_TYPE.UserAction
+  },
+  [exports.TOASTER_TYPE.Upload]: {
+    limit: 5,
+    position: 'bottom-right',
+    displayCloseAllButton: true,
+    type: exports.TOASTER_TYPE.SystemEvent
   }
 };
 exports.AUTO_CLOSE_TIME = {
   [exports.TOASTER_TYPE.SystemEvent]: 5000,
-  [exports.TOASTER_TYPE.UserAction]: 2000
+  [exports.TOASTER_TYPE.UserAction]: 2000,
+  [exports.TOASTER_TYPE.Upload]: false
 };
 exports.TOASTER_ROOT_ID = 'toaster-root';
 exports.TOASTER_CONTAINER_PREFIX = 'toaster-container__';

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

@@ -1,8 +1,8 @@
 .buttonAction{
   border-radius:var(--radius-toaster-toast-system-event-button, 8px);
   height:var(--size-toaster-toast-system-event-button, 32px);
-  padding-left:var(--space-toaster-system-event-padding, 8px);
-  padding-right:var(--space-toaster-system-event-padding, 8px);
+  padding-left:var(--space-toaster-toast-system-event-padding, 8px);
+  padding-right:var(--space-toaster-toast-system-event-padding, 8px);
   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);

package/dist/cjs/helpers.d.ts

@@ -2,6 +2,10 @@ import { Id } from 'react-toastify';
 import { OpenToast, Toaster, UpdateToast } from './types';
 export declare const openToast: OpenToast;
 export declare const updateToast: UpdateToast;
+/**
+ * Закрытие тостера
+ * @function
+ */
 export declare const dismissToast: (params?: Id) => void;
 export declare const isToastActive: typeof import("react-toastify/dist/core/store").isToastActive;
 export declare const toaster: Toaster;