@equinor/cpl-error-snackbar-react 0.1.0 → 0.1.2

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, SetStateAction } from 'react';
 
 interface CopyToClipboardButtonProps {
     value: string;
@@ -147,4 +147,36 @@ declare function ErrorSnackbarListContainer({ disablePositionFixed, }: ErrorSnac
 
 declare function parseUnknownError(unknownError: unknown): Error;
 
-export { type AccessRequirement, CopyToClipboardButton, ERROR_SNACKBARS_FIXED_LIST_TESTID, type Error, ErrorSnackbar, ErrorSnackbarContext, ErrorSnackbarContextProvider, ErrorSnackbarFixedList, ErrorSnackbarListContainer, type ErrorSnackbarObject, type InnerError, parseUnknownError, useErrorSnackbarContext };
+type ToastType = 'info' | 'success' | 'warning' | 'danger';
+type ToastTimeout = number | 'persistent';
+interface Toast {
+    id: string;
+    type: ToastType;
+    title: string;
+    timeout: ToastTimeout;
+}
+
+interface BuildToasterOptions {
+    timeoutOverrides?: Partial<Record<ToastType, ToastTimeout>>;
+}
+declare function buildToaster(options?: BuildToasterOptions): {
+    useState: () => readonly [Toast[], (data: SetStateAction<Toast[]>) => void];
+    create: (toast: Omit<Toast, "id" | "timeout">) => `${string}-${string}-${string}-${string}-${string}`;
+    update: (id: string, toast: Partial<Omit<Toast, "id" | "timeout">>) => void;
+    delete: (id: string) => void;
+    deleteAll: () => void;
+};
+declare const DEFAULT_TIMEOUT_MS_BY_TYPE: {
+    readonly info: 3000;
+    readonly success: 3000;
+    readonly warning: 3000;
+    readonly danger: "persistent";
+};
+type Toaster = ReturnType<typeof buildToaster>;
+
+interface ToastContainerProps {
+    toaster: Toaster;
+}
+declare function ToastContainer({ toaster }: ToastContainerProps): react_jsx_runtime.JSX.Element;
+
+export { type AccessRequirement, type BuildToasterOptions, CopyToClipboardButton, DEFAULT_TIMEOUT_MS_BY_TYPE, ERROR_SNACKBARS_FIXED_LIST_TESTID, type Error, ErrorSnackbar, ErrorSnackbarContext, ErrorSnackbarContextProvider, ErrorSnackbarFixedList, ErrorSnackbarListContainer, type ErrorSnackbarObject, type InnerError, type Toast, ToastContainer, type ToastContainerProps, type ToastTimeout, type ToastType, type Toaster, buildToaster, parseUnknownError, useErrorSnackbarContext };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, SetStateAction } from 'react';
 
 interface CopyToClipboardButtonProps {
     value: string;
@@ -147,4 +147,36 @@ declare function ErrorSnackbarListContainer({ disablePositionFixed, }: ErrorSnac
 
 declare function parseUnknownError(unknownError: unknown): Error;
 
-export { type AccessRequirement, CopyToClipboardButton, ERROR_SNACKBARS_FIXED_LIST_TESTID, type Error, ErrorSnackbar, ErrorSnackbarContext, ErrorSnackbarContextProvider, ErrorSnackbarFixedList, ErrorSnackbarListContainer, type ErrorSnackbarObject, type InnerError, parseUnknownError, useErrorSnackbarContext };
+type ToastType = 'info' | 'success' | 'warning' | 'danger';
+type ToastTimeout = number | 'persistent';
+interface Toast {
+    id: string;
+    type: ToastType;
+    title: string;
+    timeout: ToastTimeout;
+}
+
+interface BuildToasterOptions {
+    timeoutOverrides?: Partial<Record<ToastType, ToastTimeout>>;
+}
+declare function buildToaster(options?: BuildToasterOptions): {
+    useState: () => readonly [Toast[], (data: SetStateAction<Toast[]>) => void];
+    create: (toast: Omit<Toast, "id" | "timeout">) => `${string}-${string}-${string}-${string}-${string}`;
+    update: (id: string, toast: Partial<Omit<Toast, "id" | "timeout">>) => void;
+    delete: (id: string) => void;
+    deleteAll: () => void;
+};
+declare const DEFAULT_TIMEOUT_MS_BY_TYPE: {
+    readonly info: 3000;
+    readonly success: 3000;
+    readonly warning: 3000;
+    readonly danger: "persistent";
+};
+type Toaster = ReturnType<typeof buildToaster>;
+
+interface ToastContainerProps {
+    toaster: Toaster;
+}
+declare function ToastContainer({ toaster }: ToastContainerProps): react_jsx_runtime.JSX.Element;
+
+export { type AccessRequirement, type BuildToasterOptions, CopyToClipboardButton, DEFAULT_TIMEOUT_MS_BY_TYPE, ERROR_SNACKBARS_FIXED_LIST_TESTID, type Error, ErrorSnackbar, ErrorSnackbarContext, ErrorSnackbarContextProvider, ErrorSnackbarFixedList, ErrorSnackbarListContainer, type ErrorSnackbarObject, type InnerError, type Toast, ToastContainer, type ToastContainerProps, type ToastTimeout, type ToastType, type Toaster, buildToaster, parseUnknownError, useErrorSnackbarContext };

package/dist/index.js

@@ -1,10 +1,27 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -51,12 +68,15 @@ var __async = (__this, __arguments, generator) => {
 var index_exports = {};
 __export(index_exports, {
   CopyToClipboardButton: () => CopyToClipboardButton,
+  DEFAULT_TIMEOUT_MS_BY_TYPE: () => DEFAULT_TIMEOUT_MS_BY_TYPE,
   ERROR_SNACKBARS_FIXED_LIST_TESTID: () => ERROR_SNACKBARS_FIXED_LIST_TESTID,
   ErrorSnackbar: () => ErrorSnackbar,
   ErrorSnackbarContext: () => ErrorSnackbarContext,
   ErrorSnackbarContextProvider: () => ErrorSnackbarContextProvider,
   ErrorSnackbarFixedList: () => ErrorSnackbarFixedList,
   ErrorSnackbarListContainer: () => ErrorSnackbarListContainer,
+  ToastContainer: () => ToastContainer,
+  buildToaster: () => buildToaster,
   parseUnknownError: () => parseUnknownError,
   useErrorSnackbarContext: () => useErrorSnackbarContext
 });
@@ -405,15 +425,281 @@ function getTypedPropertyIfExists(object, key, ...acceptedTypes) {
 function itemIsDefined(e) {
   return Boolean(e);
 }
+
+// src/toast/createToaster.ts
+var import_react3 = require("react");
+function buildToaster(options = {}) {
+  const { timeoutOverrides = {} } = options;
+  const KEY = "toasts";
+  const state = { [KEY]: [] };
+  const listeners = [];
+  function subscribe(callback) {
+    const index = listeners.push(callback);
+    function unsubscribe() {
+      listeners.splice(index, 1);
+    }
+    return { unsubscribe };
+  }
+  function setState(data) {
+    data = typeof data === "function" ? data(state[KEY]) : data;
+    state[KEY] = data;
+    listeners.forEach((callback) => callback(data));
+  }
+  function useState4() {
+    const [values, setValues] = (0, import_react3.useState)(state[KEY]);
+    (0, import_react3.useEffect)(() => {
+      const subscriber = subscribe((data) => {
+        setValues(data);
+      });
+      return () => {
+        subscriber.unsubscribe();
+      };
+    }, [setValues]);
+    return [values, setState];
+  }
+  return {
+    useState: useState4,
+    create: (toast) => {
+      const id = crypto.randomUUID();
+      setState((old) => {
+        var _a;
+        return [
+          __spreadProps(__spreadValues({
+            id
+          }, toast), {
+            timeout: (_a = timeoutOverrides[toast.type]) != null ? _a : DEFAULT_TIMEOUT_MS_BY_TYPE[toast.type]
+          }),
+          ...old
+        ];
+      });
+      return id;
+    },
+    update: (id, toast) => {
+      setState((old) => {
+        return old.map((item) => item.id === id ? __spreadValues(__spreadValues({}, item), toast) : item);
+      });
+    },
+    delete: (id) => {
+      setState((old) => old.filter((item) => item.id !== id));
+    },
+    deleteAll: () => {
+      setState([]);
+    }
+  };
+}
+var DEFAULT_TIMEOUT_MS_BY_TYPE = {
+  info: 3e3,
+  // 3 seconds
+  success: 3e3,
+  // 3 seconds
+  warning: 3e3,
+  // 3 seconds
+  danger: "persistent"
+};
+
+// src/toast/ToastContainerInner.tsx
+var import_styled_components5 = __toESM(require("styled-components"));
+
+// src/toast/ToastItem.tsx
+var import_eds_core_react3 = require("@equinor/eds-core-react");
+var import_eds_icons3 = require("@equinor/eds-icons");
+var import_eds_tokens2 = require("@equinor/eds-tokens");
+var import_react4 = require("react");
+var import_styled_components4 = __toESM(require("styled-components"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ToastItem({ toast, onDelete }) {
+  const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    if (isHovered || toast.timeout === "persistent") {
+      return;
+    }
+    const timeout = setTimeout(() => {
+      onDelete(toast.id);
+    }, toast.timeout);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isHovered, onDelete, toast.id, toast.timeout]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    StyledPaper,
+    {
+      elevation: "raised",
+      $toastType: toast.type,
+      onMouseOver: () => setIsHovered(true),
+      onMouseOut: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react3.Icon, { data: getIconByType(toast.type), color: "primary", size: 24, style: { marginRight: 8 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react3.Typography, { children: toast.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_eds_core_react3.Button,
+          {
+            variant: "ghost_icon",
+            onClick: () => onDelete(toast.id),
+            style: { marginLeft: "auto" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react3.Icon, { data: import_eds_icons3.clear, title: "clear", color: "primary", size: 24 })
+          }
+        )
+      ]
+    }
+  );
+}
+function getIconByType(toastType) {
+  switch (toastType) {
+    case "success":
+      return import_eds_icons3.check;
+    case "danger":
+      return import_eds_icons3.error_filled;
+    case "warning":
+      return import_eds_icons3.warning_filled;
+    default:
+      return import_eds_icons3.info_circle;
+  }
+}
+var fill = false;
+var StyledPaper = (0, import_styled_components4.default)(import_eds_core_react3.Paper)`
+  & > p {
+    color: inherit;
+  }
+
+  border: 0;
+
+  transition: 50ms ease-out;
+
+  border-radius: 4px;
+
+  padding: 4px 8px 4px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+
+  border: 2px solid var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+
+  @keyframes toast-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(20%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes toast-out-collapse {
+    from {
+      height: auto;
+    }
+    to {
+      max-height: 0;
+    }
+  }
+
+  animation: toast-in-right 150ms ease-out;
+
+  ${({ $toastType }) => {
+  switch ($toastType) {
+    case "info":
+      return fill ? import_styled_components4.css`
+              background-color: ${import_eds_tokens2.tokens.colors.ui.background__default.rgba};
+            ` : import_styled_components4.css``;
+    case "success":
+      return fill ? import_styled_components4.css`
+              color: ${import_eds_tokens2.tokens.colors.text.static_icons__primary_white.rgba};
+              border-color: ${import_eds_tokens2.tokens.colors.interactive.success__resting.rgba};
+              background-color: ${import_eds_tokens2.tokens.colors.interactive.success__resting.rgba};
+            ` : import_styled_components4.css`
+              border-color: ${import_eds_tokens2.tokens.colors.interactive.success__resting.rgba};
+
+              & > svg:first-of-type {
+                fill: ${import_eds_tokens2.tokens.colors.interactive.success__text.rgba};
+              }
+            `;
+    case "warning":
+      return fill ? import_styled_components4.css`
+              border-color: ${import_eds_tokens2.tokens.colors.interactive.warning__resting.rgba};
+              background-color: ${import_eds_tokens2.tokens.colors.interactive.warning__resting.rgba};
+            ` : import_styled_components4.css`
+              border-color: ${import_eds_tokens2.tokens.colors.interactive.warning__resting.rgba};
+
+              & > svg:first-of-type {
+                fill: ${import_eds_tokens2.tokens.colors.interactive.warning__text.rgba};
+              }
+            `;
+    case "danger":
+      return fill ? import_styled_components4.css`
+              border-color: ${import_eds_tokens2.tokens.colors.interactive.danger__resting.rgba};
+              background-color: ${import_eds_tokens2.tokens.colors.interactive.danger__resting.rgba};
+            ` : import_styled_components4.css`
+              border-color: ${import_eds_tokens2.tokens.colors.interactive.danger__resting.rgba};
+              & > svg:first-of-type {
+                fill: ${import_eds_tokens2.tokens.colors.interactive.danger__text.rgba};
+              }
+            `;
+  }
+}};
+`;
+
+// src/toast/ToastContainerInner.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ToastContainerInner({
+  deleteToastById,
+  toasts,
+  placement = "top-right",
+  toastContainerClassName = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Container, { $placement: placement, className: toastContainerClassName, children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastItem, { toast, onDelete: deleteToastById }, toast.id)) });
+}
+var Container = import_styled_components5.default.div`
+  position: fixed;
+
+  padding: 16px;
+  margin: -16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  max-height: min(600px, 70dvh);
+  width: 24rem;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* Hide when no toasts */
+  &:empty {
+    display: none;
+  }
+
+  ${({ $placement }) => {
+  switch ($placement) {
+    case "top-right": {
+      return import_styled_components5.css`
+          top: 16px;
+          right: 16px;
+        `;
+    }
+  }
+}}
+`;
+
+// src/toast/ToastContainer.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ToastContainer({ toaster }) {
+  const [toasts] = toaster.useState();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToastContainerInner, { toasts, deleteToastById: toaster.delete });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CopyToClipboardButton,
+  DEFAULT_TIMEOUT_MS_BY_TYPE,
   ERROR_SNACKBARS_FIXED_LIST_TESTID,
   ErrorSnackbar,
   ErrorSnackbarContext,
   ErrorSnackbarContextProvider,
   ErrorSnackbarFixedList,
   ErrorSnackbarListContainer,
+  ToastContainer,
+  buildToaster,
   parseUnknownError,
   useErrorSnackbarContext
 });

