@snack-uikit/toaster 0.8.13 → 0.8.14-preview-b5e187d5.0

package/dist/esm/components/ToastUpload/components/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/components/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/components/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 { ButtonAction } from '../ButtonAction';
+import styles from './styles.module.css';
+export function LoadingStatus({ status, actions }) {
+    if (status === 'loading') {
+        return (_jsx(ButtonAction, { onClick: actions.onPause, children: _jsx(PauseSVG, {}) }));
+    }
+    if (status === 'pause') {
+        return (_jsx(ButtonAction, { onClick: actions.onContinue, children: _jsx(PlaySVG, {}) }));
+    }
+    if (status === 'uploaded') {
+        return _jsx(CheckFilledSVG, { className: styles.successIcon });
+    }
+    return (_jsx(ButtonAction, { onClick: actions.onRetry, children: _jsx(UpdateSVG, {}) }));
+}

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

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

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

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

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

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

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/index.d.ts

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

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

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

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

@@ -0,0 +1,103 @@
+.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) - 2 * var(--space-toaster-toast-system-event-container-padding, 16px));
+  max-width:100%;
+  max-height:386px;
+  padding:var(--space-toaster-toast-system-event-container-padding, 16px) 0;
+  background-color:var(--sys-invert-neutral-background, #30303c);
+}
+
+.titleLine{
+  display:flex;
+  flex-direction:column;
+  padding:0 var(--space-toaster-toast-system-event-container-padding, 16px);
+}
+
+.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);
+  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:scroll;
+  display:flex;
+  flex-direction:column;
+  max-height:280px;
+  padding:0 var(--space-toaster-toast-system-event-container-padding, 16px);
+}

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

@@ -0,0 +1,31 @@
+import { MouseEvent } from 'react';
+import { ProgressBarProps } from '@snack-uikit/progress-bar';
+import { ValueOf } from '@snack-uikit/utils';
+import { TOAST_UPLOAD_ITEM_STATUS, TOAST_UPLOAD_STATUS } from './constants';
+export type ToastUploadStatus = ValueOf<typeof TOAST_UPLOAD_STATUS>;
+export type ToastUploadItemStatus = ValueOf<typeof TOAST_UPLOAD_ITEM_STATUS>;
+export type ToastUploadStateSubscription<T> = (subscription: (newValue: T) => void) => () => void;
+export type WithStateSubscription<T> = {
+    subscribeToState?: ToastUploadStateSubscription<Partial<T>>;
+} & T;
+export type ToastUploadItemLink = {
+    text: string;
+    href: string;
+    onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+};
+export type UploadActions = {
+    onCancel?: () => void;
+    onPause?: () => void;
+    onRetry?: () => void;
+    onContinue?: () => void;
+};
+export type UploadItem = WithStateSubscription<{
+    id: string;
+    title: string;
+    status: ToastUploadItemStatus;
+    statusLabel: string;
+    progress: ProgressBarProps['progress'];
+    size: string;
+    actions: UploadActions;
+    link?: ToastUploadItemLink;
+}>;

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1 @@
+export const formatPercent = (value) => `${value}%`;

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

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

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

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

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

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

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

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

package/dist/esm/components/index.js

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

package/dist/esm/constants.d.ts

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

package/dist/esm/constants.js

