@snack-uikit/toaster 0.8.19 → 0.9.1-preview-3df2b4f3.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.9.0 (2025-03-14)
+
+
+### Features
+
+* **PDS-441:** toaster upload ([ed22769](https://github.com/cloud-ru-tech/snack-uikit/commit/ed2276990cb89314369a8f1fa9c808a17af04768))
+
+
+
+
+
 ## 0.8.19 (2025-03-13)
 
 ### 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,45 +31,81 @@ toaster.userAction.dismiss(userActionId);
 
 // dismiss systemEvent toast
 toaster.systemEvent.dismiss(systemEventId);
-```
 
+// create or update upload toast
+const uploadToastId = toaster.upload.startOrUpdate(options);
 
-## Props
-
-```typescript jsx
-type ToastUserActionLink = {
-  text: string;
-  href: string;
-  onClick?(e: MouseEvent<HTMLAnchorElement>): void;
-};
-
-type ToastUserActionProps = Partial<RtToastContentProps> &
-  WithSupportProps<{
-    label: string;
-    link?: ToastUserActionLink;
-    className?: string;
-    onClose(id?: string | number): void;
-  }>;
-
-type ToastSystemEventLink = {
-  text: string;
-  href: string;
-  onClick?(e: MouseEvent<HTMLAnchorElement>): void;
-};
-
-type ToastSystemEventProps = Partial<RtToastContentProps> &
-  WithSupportProps<{
-    title: string;
-    description?: string;
-    link?: ToastSystemEventLink;
-    progressBar?: boolean;
-    closable?: boolean;
-    className?: string;
-    onCloseClick?(e: MouseEvent<HTMLButtonElement>, close?: () => void): void;
-    onClose(id?: string | number): void;
-  }>;
+// dismiss upload toast
+toaster.upload.dismiss(uploadToastId);
 ```
 
+[//]: DOCUMENTATION_SECTION_START
+[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
+## dismissToast
+`` 
+
+Закрытие тостера
+## ToastSystemEvent
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| title* | `string` | - |  |
+| closeToast | `() => void` | - |  |
+| toastProps | `ToastProps` | - |  |
+| data | `unknown` | - |  |
+| description | `string` | - |  |
+| appearance | enum ToastSystemEventAppearance: `"neutral"`, `"error"`, `"errorCritical"`, `"warning"`, `"success"` | neutral |  |
+| link | `ToastSystemEventLink` | - |  |
+| progressBar | `boolean` | true |  |
+| closable | `boolean` | true |  |
+| className | `string` | - | CSS-класс |
+| onCloseClick | `(e: MouseEvent<HTMLButtonElement, MouseEvent>, close?: () => void) => void` | - |  |
+| action | `ButtonActionProps[]` | - |  |
+| loading | `never` | - |  |
+## ToastUserAction
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| label* | `string` | - |  |
+| closeToast | `() => void` | - |  |
+| toastProps | `ToastProps` | - |  |
+| data | `unknown` | - |  |
+| appearance | enum ToastUserActionAppearance: `"neutral"`, `"error"`, `"warning"`, `"success"` | neutral |  |
+| link | `ToastUserActionLink` | - |  |
+| className | `string` | - | CSS-класс |
+| loading | `boolean` | - |  |
+## ToasterContainer
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| position | enum ToastPosition: `"top-right"`, `"top-center"`, `"top-left"`, `"bottom-right"`, `"bottom-center"`, `"bottom-left"` | bottom-right |  |
+| limit | `number` | 5 |  |
+| containerId | `Id` | - |  |
+| displayCloseAllButton | `boolean` | - |  |
+| type | enum ToasterType: `"system-event"`, `"user-action"`, `"upload"` | system-event |  |
+## ToastUpload
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| generalActions* | `Omit<UploadActions, "onCancel">` | - | Экшены для управления загрузкой |
+| files* | `UploadItem[]` | - | Загружаемые элементы |
+| progress* | `{ current: number; total: number; }` | - | Общий прогресс загрузки |
+| description* | `string` | - | Описание статуса загрузки |
+| status* | enum ToastUploadStatus: `"error"`, `"loading"`, `"pause"`, `"uploaded"`, `"errorUploaded"` | - | Общий статус загрузки |
+| closeToast | `() => void` | - |  |
+| toastProps | `ToastProps` | - |  |
+| data | `unknown` | - |  |
+| title | `string` | - | Заголовок тостера |
+| onCloseClick | `(e: MouseEvent<HTMLButtonElement, MouseEvent>, close?: () => void) => void` | - | Закрыть тостер |
+| closable | `boolean` | - | Показывать кнопку закрытия тостера |
+| className | `string` | - | CSS-класс контейнера |
+| collapsed | `boolean` | - | Тостер свернут/развернут |
+| onCollapsed | `(collapsed: boolean) => void` | - | Развернуть/свернуть тостер |
+| cancelButton | `ButtonTextNeutralProps` | - | Отмена всей загрузки |
+
+
+[//]: DOCUMENTATION_SECTION_END
+
 ### TODO
 
 - Translations

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,59 @@
+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;
+    /**
+     * Общий прогресс загрузки
+     */
+    progress: {
+        current: number;
+        total: number;
+    };
+    /**
+     * Закрыть тостер
+     */
+    onCloseClick?(e: MouseEvent<HTMLButtonElement>, close?: () => void): void;
+    /**
+     * Показывать кнопку закрытия тостера
+     */
+    closable?: boolean;
+    /**
+     * CSS-класс контейнера
+     */
+    className?: string;
+    /**
+     * Загружаемые элементы
+     */
+    files: UploadItem[];
+    /**
+     * Тостер свернут/развернут
+     */
+    collapsed?: boolean;
+    /**
+     * Развернуть/свернуть тостер
+     */
+    onCollapsed?: (collapsed: boolean) => void;
+    /**
+     * Экшены для управления загрузкой
+     */
+    generalActions: Omit<UploadActions, 'onCancel'>;
+    /**
+     *  Отмена всей загрузки
+     */
+    cancelButton?: ButtonTextNeutralProps;
+}>;
+export declare function ToastUpload({ status, title, description, closeToast, onCloseClick, closable, className, files, collapsed, onCollapsed, generalActions, cancelButton, progress, ...rest }: ToastUploadProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,132 @@
+"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 uncontrollable_1 = require("uncontrollable");
+const icons_1 = require("@snack-uikit/icons");
+const locale_1 = require("@snack-uikit/locale");
+const progress_bar_1 = require("@snack-uikit/progress-bar");
+const scroll_1 = require("@snack-uikit/scroll");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const utils_1 = require("@snack-uikit/utils");
+const testIds_1 = require("../../testIds");
+const constants_1 = require("./constants");
+const ButtonIcon_1 = require("./helperComponents/ButtonIcon");
+const ButtonTextNeutral_1 = require("./helperComponents/ButtonTextNeutral");
+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,
+      closeToast,
+      onCloseClick,
+      closable,
+      className,
+      files,
+      collapsed,
+      onCollapsed,
+      generalActions,
+      cancelButton,
+      progress
+    } = _a,
+    rest = __rest(_a, ["status", "title", "description", "closeToast", "onCloseClick", "closable", "className", "files", "collapsed", "onCollapsed", "generalActions", "cancelButton", "progress"]);
+  const [isCollapsed, setIsCollapsed] = (0, uncontrollable_1.useUncontrolledProp)(collapsed, false, onCollapsed);
+  const {
+    t
+  } = (0, locale_1.useLocale)('ToastUpload');
+  const showingTitle = title || t(`title.${status}`);
+  const handleCloseClick = e => {
+    e.stopPropagation();
+    onCloseClick ? onCloseClick(e, closeToast) : closeToast === null || closeToast === void 0 ? void 0 : closeToast();
+  };
+  const handleCollapseClick = e => {
+    e.stopPropagation();
+    setIsCollapsed(!isCollapsed);
+  };
+  const progressPercent = Math.round(progress.current / progress.total * 100);
+  const isErrorUploaded = status === 'errorUploaded';
+  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": isCollapsed || undefined,
+    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: showingTitle
+        }), 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: !isCollapsed ? (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, {
+          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)(truncate_string_1.TruncateString, {
+              className: styles_module_scss_1.default.description,
+              "data-status": status,
+              text: description,
+              "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.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: `${progress.current}/${progress.total}`
+          }), (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)(isErrorUploaded ? 0 : progressPercent)
+          })]
+        }), isCollapsed && (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, {
+          progress: isErrorUploaded ? 100 : progressPercent,
+          size: 'xs',
+          appearance: constants_1.progressBarAppearanceByStatus[status],
+          "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.progressBar
+        })]
+      })]
+    }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, {
+      className: styles_module_scss_1.default.list,
+      size: 's',
+      "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.list,
+      barHideStrategy: 'never',
+      children: files.map(item => (0, jsx_runtime_1.jsx)(FileItem_1.FileItem, {
+        item: item
+      }, item.id || item.title))
+    })]
+  }));
+}

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,32 @@
+.buttonIcon{
+  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;
+  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: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/ButtonTextNeutral/ButtonTextNeutral.d.ts

@@ -0,0 +1,7 @@
+import { MouseEvent } from 'react';
+export type ButtonTextNeutralProps = {
+    label: string;
+    onClick(e: MouseEvent<HTMLButtonElement>): void;
+    critical?: boolean;
+};
+export declare function ButtonTextNeutral({ label, onClick, critical }: ButtonTextNeutralProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,28 @@
+"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.ButtonTextNeutral = ButtonTextNeutral;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ButtonTextNeutral(_ref) {
+  let {
+    label,
+    onClick,
+    critical
+  } = _ref;
+  return (0, jsx_runtime_1.jsx)("button", {
+    type: 'button',
+    className: styles_module_scss_1.default.buttonTextNeutral,
+    onClick: onClick,
+    "aria-label": 'action',
+    "data-critical": critical || undefined,
+    children: label
+  });
+}

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

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

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

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

@@ -0,0 +1,33 @@
+.buttonTextNeutral{
+  border-radius:var(--radius-toaster-toast-system-event-button, 8px);
+  height:var(--size-toaster-toast-system-event-button-neutral, 24px);
+  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);
+  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;
+}
+.buttonTextNeutral:hover{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.buttonTextNeutral:active{
+  color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
+}
+.buttonTextNeutral: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, );
+  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;