package/dist/index.mjs

@@ -1,3 +1,22 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -362,14 +381,280 @@ function getTypedPropertyIfExists(object, key, ...acceptedTypes) {
 function itemIsDefined(e) {
   return Boolean(e);
 }
+
+// src/toast/createToaster.ts
+import { useEffect as useEffect2, useState as useReactState } from "react";
+function buildToaster(options = {}) {
+  const { timeoutOverrides = {} } = options;
+  const KEY = "toasts";
+  const state = { [KEY]: [] };
+  const listeners = [];
+  function subscribe(callback) {
+    const index = listeners.push(callback);
+    function unsubscribe() {
+      listeners.splice(index, 1);
+    }
+    return { unsubscribe };
+  }
+  function setState(data) {
+    data = typeof data === "function" ? data(state[KEY]) : data;
+    state[KEY] = data;
+    listeners.forEach((callback) => callback(data));
+  }
+  function useState4() {
+    const [values, setValues] = useReactState(state[KEY]);
+    useEffect2(() => {
+      const subscriber = subscribe((data) => {
+        setValues(data);
+      });
+      return () => {
+        subscriber.unsubscribe();
+      };
+    }, [setValues]);
+    return [values, setState];
+  }
+  return {
+    useState: useState4,
+    create: (toast) => {
+      const id = crypto.randomUUID();
+      setState((old) => {
+        var _a;
+        return [
+          __spreadProps(__spreadValues({
+            id
+          }, toast), {
+            timeout: (_a = timeoutOverrides[toast.type]) != null ? _a : DEFAULT_TIMEOUT_MS_BY_TYPE[toast.type]
+          }),
+          ...old
+        ];
+      });
+      return id;
+    },
+    update: (id, toast) => {
+      setState((old) => {
+        return old.map((item) => item.id === id ? __spreadValues(__spreadValues({}, item), toast) : item);
+      });
+    },
+    delete: (id) => {
+      setState((old) => old.filter((item) => item.id !== id));
+    },
+    deleteAll: () => {
+      setState([]);
+    }
+  };
+}
+var DEFAULT_TIMEOUT_MS_BY_TYPE = {
+  info: 3e3,
+  // 3 seconds
+  success: 3e3,
+  // 3 seconds
+  warning: 3e3,
+  // 3 seconds
+  danger: "persistent"
+};
+
+// src/toast/ToastContainerInner.tsx
+import styled5, { css as css2 } from "styled-components";
+
+// src/toast/ToastItem.tsx
+import { Button as Button3, Icon as Icon3, Paper, Typography as Typography2 } from "@equinor/eds-core-react";
+import { check as check2, clear, error_filled as error_filled2, info_circle, warning_filled } from "@equinor/eds-icons";
+import { tokens as tokens2 } from "@equinor/eds-tokens";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import styled4, { css } from "styled-components";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function ToastItem({ toast, onDelete }) {
+  const [isHovered, setIsHovered] = useState3(false);
+  useEffect3(() => {
+    if (isHovered || toast.timeout === "persistent") {
+      return;
+    }
+    const timeout = setTimeout(() => {
+      onDelete(toast.id);
+    }, toast.timeout);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isHovered, onDelete, toast.id, toast.timeout]);
+  return /* @__PURE__ */ jsxs3(
+    StyledPaper,
+    {
+      elevation: "raised",
+      $toastType: toast.type,
+      onMouseOver: () => setIsHovered(true),
+      onMouseOut: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsx6(Icon3, { data: getIconByType(toast.type), color: "primary", size: 24, style: { marginRight: 8 } }),
+        /* @__PURE__ */ jsx6(Typography2, { children: toast.title }),
+        /* @__PURE__ */ jsx6(
+          Button3,
+          {
+            variant: "ghost_icon",
+            onClick: () => onDelete(toast.id),
+            style: { marginLeft: "auto" },
+            children: /* @__PURE__ */ jsx6(Icon3, { data: clear, title: "clear", color: "primary", size: 24 })
+          }
+        )
+      ]
+    }
+  );
+}
+function getIconByType(toastType) {
+  switch (toastType) {
+    case "success":
+      return check2;
+    case "danger":
+      return error_filled2;
+    case "warning":
+      return warning_filled;
+    default:
+      return info_circle;
+  }
+}
+var fill = false;
+var StyledPaper = styled4(Paper)`
+  & > p {
+    color: inherit;
+  }
+
+  border: 0;
+
+  transition: 50ms ease-out;
+
+  border-radius: 4px;
+
+  padding: 4px 8px 4px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+
+  border: 2px solid var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+
+  @keyframes toast-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(20%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes toast-out-collapse {
+    from {
+      height: auto;
+    }
+    to {
+      max-height: 0;
+    }
+  }
+
+  animation: toast-in-right 150ms ease-out;
+
+  ${({ $toastType }) => {
+  switch ($toastType) {
+    case "info":
+      return fill ? css`
+              background-color: ${tokens2.colors.ui.background__default.rgba};
+            ` : css``;
+    case "success":
+      return fill ? css`
+              color: ${tokens2.colors.text.static_icons__primary_white.rgba};
+              border-color: ${tokens2.colors.interactive.success__resting.rgba};
+              background-color: ${tokens2.colors.interactive.success__resting.rgba};
+            ` : css`
+              border-color: ${tokens2.colors.interactive.success__resting.rgba};
+
+              & > svg:first-of-type {
+                fill: ${tokens2.colors.interactive.success__text.rgba};
+              }
+            `;
+    case "warning":
+      return fill ? css`
+              border-color: ${tokens2.colors.interactive.warning__resting.rgba};
+              background-color: ${tokens2.colors.interactive.warning__resting.rgba};
+            ` : css`
+              border-color: ${tokens2.colors.interactive.warning__resting.rgba};
+
+              & > svg:first-of-type {
+                fill: ${tokens2.colors.interactive.warning__text.rgba};
+              }
+            `;
+    case "danger":
+      return fill ? css`
+              border-color: ${tokens2.colors.interactive.danger__resting.rgba};
+              background-color: ${tokens2.colors.interactive.danger__resting.rgba};
+            ` : css`
+              border-color: ${tokens2.colors.interactive.danger__resting.rgba};
+              & > svg:first-of-type {
+                fill: ${tokens2.colors.interactive.danger__text.rgba};
+              }
+            `;
+  }
+}};
+`;
+
+// src/toast/ToastContainerInner.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ToastContainerInner({
+  deleteToastById,
+  toasts,
+  placement = "top-right",
+  toastContainerClassName = ""
+}) {
+  return /* @__PURE__ */ jsx7(Container, { $placement: placement, className: toastContainerClassName, children: toasts.map((toast) => /* @__PURE__ */ jsx7(ToastItem, { toast, onDelete: deleteToastById }, toast.id)) });
+}
+var Container = styled5.div`
+  position: fixed;
+
+  padding: 16px;
+  margin: -16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  max-height: min(600px, 70dvh);
+  width: 24rem;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* Hide when no toasts */
+  &:empty {
+    display: none;
+  }
+
+  ${({ $placement }) => {
+  switch ($placement) {
+    case "top-right": {
+      return css2`
+          top: 16px;
+          right: 16px;
+        `;
+    }
+  }
+}}
+`;
+
+// src/toast/ToastContainer.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function ToastContainer({ toaster }) {
+  const [toasts] = toaster.useState();
+  return /* @__PURE__ */ jsx8(ToastContainerInner, { toasts, deleteToastById: toaster.delete });
+}
 export {
   CopyToClipboardButton,
+  DEFAULT_TIMEOUT_MS_BY_TYPE,
   ERROR_SNACKBARS_FIXED_LIST_TESTID,
   ErrorSnackbar,
   ErrorSnackbarContext,
   ErrorSnackbarContextProvider,
   ErrorSnackbarFixedList,
   ErrorSnackbarListContainer,
+  ToastContainer,
+  buildToaster,
   parseUnknownError,
   useErrorSnackbarContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/cpl-error-snackbar-react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -14,8 +14,7 @@
   },
   "devDependencies": {
     "@equinor/eds-core-react": "^0.42.5",
-    "@storybook/react": "^8.6.14",
-    "@storybook/test": "^8.6.14",
+    "@storybook/react": "^9.0.12",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@types/styled-components": "^5.1.34",