@snack-uikit/toaster 0.8.19-preview-27ae78ba.0 → 0.8.19

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

@@ -1,32 +0,0 @@
-"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

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

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

@@ -1,25 +0,0 @@
-"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

@@ -1,32 +0,0 @@
-.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

@@ -1,7 +0,0 @@
-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

@@ -1,28 +0,0 @@
-"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

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

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

@@ -1,25 +0,0 @@
-"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

@@ -1,33 +0,0 @@
-.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

@@ -1,5 +0,0 @@
-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

@@ -1,90 +0,0 @@
-"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: 'dfkkdfma;slkdfmna;lksdmf;laksmdf;lkams'
-        })]
-      }), (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

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

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

@@ -1,25 +0,0 @@
-"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

@@ -1,87 +0,0 @@
-.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

@@ -1,7 +0,0 @@
-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

@@ -1,43 +0,0 @@
-"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

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

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

@@ -1,25 +0,0 @@
-"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

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

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

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

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

@@ -1,25 +0,0 @@
-"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

@@ -1,111 +0,0 @@
-.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;
-}