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

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.8.16 (2025-03-04)
+
+### Only dependencies have been changed
+* [@snack-uikit/icons@0.25.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/link@0.15.12](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/link/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.6.12](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
 ## 0.8.15 (2025-03-04)
 
 ### Only dependencies have been changed

package/README.md

@@ -1,6 +1,7 @@
 # Toaster
 
 ## Installation
+
 `npm i @snack-uikit/toaster`
 
 [Changelog](./CHANGELOG.md)
@@ -21,8 +22,8 @@ toaster.userAction.update.error(userActionId, { label: 'new text' });
 
 // update systemEvent toast
 toaster.systemEvent.update.error(systemEventId, {
-    title: 'new text',
-    description: 'new description',
+  title: 'new text',
+  description: 'new description',
 });
 
 // dismiss userAction toast
@@ -30,8 +31,13 @@ toaster.userAction.dismiss(userActionId);
 
 // dismiss systemEvent toast
 toaster.systemEvent.dismiss(systemEventId);
-```
 
+// create or update upload toast
+const uploadToastId = toaster.upload.startOrUpdate(options);
+
+// dismiss upload toast
+toaster.upload.dismiss(uploadToastId);
+```
 
 ## Props
 

package/dist/cjs/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/cjs/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/cjs/components/ToastUpload/ToastUpload.js

@@ -0,0 +1,122 @@
+"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.ToastUpload = ToastUpload;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const icons_1 = require("@snack-uikit/icons");
+const progress_bar_1 = require("@snack-uikit/progress-bar");
+const utils_1 = require("@snack-uikit/utils");
+const ButtonTextNeutral_1 = require("../../helperComponents/ButtonTextNeutral");
+const testIds_1 = require("../../testIds");
+const constants_1 = require("./constants");
+const ButtonIcon_1 = require("./helperComponents/ButtonIcon");
+const FileItem_1 = require("./helperComponents/FileItem");
+const LoadingStatus_1 = require("./helperComponents/LoadingStatus");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+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 (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.container, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    "data-collapsed": collapsed,
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.titleLine,
+      children: [(0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.titleLineBody,
+        children: [(0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_1.default.title,
+          "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.title,
+          children: title
+        }), cancelButton && (0, jsx_runtime_1.jsx)(ButtonTextNeutral_1.ButtonTextNeutral, Object.assign({}, cancelButton)), (0, jsx_runtime_1.jsx)(ButtonIcon_1.ButtonIcon, {
+          onClick: handleCollapseClick,
+          "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.collapseButton,
+          children: collapsed ? (0, jsx_runtime_1.jsx)(icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.ChevronDownSVG, {})
+        }), closable && (0, jsx_runtime_1.jsx)(ButtonIcon_1.ButtonIcon, {
+          type: 'button',
+          className: styles_module_scss_1.default.buttonAction,
+          onClick: handleCloseClick,
+          "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.close,
+          children: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {})
+        })]
+      }), (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.generalProgress,
+        children: [(0, jsx_runtime_1.jsxs)("div", {
+          className: styles_module_scss_1.default.statusLine,
+          children: [(0, jsx_runtime_1.jsxs)("div", {
+            className: styles_module_scss_1.default.statusWrap,
+            children: [(0, jsx_runtime_1.jsx)(LoadingStatus_1.LoadingStatus, {
+              status: status,
+              actions: generalActions
+            }), (0, jsx_runtime_1.jsx)("span", {
+              className: styles_module_scss_1.default.description,
+              "data-status": status,
+              "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.description,
+              children: description
+            })]
+          }), (0, jsx_runtime_1.jsx)("span", {
+            className: styles_module_scss_1.default.totalCounter,
+            "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.counter,
+            children: totalProgressCounter
+          }), (0, jsx_runtime_1.jsx)("span", {
+            className: styles_module_scss_1.default.totalPercentage,
+            "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.progress,
+            children: (0, utils_2.formatPercent)(totalProgressPercentage)
+          })]
+        }), !collapsed && (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, {
+          progress: totalProgressPercentage,
+          size: 'xs',
+          appearance: constants_1.progressBarAppearanceByStatus[status],
+          "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.progressBar
+        })]
+      })]
+    }), (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.list,
+      "data-collapsed": collapsed,
+      "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.list,
+      children: items.map(item => (0, jsx_runtime_1.jsx)(FileItem_1.FileItem, {
+        item: item
+      }, item.id))
+    })]
+  }));
+}

package/dist/cjs/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/cjs/components/ToastUpload/ToastUploadToaster.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToastUploadForToaster = ToastUploadForToaster;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ToastUpload_1 = require("./ToastUpload");
+function ToastUploadForToaster(props) {
+  const [collapsed, setCollapsed] = (0, react_1.useState)(true);
+  return (0, jsx_runtime_1.jsx)(ToastUpload_1.ToastUpload, Object.assign({}, props, {
+    collapsed: collapsed,
+    onCollapsed: setCollapsed
+  }));
+}

package/dist/cjs/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/cjs/components/ToastUpload/constants.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.progressBarAppearanceByStatus = exports.TOAST_UPLOAD_ITEM_STATUS = exports.TOAST_UPLOAD_STATUS = void 0;
+exports.TOAST_UPLOAD_STATUS = {
+  Loading: 'loading',
+  Pause: 'pause',
+  Error: 'error',
+  Uploaded: 'uploaded',
+  ErrorUploaded: 'errorUploaded'
+};
+exports.TOAST_UPLOAD_ITEM_STATUS = {
+  Loading: 'loading',
+  Pause: 'pause',
+  Error: 'error',
+  Uploaded: 'uploaded'
+};
+exports.progressBarAppearanceByStatus = {
+  pause: 'neutral',
+  loading: 'green',
+  uploaded: 'green',
+  errorUploaded: 'red',
+  error: 'red'
+};

package/dist/cjs/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/cjs/components/ToastUpload/helperComponents/ButtonIcon/ButtonIcon.js

@@ -0,0 +1,32 @@
+"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.ButtonIcon = ButtonIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ButtonIcon(_a) {
+  var {
+      className
+    } = _a,
+    props = __rest(_a, ["className"]);
+  return (0, jsx_runtime_1.jsx)("button", Object.assign({
+    type: 'button',
+    className: (0, classnames_1.default)(styles_module_scss_1.default.buttonIcon, className)
+  }, props));
+}

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

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

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

package/dist/cjs/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/cjs/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/cjs/components/ToastUpload/helperComponents/FileItem/FileItem.js

@@ -0,0 +1,85 @@
+"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 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;
+  (0, react_1.useEffect)(() => {
+    if (initItem.subscribeToState) {
+      return initItem.subscribeToState(newValue => setItem(prev => Object.assign(Object.assign({}, prev), newValue)));
+    }
+    return setItem(initItem);
+  }, [initItem]);
+  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)("span", {
+        className: styles_module_scss_1.default.fileTitle,
+        children: item.title
+      }), 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: 'm',
+        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
+      }), !showLink && (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: 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
+        }), (0, jsx_runtime_1.jsx)("span", {
+          className: styles_module_scss_1.default.fileStatusDescription,
+          "data-status": item.status,
+          children: item.statusLabel
+        })]
+      }), (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.fileSize,
+        "data-status": item.status,
+        children: item.size
+      }), (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.fileStatusPercentage,
+        "data-status": item.status,
+        children: (0, utils_1.formatPercent)(item.progress)
+      })]
+    })]
+  }, item.id);
+}

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,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/cjs/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;