@snack-uikit/toaster 0.8.15 → 0.8.17-preview-bc9ca5dd.0

package/dist/cjs/helpers.js

@@ -1,5 +1,13 @@
 "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;
+};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,6 +18,7 @@ const react_dom_1 = require("react-dom");
 const react_toastify_1 = require("react-toastify");
 const utils_1 = require("@snack-uikit/utils");
 const components_1 = require("./components");
+const ToastUploadToaster_1 = require("./components/ToastUpload/ToastUploadToaster");
 const constants_1 = require("./constants");
 function getToasterContainer(_ref) {
   let {
@@ -60,6 +69,8 @@ function getToastComponent(_ref3) {
       return (0, jsx_runtime_1.jsx)(components_1.ToastUserAction, Object.assign({}, toasterProps));
     case constants_1.TOASTER_TYPE.SystemEvent:
       return (0, jsx_runtime_1.jsx)(components_1.ToastSystemEvent, Object.assign({}, toasterProps));
+    case constants_1.TOASTER_TYPE.Upload:
+      return (0, jsx_runtime_1.jsx)(ToastUploadToaster_1.ToastUploadForToaster, Object.assign({}, toasterProps));
     default:
       return undefined;
   }
@@ -318,7 +329,38 @@ const systemEvent = {
     return react_toastify_1.toast.dismiss(id);
   }
 };
+const upload = {
+  startOrUpdate(_a) {
+    var {
+        id
+      } = _a,
+      options = __rest(_a, ["id"]);
+    const toastId = id || constants_1.TOASTER_TYPE.Upload;
+    if (react_toastify_1.toast.isActive(toastId)) {
+      return (0, exports.updateToast)(toastId, {
+        type: constants_1.TOASTER_TYPE.Upload,
+        toasterProps: Object.assign(Object.assign({}, options), {
+          loading: true
+        })
+      });
+    }
+    return (0, exports.openToast)({
+      type: constants_1.TOASTER_TYPE.Upload,
+      toasterProps: Object.assign(Object.assign({}, options), {
+        loading: true
+      }),
+      toastOptions: {
+        id: toastId,
+        onClose: options.onClose
+      }
+    });
+  },
+  dismiss(id) {
+    return react_toastify_1.toast.dismiss(id);
+  }
+};
 exports.toaster = {
   userAction,
-  systemEvent
+  systemEvent,
+  upload
 };

package/dist/cjs/index.d.ts

@@ -1,4 +1,4 @@
 export { toaster, openToast, updateToast, dismissToast } from './helpers';
-export type { ToastSystemEventProps, ToastUserActionProps, ToasterContainerProps } from './components';
-export type { Toaster, UpdateToast, OpenToast, UserActionOptions, SystemEventOptions, ToasterId, ToastOptions, } from './types';
+export type { ToastSystemEventProps, ToastUserActionProps, ToasterContainerProps, ToastUploadProps, } from './components';
+export type { Toaster, UpdateToast, OpenToast, UserActionOptions, SystemEventOptions, ToasterId, ToastOptions, UploadOptions, } from './types';
 export { TOASTER_TYPE } from './constants';

package/dist/cjs/testIds.d.ts

@@ -16,3 +16,17 @@ export declare const TOAST_USER_ACTION_TEST_IDS: {
     loader: string;
     link: string;
 };
+export declare const TOAST_UPLOAD_TEST_IDS: {
+    main: string;
+    close: string;
+    title: string;
+    description: string;
+    counter: string;
+    progress: string;
+    list: string;
+    collapseButton: string;
+    progressBar: string;
+    uploadItem: string;
+    uploadItemLink: string;
+    uploadItemCancel: string;
+};

package/dist/cjs/testIds.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOAST_USER_ACTION_TEST_IDS = exports.TOAST_SYSTEM_EVENT_TEST_IDS = void 0;
+exports.TOAST_UPLOAD_TEST_IDS = exports.TOAST_USER_ACTION_TEST_IDS = exports.TOAST_SYSTEM_EVENT_TEST_IDS = void 0;
 const TOAST_SYSTEM_EVENT_TEST_ID = 'toast-system-event';
 exports.TOAST_SYSTEM_EVENT_TEST_IDS = {
   icon: `${TOAST_SYSTEM_EVENT_TEST_ID}__icon`,
@@ -23,4 +23,19 @@ exports.TOAST_USER_ACTION_TEST_IDS = {
   icon: `${TOAST_USER_ACTION_TEST_ID}__icon`,
   loader: `${TOAST_USER_ACTION_TEST_ID}__loader`,
   link: `${TOAST_USER_ACTION_TEST_ID}__link`
+};
+const TOAST_UPLOAD_TEST_ID = 'toast-upload';
+exports.TOAST_UPLOAD_TEST_IDS = {
+  main: TOAST_UPLOAD_TEST_ID,
+  close: `${TOAST_UPLOAD_TEST_ID}__close`,
+  title: `${TOAST_UPLOAD_TEST_ID}__title`,
+  description: `${TOAST_UPLOAD_TEST_ID}__description`,
+  counter: `${TOAST_UPLOAD_TEST_ID}__counter`,
+  progress: `${TOAST_UPLOAD_TEST_ID}__progress`,
+  list: `${TOAST_UPLOAD_TEST_ID}__list`,
+  collapseButton: `${TOAST_UPLOAD_TEST_ID}__collapseButton`,
+  progressBar: `${TOAST_UPLOAD_TEST_ID}__progressBar`,
+  uploadItem: `${TOAST_UPLOAD_TEST_ID}__uploadItem`,
+  uploadItemLink: `${TOAST_UPLOAD_TEST_ID}__uploadItemLink`,
+  uploadItemCancel: `${TOAST_UPLOAD_TEST_ID}__uploadItemCancel`
 };

package/dist/cjs/types.d.ts

@@ -1,6 +1,6 @@
 import { Id, ToastOptions as RtToastOptions } from 'react-toastify';
 import { ValueOf } from '@snack-uikit/utils';
-import { ToasterContainerProps, ToastSystemEventProps, ToastUserActionProps } from './components';
+import { ToasterContainerProps, ToastSystemEventProps, ToastUploadProps, ToastUserActionProps } from './components';
 import { TOASTER_TYPE } from './constants';
 export type ToasterId = Id;
 export type PromisedId = Promise<ToasterId>;
@@ -13,6 +13,9 @@ export type ToasterType = ValueOf<typeof TOASTER_TYPE>;
 export type ToasterPropsMap = {
     [TOASTER_TYPE.UserAction]: ToastUserActionProps;
     [TOASTER_TYPE.SystemEvent]: ToastSystemEventProps;
+    [TOASTER_TYPE.Upload]: ToastUploadProps & {
+        loading: boolean;
+    };
 };
 type OpenNotificationProps<T extends keyof ToasterPropsMap> = {
     type: T;
@@ -33,6 +36,7 @@ export type UpdateToast = <T extends keyof ToasterPropsMap>(id: string | number,
 }) => void;
 export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
 export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
+export type UploadOptions = ToastUploadProps & Pick<ToastOptions, 'id' | 'onClose'>;
 export type Toaster = {
     userAction: {
         success(options: UserActionOptions): PromisedId;
@@ -62,5 +66,9 @@ export type Toaster = {
         };
         dismiss(id?: ToasterId): void;
     };
+    upload: {
+        startOrUpdate(options: UploadOptions): void;
+        dismiss(id?: ToasterId): void;
+    };
 };
 export {};

package/dist/esm/components/ToastSystemEvent/styles.module.css

@@ -4,9 +4,8 @@
 }
 
 .buttonClose{
-  width:var(--size-toaster-toast-system-event-button-close, 24px);
-  height:var(--size-toaster-toast-system-event-button-close, 24px);
   border-radius:var(--radius-toaster-toast-system-event-button, 8px);
+  height:var(--size-toaster-toast-system-event-button-neutral, 24px);
   cursor:pointer;
   display:flex;
   align-items:center;
@@ -108,7 +107,7 @@
   display:flex;
   flex-direction:column;
   box-sizing:border-box;
-  width:calc(var(--size-toaster-toast-system-event-container, 320px) - 2 * var(--space-toaster-system-event-padding, 8px));
+  width:calc(var(--size-toaster-toast-system-event-container, 320px) - 2 * var(--space-toaster-toast-system-event-padding, 8px));
   max-width:100%;
 }
 .container:hover .progress{

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

@@ -0,0 +1,60 @@
+import { MouseEvent } from 'react';
+import { ToastContentProps as RtToastContentProps } from 'react-toastify';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { ButtonTextNeutralProps } from '../../helperComponents/ButtonTextNeutral';
+import { ToastUploadStatus, UploadActions, UploadItem } from './types';
+export type ToastUploadProps = Partial<RtToastContentProps> & WithSupportProps<{
+    /**
+     * Общий статус загрузки
+     */
+    status: ToastUploadStatus;
+    /**
+     * Заголовок тостера
+     */
+    title: string;
+    /**
+     * Описание статуса загрузки
+     */
+    description: string;
+    /**
+     * Каунтер общего прогресса
+     */
+    totalProgressCounter: string;
+    /**
+     * Процент прогресса
+     */
+    totalProgressPercentage: number;
+    /**
+     * Закрыть тостер
+     */
+    onCloseClick?(e: MouseEvent<HTMLButtonElement>, close?: () => void): void;
+    /**
+     * Показывать кнопку закрытия тостера
+     */
+    closable?: boolean;
+    /**
+     * CSS-класс контейнера
+     */
+    className?: string;
+    /**
+     * Загружаемые элементы
+     */
+    items: UploadItem[];
+    /**
+     * Тостер свернут/развернут
+     */
+    collapsed: boolean;
+    /**
+     * Развернуть/свернуть тостер
+     */
+    onCollapsed: (collapsed: boolean) => void;
+    /**
+     * Экшены для управления загрузкой
+     */
+    generalActions: UploadActions;
+    /**
+     *  Отмена всей загрузки
+     */
+    cancelButton?: ButtonTextNeutralProps;
+}>;
+export declare function ToastUpload({ status, title, description, totalProgressCounter, totalProgressPercentage, closeToast, onCloseClick, closable, className, items, collapsed, onCollapsed, generalActions, cancelButton, ...rest }: ToastUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ToastUpload/ToastUpload.js

@@ -0,0 +1,36 @@
+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 { ChevronDownSVG, ChevronUpSVG, CrossSVG } from '@snack-uikit/icons';
+import { ProgressBar } from '@snack-uikit/progress-bar';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { ButtonTextNeutral } from '../../helperComponents/ButtonTextNeutral';
+import { TOAST_UPLOAD_TEST_IDS } from '../../testIds';
+import { progressBarAppearanceByStatus } from './constants';
+import { ButtonIcon } from './helperComponents/ButtonIcon';
+import { FileItem } from './helperComponents/FileItem';
+import { LoadingStatus } from './helperComponents/LoadingStatus';
+import styles from './styles.module.css';
+import { formatPercent } from './utils';
+export function ToastUpload(_a) {
+    var { status, title, description, totalProgressCounter, totalProgressPercentage, closeToast, onCloseClick, closable, className, items, collapsed, onCollapsed, generalActions, cancelButton } = _a, rest = __rest(_a, ["status", "title", "description", "totalProgressCounter", "totalProgressPercentage", "closeToast", "onCloseClick", "closable", "className", "items", "collapsed", "onCollapsed", "generalActions", "cancelButton"]);
+    const handleCloseClick = (e) => {
+        e.stopPropagation();
+        onCloseClick ? onCloseClick(e, closeToast) : closeToast === null || closeToast === void 0 ? void 0 : closeToast();
+    };
+    const handleCollapseClick = (e) => {
+        e.stopPropagation();
+        onCollapsed(!collapsed);
+    };
+    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-collapsed": collapsed, children: [_jsxs("div", { className: styles.titleLine, children: [_jsxs("div", { className: styles.titleLineBody, children: [_jsx("div", { className: styles.title, "data-test-id": TOAST_UPLOAD_TEST_IDS.title, children: title }), cancelButton && _jsx(ButtonTextNeutral, Object.assign({}, cancelButton)), _jsx(ButtonIcon, { onClick: handleCollapseClick, "data-test-id": TOAST_UPLOAD_TEST_IDS.collapseButton, children: collapsed ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}) }), closable && (_jsx(ButtonIcon, { type: 'button', className: styles.buttonAction, onClick: handleCloseClick, "data-test-id": TOAST_UPLOAD_TEST_IDS.close, children: _jsx(CrossSVG, {}) }))] }), _jsxs("div", { className: styles.generalProgress, children: [_jsxs("div", { className: styles.statusLine, children: [_jsxs("div", { className: styles.statusWrap, children: [_jsx(LoadingStatus, { status: status, actions: generalActions }), _jsx("span", { className: styles.description, "data-status": status, "data-test-id": TOAST_UPLOAD_TEST_IDS.description, children: description })] }), _jsx("span", { className: styles.totalCounter, "data-test-id": TOAST_UPLOAD_TEST_IDS.counter, children: totalProgressCounter }), _jsx("span", { className: styles.totalPercentage, "data-test-id": TOAST_UPLOAD_TEST_IDS.progress, children: formatPercent(totalProgressPercentage) })] }), !collapsed && (_jsx(ProgressBar, { progress: totalProgressPercentage, size: 'xs', appearance: progressBarAppearanceByStatus[status], "data-test-id": TOAST_UPLOAD_TEST_IDS.progressBar }))] })] }), _jsx("div", { className: styles.list, "data-collapsed": collapsed, "data-test-id": TOAST_UPLOAD_TEST_IDS.list, children: items.map(item => (_jsx(FileItem, { item: item }, item.id))) })] })));
+}

package/dist/esm/components/ToastUpload/ToastUploadToaster.d.ts

@@ -0,0 +1,3 @@
+import { ToastUploadProps } from './ToastUpload';
+export type ToastUploadToasterProps = Omit<ToastUploadProps, 'collapsed' | 'onCollapsed'>;
+export declare function ToastUploadForToaster(props: ToastUploadToasterProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ToastUpload/ToastUploadToaster.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ToastUpload } from './ToastUpload';
+export function ToastUploadForToaster(props) {
+    const [collapsed, setCollapsed] = useState(true);
+    return _jsx(ToastUpload, Object.assign({}, props, { collapsed: collapsed, onCollapsed: setCollapsed }));
+}

package/dist/esm/components/ToastUpload/constants.d.ts

@@ -0,0 +1,16 @@
+import { ProgressBarProps } from '@snack-uikit/progress-bar';
+import { ToastUploadStatus } from './types';
+export declare const TOAST_UPLOAD_STATUS: {
+    readonly Loading: "loading";
+    readonly Pause: "pause";
+    readonly Error: "error";
+    readonly Uploaded: "uploaded";
+    readonly ErrorUploaded: "errorUploaded";
+};
+export declare const TOAST_UPLOAD_ITEM_STATUS: {
+    readonly Loading: "loading";
+    readonly Pause: "pause";
+    readonly Error: "error";
+    readonly Uploaded: "uploaded";
+};
+export declare const progressBarAppearanceByStatus: Record<ToastUploadStatus, ProgressBarProps['appearance']>;

package/dist/esm/components/ToastUpload/constants.js

@@ -0,0 +1,20 @@
+export const TOAST_UPLOAD_STATUS = {
+    Loading: 'loading',
+    Pause: 'pause',
+    Error: 'error',
+    Uploaded: 'uploaded',
+    ErrorUploaded: 'errorUploaded',
+};
+export const TOAST_UPLOAD_ITEM_STATUS = {
+    Loading: 'loading',
+    Pause: 'pause',
+    Error: 'error',
+    Uploaded: 'uploaded',
+};
+export const progressBarAppearanceByStatus = {
+    pause: 'neutral',
+    loading: 'green',
+    uploaded: 'green',
+    errorUploaded: 'red',
+    error: 'red',
+};

package/dist/esm/components/ToastUpload/helperComponents/ButtonIcon/ButtonIcon.d.ts

@@ -0,0 +1,3 @@
+import { ButtonHTMLAttributes } from 'react';
+export type ButtonIconProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export declare function ButtonIcon({ className, ...props }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ToastUpload/helperComponents/ButtonIcon/ButtonIcon.js

@@ -0,0 +1,18 @@
+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 } from "react/jsx-runtime";
+import cn from 'classnames';
+import styles from './styles.module.css';
+export function ButtonIcon(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx("button", Object.assign({ type: 'button', className: cn(styles.buttonIcon, className) }, props));
+}

package/dist/esm/components/ToastUpload/helperComponents/ButtonIcon/index.d.ts

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

package/dist/esm/components/ToastUpload/helperComponents/ButtonIcon/index.js

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

package/dist/esm/components/ToastUpload/helperComponents/ButtonIcon/styles.module.css

@@ -0,0 +1,30 @@
+.buttonIcon{
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  color:var(--sys-invert-neutral-text-light, #8b8e9b);
+  background-color:transparent;
+  border:none;
+}
+.buttonIcon svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.buttonIcon:hover{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.buttonIcon:focus, .buttonIcon:active{
+  color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
+}
+.buttonIcon: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-invert-neutral-text-main, #e6e8ef);
+  outline-color:var(--sys-available-on-complementary, #ffffff);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}

package/dist/esm/components/ToastUpload/helperComponents/FileItem/FileItem.d.ts

@@ -0,0 +1,5 @@
+import { UploadItem } from '../../types';
+export type FileItemProps = {
+    item: UploadItem;
+};
+export declare function FileItem({ item: initItem }: FileItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { CrossSVG } from '@snack-uikit/icons';
+import { Link } from '@snack-uikit/link';
+import { ProgressBar } from '@snack-uikit/progress-bar';
+import { TOAST_UPLOAD_TEST_IDS } from '../../../../testIds';
+import { progressBarAppearanceByStatus } from '../../constants';
+import { formatPercent } from '../../utils';
+import { ButtonIcon } from '../ButtonIcon';
+import { LoadingStatus } from '../LoadingStatus';
+import styles from './styles.module.css';
+export function FileItem({ item: initItem }) {
+    var _a, _b, _c;
+    const [item, setItem] = useState(initItem);
+    const showLink = item.status === 'uploaded' && item.link;
+    useEffect(() => {
+        if (initItem.subscribeToState) {
+            return initItem.subscribeToState(newValue => setItem(prev => (Object.assign(Object.assign({}, prev), newValue))));
+        }
+        return setItem(initItem);
+    }, [initItem]);
+    return (_jsxs("div", { className: styles.fileLine, "data-test-id": TOAST_UPLOAD_TEST_IDS.uploadItem, children: [_jsxs("div", { className: styles.fileHeadLine, children: [_jsx("span", { className: styles.fileTitle, children: item.title }), showLink && (_jsx(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: 'm', truncateVariant: 'end', onClick: (_c = item.link) === null || _c === void 0 ? void 0 : _c.onClick, appearance: 'invert-neutral', textMode: 'accent', "data-test-id": TOAST_UPLOAD_TEST_IDS.uploadItemLink })), !showLink && (_jsx(ButtonIcon, { onClick: item.actions.onCancel, "data-test-id": TOAST_UPLOAD_TEST_IDS.uploadItemCancel, children: _jsx(CrossSVG, {}) }))] }), _jsx(ProgressBar, { progress: item.progress, size: 'xs', appearance: progressBarAppearanceByStatus[item.status] }), _jsxs("div", { className: styles.fileStatusLine, children: [_jsxs("div", { className: styles.fileStatusWrap, children: [_jsx(LoadingStatus, { status: item.status, actions: item.actions }), _jsx("span", { className: styles.fileStatusDescription, "data-status": item.status, children: item.statusLabel })] }), _jsx("span", { className: styles.fileSize, "data-status": item.status, children: item.size }), _jsx("span", { className: styles.fileStatusPercentage, "data-status": item.status, children: formatPercent(item.progress) })] })] }, item.id));
+}

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

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

package/dist/esm/components/ToastUpload/helperComponents/FileItem/index.js

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

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

@@ -0,0 +1,85 @@
+.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);
+  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);
+}
+.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/esm/components/ToastUpload/helperComponents/LoadingStatus/LoadingStatus.d.ts

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

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckFilledSVG, PauseSVG, PlaySVG, UpdateSVG } from '@snack-uikit/icons';
+import { ButtonIcon } from '../ButtonIcon';
+import styles from './styles.module.css';
+export function LoadingStatus({ status, actions }) {
+    if (status === 'loading') {
+        return (_jsx(ButtonIcon, { onClick: actions.onPause, children: _jsx(PauseSVG, {}) }));
+    }
+    if (status === 'pause') {
+        return (_jsx(ButtonIcon, { onClick: actions.onContinue, children: _jsx(PlaySVG, {}) }));
+    }
+    if (status === 'uploaded') {
+        return _jsx(CheckFilledSVG, { className: styles.successIcon });
+    }
+    return (_jsx(ButtonIcon, { onClick: actions.onRetry, children: _jsx(UpdateSVG, {}) }));
+}

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

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

package/dist/esm/components/ToastUpload/helperComponents/LoadingStatus/index.js

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

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

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

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

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

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

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