@@ -1,6 +1,7 @@
 export const TOASTER_TYPE = {
     SystemEvent: 'system-event',
     UserAction: 'user-action',
+    Upload: 'upload',
 };
 export const TOASTER_CONTAINER_DEFAULT_PROPS = {
     [TOASTER_TYPE.SystemEvent]: {
@@ -15,10 +16,17 @@ export const TOASTER_CONTAINER_DEFAULT_PROPS = {
         displayCloseAllButton: false,
         type: TOASTER_TYPE.UserAction,
     },
+    [TOASTER_TYPE.Upload]: {
+        limit: 5,
+        position: 'bottom-right',
+        displayCloseAllButton: true,
+        type: TOASTER_TYPE.SystemEvent,
+    },
 };
 export const AUTO_CLOSE_TIME = {
     [TOASTER_TYPE.SystemEvent]: 5000,
     [TOASTER_TYPE.UserAction]: 2000,
+    [TOASTER_TYPE.Upload]: false,
 };
 export const TOASTER_ROOT_ID = 'toaster-root';
 export const TOASTER_CONTAINER_PREFIX = 'toaster-container__';

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

@@ -1,8 +1,8 @@
 .buttonAction{
   border-radius:var(--radius-toaster-toast-system-event-button, 8px);
   height:var(--size-toaster-toast-system-event-button, 32px);
-  padding-left:var(--space-toaster-system-event-padding, 8px);
-  padding-right:var(--space-toaster-system-event-padding, 8px);
+  padding-left:var(--space-toaster-toast-system-event-padding, 8px);
+  padding-right:var(--space-toaster-toast-system-event-padding, 8px);
   font-family:var(--sans-body-m-font-family, SB Sans Interface);
   font-weight:var(--sans-body-m-font-weight, Regular);
   line-height:var(--sans-body-m-line-height, 20px);

package/dist/esm/helpers.js

@@ -1,9 +1,21 @@
+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";
 // eslint-disable-next-line react/no-deprecated
 import { render } from 'react-dom';
 import { toast } from 'react-toastify';
 import { isBrowser } from '@snack-uikit/utils';
 import { ToasterContainer, ToastSystemEvent, ToastUserAction, } from './components';
+import { ToastUploadForToaster } from './components/ToastUpload/ToastUploadToaster';
 import { AUTO_CLOSE_TIME, TOASTER_CONTAINER_DEFAULT_PROPS, TOASTER_CONTAINER_PREFIX, TOASTER_ROOT_ID, TOASTER_TYPE, } from './constants';
 function getToasterContainer({ type, toasterParent, containerProps, }) {
     const containerId = (containerProps === null || containerProps === void 0 ? void 0 : containerProps.containerId) || `${TOASTER_CONTAINER_PREFIX}${type}`;
@@ -37,6 +49,8 @@ function getToastComponent({ type, toasterProps, }) {
             return _jsx(ToastUserAction, Object.assign({}, toasterProps));
         case TOASTER_TYPE.SystemEvent:
             return _jsx(ToastSystemEvent, Object.assign({}, toasterProps));
+        case TOASTER_TYPE.Upload:
+            return _jsx(ToastUploadForToaster, Object.assign({}, toasterProps));
         default:
             return undefined;
     }
@@ -233,7 +247,31 @@ const systemEvent = {
         return toast.dismiss(id);
     },
 };
+const upload = {
+    startOrUpdate(_a) {
+        var { id } = _a, options = __rest(_a, ["id"]);
+        const toastId = id || TOASTER_TYPE.Upload;
+        if (toast.isActive(toastId)) {
+            return updateToast(toastId, {
+                type: TOASTER_TYPE.SystemEvent,
+                toasterProps: Object.assign({}, options),
+            });
+        }
+        return openToast({
+            type: TOASTER_TYPE.Upload,
+            toasterProps: Object.assign(Object.assign({}, options), { loading: true }),
+            toastOptions: {
+                id: toastId,
+                onClose: options.onClose,
+            },
+        });
+    },
+    dismiss(id) {
+        return toast.dismiss(id);
+    },
+};
 export const toaster = {
     userAction,
     systemEvent,
+    upload,
 };

package/dist/esm/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/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toaster",
-  "version": "0.8.13",
+  "version": "0.8.14-preview-b5e187d5.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,13 +36,14 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.24.2",
-    "@snack-uikit/link": "0.15.9",
+    "@snack-uikit/icons": "0.24.3-preview-b5e187d5.0",
+    "@snack-uikit/link": "0.15.10-preview-b5e187d5.0",
     "@snack-uikit/loaders": "0.9.1",
-    "@snack-uikit/truncate-string": "0.6.9",
+    "@snack-uikit/progress-bar": "0.1.3",
+    "@snack-uikit/truncate-string": "0.6.10-preview-b5e187d5.0",
     "@snack-uikit/utils": "3.7.0",
     "classnames": "2.5.1",
     "react-toastify": "10.0.5"
   },
-  "gitHead": "44591f943a79171320e8db3523ec38953ff101d8"
+  "gitHead": "d381a21a923d774fb3c32ece1fcc68cfa35b06a4"
 }

package/src/components/ToastSystemEvent/styles.module.scss

@@ -33,7 +33,7 @@
 
 .buttonClose {
   @include styles-theme-variables.composite-var(
-    styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-close
+    styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-neutral
   );
 
   cursor: pointer;
@@ -159,7 +159,7 @@
   box-sizing: border-box;
   width: calc(
     styles-tokens-toaster-toasterSystemEvent.$size-toaster-toast-system-event-container -
-      (2 * styles-tokens-toaster-toasterSystemEvent.$space-toaster-system-event-padding)
+      (2 * styles-tokens-toaster-toasterSystemEvent.$space-toaster-toast-system-event-padding)
   );
   max-width: 100%;