prometeo-design-system 4.2.5 → 4.3.0

package/dist/SelectSearch.es.js

@@ -16,7 +16,7 @@ function re(e) {
     isOpen: F,
     inputRef: p,
     name: I
-  } = e || {}, M = C ? C.filter((n) => n != null) : [], [V, g] = A(M || []), [D, k] = A(M || []), [s, N] = A(""), [W, v] = A(!1), [J, U] = A(!1), l = E(null), O = E(null), m = E(!1), S = E(d), L = e?.multiple === !0 || !1, j = E(L ? [] : void 0), [a, y] = A(L ? [] : void 0);
+  } = e || {}, M = C ? C.filter((n) => n != null) : [], [V, g] = A(M || []), [D, k] = A(M || []), [s, N] = A(""), [W, v] = A(!1), [J, U] = A(!1), o = E(null), O = E(null), m = E(!1), S = E(d), L = e?.multiple === !0 || !1, j = E(L ? [] : void 0), [a, y] = A(L ? [] : void 0);
   b(() => {
     S.current = d;
   }, [d]), b(() => {
@@ -33,22 +33,22 @@ function re(e) {
       g(n), k(n);
     }
   }, [e?.options]);
-  const B = ee(() => (n, t) => new Promise((o, r) => {
-    l.current && clearTimeout(l.current), l.current = setTimeout(() => n(s).then(o).catch(r), t);
+  const B = ee(() => (n, t) => new Promise((l, r) => {
+    o.current && clearTimeout(o.current), o.current = setTimeout(() => n(s).then(l).catch(r), t);
   }), [s]), te = (n) => {
-    const t = f !== void 0, o = (r) => c ? i(r, c) : i(r, "id");
+    const t = f !== void 0, l = (r) => c ? i(r, c) : i(r, "id");
     if (e?.multiple === !0) {
       const r = j.current || [];
       let u;
-      r.some((x) => o(x) === o(n)) ? u = r.filter((x) => o(x) !== o(n)) : u = [...r, n], t ? (j.current = u, e?.onChange?.(u, I)) : (j.current = u, y(u), e?.onChange?.(u, I));
+      r.some((x) => l(x) === l(n)) ? u = r.filter((x) => l(x) !== l(n)) : u = [...r, n], t ? (j.current = u, e?.onChange?.(u, I)) : (j.current = u, y(u), e?.onChange?.(u, I));
     } else
       t ? (j.current = n, e?.onChange?.(n, I)) : (j.current = n, y(n), e?.onChange?.(n, I));
-  }, q = (n) => (e?.onFetchingStart?.(), S.current?.(n) || Promise.resolve([])), z = (n, t) => Array.isArray(n) ? (n.some((o) => typeof o != "object" || o === null) && console.debug(`El valor del ${t || "resultado del fetcher"} contiene elementos no válidos (null,undefined, no-object)`, n), n?.filter((o) => o != null) || []) : (console.debug(`El valor del ${t || "resultado del fetcher"} no es un Array (tipo de dato obtenido: ${typeof n})`), []), $ = ne((n, t) => n.length === 0 ? t : c ? t.filter((o) => !n.some((r) => i(r, c) === i(o, c))) : t.filter((o) => !n.some((r) => i(r, "id") === i(o, "id"))), [c]);
+  }, q = (n) => (e?.onFetchingStart?.(), S.current?.(n) || Promise.resolve([])), z = (n, t) => Array.isArray(n) ? (n.some((l) => typeof l != "object" || l === null) && console.debug(`El valor del ${t || "resultado del fetcher"} contiene elementos no válidos (null,undefined, no-object)`, n), n?.filter((l) => l != null) || []) : (console.debug(`El valor del ${t || "resultado del fetcher"} no es un Array (tipo de dato obtenido: ${typeof n})`), []), $ = ne((n, t) => n.length === 0 ? t : c ? t.filter((l) => !n.some((r) => i(r, c) === i(l, c))) : t.filter((l) => !n.some((r) => i(r, "id") === i(l, "id"))), [c]);
   b(() => {
     const n = e?.subscribeOpenChange;
     if (!n) return;
-    const t = n((o) => {
-      U(o);
+    const t = n((l) => {
+      U(l);
     });
     return () => {
       t && t();
@@ -58,13 +58,13 @@ function re(e) {
   b(() => {
     if (!w && S.current && _ === "fetch_on_type") {
       if (!s || s === "" || s.length < T) {
-        l.current && clearTimeout(l.current), v(!1);
+        o.current && clearTimeout(o.current), v(!1);
         return;
       }
       const n = B(q, P);
       v(!0), n.then((t) => {
-        const o = z(t);
-        g(o);
+        const l = z(t);
+        g(l);
       }).finally(() => {
         v(!1), e?.onFetchingEnd?.();
       });
@@ -78,11 +78,11 @@ function re(e) {
           v(!0), q().then((n) => {
             const t = z(n);
             g(() => {
-              const o = t.filter((r) => {
+              const l = t.filter((r) => {
                 if (c)
                   return i(r, c) !== void 0;
               });
-              return L && a.length > 0 ? [...$(a, o), ...a] : o;
+              return L && a.length > 0 ? [...$(a, l), ...a] : l;
             });
           }).finally(() => {
             v(!1), e?.onFetchingEnd?.();
@@ -91,11 +91,11 @@ function re(e) {
       } else
         e?.onClose?.();
   }, [G, _, w]);
-  const H = (n, t) => n?.filter((o) => {
+  const H = (n, t) => n?.filter((l) => {
     if (h)
-      return i(o, h)?.toLowerCase().includes(t.toLowerCase());
+      return i(l, h)?.toLowerCase().includes(t.toLowerCase());
     {
-      const r = o;
+      const r = l;
       switch (typeof r) {
         case "string":
           return r?.toLowerCase().includes(t.toLowerCase());
@@ -107,11 +107,11 @@ function re(e) {
           return !1;
       }
     }
-  }) || [], oe = (n) => n?.sort((t, o) => {
+  }) || [], le = (n) => n?.sort((t, l) => {
     if (h)
-      return i(t, h) < i(o, h) ? -1 : 1;
+      return i(t, h) < i(l, h) ? -1 : 1;
     {
-      const u = ["label", "name", "value"].find((K) => typeof t == "object" && Object.keys(t).includes(K)), R = t, x = o;
+      const u = ["label", "name", "value"].find((K) => typeof t == "object" && Object.keys(t).includes(K)), R = t, x = l;
       switch (typeof R) {
         case "string":
           return R < x ? -1 : 1;
@@ -119,8 +119,8 @@ function re(e) {
           return R < x ? -1 : 1;
         case "object":
           if (u) {
-            const K = i(t, u), le = i(o, u);
-            return K < le ? -1 : 1;
+            const K = i(t, u), oe = i(l, u);
+            return K < oe ? -1 : 1;
           } else
             return 1;
         default:
@@ -135,7 +135,7 @@ function re(e) {
   };
   b(() => {
     if (s === "")
-      k(oe(V));
+      k(le(V));
     else if (L) {
       const n = $(a, V);
       k([...H(n, s), ...a]);
@@ -173,36 +173,36 @@ function re(e) {
   };
 }
 const he = (e) => {
-  const C = E(null), { asyncMode: d = "fetch_in_open" } = e, _ = (l, O, m) => {
+  const C = E(null), { asyncMode: d = "fetch_in_open" } = e, _ = (o, O, m) => {
     const S = {
-      options: l.options,
-      fetcher: l.fetcher,
+      options: o.options,
+      fetcher: o.fetcher,
       asyncMode: O,
-      debounceDelay: l.debounceDelay,
-      minCharacters: l.minCharacters,
-      disabled: l.disabled,
-      optionValue: l.optionValue,
-      optionLabel: l.optionLabel,
+      debounceDelay: o.debounceDelay,
+      minCharacters: o.minCharacters,
+      disabled: o.disabled,
+      optionValue: o.optionValue,
+      optionLabel: o.optionLabel,
       onFetchingStart: () => {
         O === "fetch_on_type" && m.current?.open();
       },
       onTypeStart: () => {
-        !l?.fetcher && m.current?.open();
+        !o?.fetcher && m.current?.open();
       },
       inputRef: () => m.current?.searchInputRef,
       subscribeOpenChange: m.current?.subscribeOpenChange,
-      name: l.name
+      name: o.name
     };
-    return l.multiple ? {
+    return o.multiple ? {
       ...S,
       multiple: !0,
-      controlledValue: l.value,
-      onChange: l.onChange
+      controlledValue: o.value,
+      onChange: o.onChange
     } : {
       ...S,
       multiple: !1,
-      controlledValue: l.value,
-      onChange: l.onChange
+      controlledValue: o.value,
+      onChange: o.onChange
     };
   }, { inputValue: w, setInputValue: P, filteredOptions: T, isLoading: h, value: c, onOptionClick: f, cleanInputValue: F, cleanOptions: p, clearValue: I } = re(_(e, d, C));
   b(() => {
@@ -216,8 +216,8 @@ const he = (e) => {
   const M = ne(
     () => d === "fetch_on_type" ? h : !1,
     [d, h]
-  ), V = ee(() => e.multiple ? c.map((l) => i(l, e.optionValue)) : c ? i(c, e.optionValue) : void 0, [c, e.optionValue, e.multiple]), g = (l) => {
-    const O = T.find((m) => i(m, e.optionValue) === l.id);
+  ), V = ee(() => e.multiple ? c.map((o) => i(o, e.optionValue)) : c ? i(c, e.optionValue) : void 0, [c, e.optionValue, e.multiple]), g = (o) => {
+    const O = T.find((m) => i(m, e.optionValue) === o.id);
     O && f(O);
   }, { displayMode: D = e.multiple ? "chips" : "compact", dropdownOptions: k, overflow: s = "scroll", onChange: N, onClear: W, ...v } = e.selectComponentProps || {}, J = {
     controledSearchValue: w,
@@ -239,6 +239,7 @@ const he = (e) => {
       className: e.className,
       name: e.name,
       overflow: s,
+      placeholder: e.placeholder,
       ...v,
       onClear: e?.selectComponentProps?.onClear && U,
       multiple: !0,
@@ -261,6 +262,7 @@ const he = (e) => {
     {
       disabled: e.disabled,
       ...v,
+      placeholder: e.placeholder,
       onClear: U,
       className: e.className,
       overflow: s,

package/dist/Toast.es.js

@@ -1,59 +1,67 @@
-import { j as e } from "./jsx-runtime-GkKLlHH4.js";
-import w from "react";
-import { toast as p } from "sonner";
-import { c as s } from "./cn-B6yFEsav.js";
-import { Info as m } from "./Icons/Info.es.js";
-import { Error as u } from "./Icons/Error.es.js";
-import { Cancel as f } from "./Icons/Cancel.es.js";
-import { CheckCircle as b } from "./Icons/CheckCircle.es.js";
-import h from "./Button.es.js";
-import { Close as C } from "./Icons/Close.es.js";
-const x = {
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
+import { c as l } from "./cn-B6yFEsav.js";
+import P, { useRef as b, useEffect as I } from "react";
+import { toast as h } from "sonner";
+import { Info as w } from "./Icons/Info.es.js";
+import { Error as v } from "./Icons/Error.es.js";
+import { Cancel as y } from "./Icons/Cancel.es.js";
+import { CheckCircle as j } from "./Icons/CheckCircle.es.js";
+import C from "./Button.es.js";
+import { Close as E } from "./Icons/Close.es.js";
+const p = {
   dark: {
     success: {
       container: "border-b-[2px] border-success-default-default",
       iconClass: "text-success-medium-default",
-      icon: b
+      icon: j,
+      loading: "bg-success-default-default"
     },
     error: {
       container: "border-b-[2px] border-error-default-default",
       iconClass: "text-error-medium-default",
-      icon: f
+      icon: y,
+      loading: "bg-error-default-default"
     },
     warning: {
       container: "border-b-[2px] border-warning-default-default",
       iconClass: "text-warning-medium-default",
-      icon: u
+      icon: v,
+      loading: "bg-warning-default-default"
     },
     info: {
       container: " border-b-[2px] border-primary-default-default",
       iconClass: "text-primary-default-default",
-      icon: m
+      icon: w,
+      loading: "bg-primary-default-default"
     }
   },
   light: {
     success: {
       container: "",
       iconClass: "text-success-default-pressed",
-      icon: b
+      icon: j,
+      loading: "bg-success-default-pressed"
     },
     error: {
       container: "",
       iconClass: "text-error-medium-pressed",
-      icon: f
+      icon: y,
+      loading: "bg-error-medium-pressed"
     },
     warning: {
       container: "",
       iconClass: "text-warning-medium-pressed",
-      icon: u
+      icon: v,
+      loading: "bg-warning-medium-pressed"
     },
     info: {
       container: "",
       iconClass: "text-primary-default-pressed",
-      icon: m
+      icon: w,
+      loading: "bg-primary-default-pressed"
     }
   }
-}, l = {
+}, x = {
   dark: {
     container: "bg-neutral-default-default",
     title: "text-neutral-strong-default",
@@ -66,85 +74,121 @@ const x = {
     description: "text-neutral-medium-focused",
     shadow: "0px 0px 2px 0px rgba(0, 0, 0, 0.35),8px 8px 20px 0px rgba(0, 0, 0, 0.3),0px 0px 15px 0px rgba(0, 0, 0, 0.2),0px 0px 20px 0px rgba(21, 21, 21, 0.3) inset,6px 0px 100px 0px rgba(0, 0, 0, 0.05) inset"
   }
-}, v = (c) => {
-  const { title: r, description: i, button: a, id: n, icon: d, variant: o = "info", colorMode: t = "dark", showClose: g = !1 } = c;
-  return /* @__PURE__ */ e.jsxs(
+}, T = (d) => {
+  const { title: r, description: n, button: a, id: i, icon: s, variant: o = "info", colorMode: e = "dark", showClose: m = !1, loading: c = !1, loadingTimeout: g = 2500, finishLoader: u = !1 } = d;
+  return /* @__PURE__ */ t.jsxs(
     "div",
     {
       style: {
-        boxShadow: l[t].shadow
+        boxShadow: x[e].shadow
       },
-      className: s(
+      className: l(
         "flex p-3 pb-4 md:w-[485px] md:max-w-[485px] md:min-w-[485px] md:h-[68px] md:max-h-[68px] rounded-lg gap-2",
-        "w-[345px] max-w-[345px] min-w-[345px] h-[68px] max-h-[68px]",
-        l[t].container,
-        x[t][o].container
+        "w-[345px] max-w-[345px] min-w-[345px] h-[68px] max-h-[68px] relative",
+        x[e].container,
+        p[e][o].container,
+        c && "border-b-0"
       ),
       children: [
-        /* @__PURE__ */ e.jsxs(
+        /* @__PURE__ */ t.jsxs(
           "div",
           {
             className: "flex items-center justify-start gap-2 max-h-[38px] h-[38px] overflow-hidden flex-1 ",
             children: [
-              /* @__PURE__ */ e.jsx("div", { className: "f", style: { color: "inherit" }, children: w.createElement(d || x[t][o].icon, { size: 24, className: x[t][o].iconClass }) }),
-              /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [
-                /* @__PURE__ */ e.jsx("p", { className: s("select-none prometeo-fonts-label-medium md:prometeo-fonts-label-xlarge", l[t].title), children: r }),
-                i && /* @__PURE__ */ e.jsx("p", { className: s("select-none prometeo-fonts-body-xsmall md:prometeo-fonts-body-small text-nowrap overflow-ellipsis ", l[t].description), children: i })
+              /* @__PURE__ */ t.jsx("div", { className: "f", style: { color: "inherit" }, children: P.createElement(s || p[e][o].icon, { size: 24, className: p[e][o].iconClass }) }),
+              /* @__PURE__ */ t.jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [
+                /* @__PURE__ */ t.jsx("p", { className: l("select-none prometeo-fonts-label-medium md:prometeo-fonts-label-xlarge", x[e].title), children: r }),
+                n && /* @__PURE__ */ t.jsx("p", { className: l("select-none prometeo-fonts-body-xsmall md:prometeo-fonts-body-small text-nowrap overflow-ellipsis ", x[e].description), children: n })
               ] })
             ]
           }
         ),
-        a?.label && /* @__PURE__ */ e.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ e.jsx(
-          h,
+        c && /* @__PURE__ */ t.jsx(z, { color: o, timeOut: g, finished: u, colorMode: e }),
+        a?.label && /* @__PURE__ */ t.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ t.jsx(
+          C,
           {
             label: a?.label,
             onClick: () => {
-              a?.onClick(), p.dismiss(n);
+              a?.onClick(), h.dismiss(i);
             },
             size: "small",
             color: "secondary"
           }
         ) }),
-        g && /* @__PURE__ */ e.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ e.jsx(
-          h,
+        m && /* @__PURE__ */ t.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ t.jsx(
+          C,
           {
             onClick: () => {
-              p.dismiss(n);
+              h.dismiss(i);
             },
             label: "",
             size: "small",
             color: "secondary",
-            icon: /* @__PURE__ */ e.jsx(C, { className: s(t === "light" ? "text-neutral-medium-focused " : "") }),
+            icon: /* @__PURE__ */ t.jsx(E, { className: l(e === "light" ? "text-neutral-medium-focused " : "") }),
             variant: "text",
             animate: !1,
-            className: s(t === "light" ? "hover:bg-neutral-default-hover-light focus:bg-inherit active:bg-neutral-weak-hover " : "")
+            className: l(e === "light" ? "hover:bg-neutral-default-hover-light focus:bg-inherit active:bg-neutral-weak-hover " : "")
           }
         ) })
       ]
     }
   );
+}, z = ({ className: d, color: r, timeOut: n, finished: a, colorMode: i }) => {
+  const s = b(0), o = b(Date.now()), e = b(null);
+  I(() => {
+    if (a) {
+      s.current = 1, e.current && (e.current.style.width = "100%");
+      return;
+    }
+    o.current = Date.now(), s.current = 0;
+    const c = setInterval(() => {
+      const g = Date.now() - o.current, u = Math.min(g / n, 1), N = u * 0.95, k = Math.sin(u * Math.PI * 2) * 0.15 + 0.05, M = Math.random() < k;
+      let f;
+      if (M)
+        f = s.current;
+      else {
+        const R = (Math.random() - 0.5) * 0.25;
+        f = Math.max(s.current, Math.min(0.95, N + R));
+      }
+      s.current = f, e.current && (e.current.style.width = `${f * 100}%`), (u >= 1 || a) && clearInterval(c);
+    }, 50);
+    return () => clearInterval(c);
+  }, [n, a]);
+  const m = p[i][r].loading;
+  return /* @__PURE__ */ t.jsx("div", { className: l(
+    "absolute bottom-0 translate-y-0 left-0 w-full h-2 overflow-hidden rounded-b-xl",
+    'after:content-[""] after:w-[calc(100%-0px)] after:absolute after:bottom-0 after:left-1/2 after:bg-neutral-default-default after:h-2 after:-translate-x-1/2 after:-translate-y-[2px] after:rounded-b-full after:overflow-hidden',
+    d
+  ), children: /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      ref: e,
+      className: l("h-full transition-all duration-300 ease-out", m),
+      style: { width: "0%" }
+    }
+  ) });
 };
-function _(c, r) {
-  const { duration: i = 2500, showClose: a = !1, colorMode: n = "dark", position: d } = r || {};
-  return p.custom((o) => /* @__PURE__ */ e.jsx(
-    v,
+function G(d, r) {
+  const { duration: n = 2500, showClose: a = !1, colorMode: i = "dark", position: s } = r || {};
+  return h.custom((o) => /* @__PURE__ */ t.jsx(
+    T,
     {
       id: o,
       variant: r?.variant || "success",
-      title: c,
+      title: d,
       description: r?.description,
       icon: r?.icon,
       button: r?.button,
       showClose: a,
-      colorMode: n
+      colorMode: i
     }
   ), {
-    duration: i,
-    position: d,
+    duration: n,
+    position: s,
     unstyled: !0
   });
 }
 export {
-  v as default,
-  _ as toastpyrion
+  T as default,
+  G as toastpyrion
 };

package/dist/components/PyrionNavigationDrawer/PyrionLayout.d.ts

@@ -3,7 +3,7 @@ import { PyrionLayoutActionItemProps } from '../NavigationDrawer/NavigationDrawe
 import { PyrionLayoutLinkItemProps } from '../NavigationDrawer/NavigationDrawerLinkItem';
 import { NavigationDrawerSidebarProps } from '../NavigationDrawer/NavigationDrawerSidebar';
 import { NotificationCardProps } from '../NotificationCard/NotificationCard';
-import { ScrollTargetData } from '../Scrollable/Scrollable';
+import { ScrollTargetData, ScrollTargetConfig } from '../Scrollable/Scrollable';
 import { AllOptionAccessor } from '../Shared/types';
 import { TabSwitchElement } from '../TabSwitch/TabSwitch';
 import { subImageUrlAccessor } from './PLSystemSessions';
@@ -141,7 +141,8 @@ export type PyrionNavigationControls<TNotificationMetadata = unknown> = {
     setNotifications?: (notifications: NotificationCardProps<TNotificationMetadata>[]) => void;
     removeAllNotifications?: () => void;
     removeNotification?: (id: string | string[]) => void;
-    subscribeToNotificationsScroll?: (callback: (data: ScrollTargetData) => void) => () => void;
+    setNotificationsLoading?: (loading: boolean) => void;
+    subscribeToNotificationsScroll?: (callback: (data: ScrollTargetData) => void, config?: ScrollTargetConfig) => () => void;
 };
 export declare const usePyrionLayout: <TNotificationMetadata = unknown>() => PyrionNavigationControls<TNotificationMetadata>;
 declare const PyrionLayout: <TAppMetadata = unknown, TNotificationMetadata = unknown>({ children, helpSection, state, links: navlinks, onLinkClick, onNavigate, onLogoutClick, actions, activeActionId, onActionClick, tabsProps, currentSystemId, onSessionClick, onSystemLogoClick, onProfileClick, ...props }: PyrionLayoutProps<TAppMetadata, TNotificationMetadata>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Scrollable/Scrollable.d.ts

@@ -35,6 +35,15 @@ export interface ScrollTargetConfig {
 export interface ScrollableControlsHandler {
     subscribeToScrollTarget: (callback: (data: ScrollTargetData) => void, config?: ScrollTargetConfig) => () => void;
 }
+type ScrollTopButtonTarget = string;
+type ScrollTopButtonProps = {
+    target?: ScrollTopButtonTarget;
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    className?: string;
+};
 export interface ScrollableProps {
     debugMode?: boolean;
     className?: string;
@@ -46,6 +55,7 @@ export interface ScrollableProps {
     defaultBehavior?: 'scroll-on-click' | 'scroll-on-hover' | 'none';
     persistScroll?: boolean | string;
     controls?: React.RefObject<ScrollableControlsHandler | null>;
+    scrollTopButton?: ScrollTopButtonProps;
 }
 declare const Scrollable: (props: ScrollableProps) => import("react/jsx-runtime").JSX.Element;
 export default Scrollable;

package/dist/components/Toaster/Toaster.d.ts

@@ -1,9 +1,10 @@
-import { ColorMode } from '../Shared/types';
 import { IconComponent } from '../../Icons/types';
+import { ColorMode } from '../Shared/types';
 type ToastElementsProps = {
     container: string;
     iconClass: string;
     icon: IconComponent;
+    loading: string;
 };
 type ToastVarians = 'success' | 'error' | 'warning' | 'info';
 type ToastVariantClassnames = {
@@ -30,7 +31,18 @@ export interface PyrionToastProps {
     colorMode?: ColorMode;
     showClose?: boolean;
     position?: ToastPosition;
+    loading?: boolean;
+    loadingTimeout?: number;
+    finishLoader?: boolean;
 }
 declare const PyrionToast: (props: PyrionToastProps) => import("react/jsx-runtime").JSX.Element;
 export default PyrionToast;
 export declare function toastpyrion(title: string, options?: Omit<PyrionToastProps, 'id'>): string | number;
+export declare const toastPyrionPromise: (promise: Promise<any>, options?: {
+    loading?: Omit<PyrionToastProps, "id">;
+    success?: Omit<PyrionToastProps, "id">;
+    error?: Omit<PyrionToastProps, "id">;
+    colorMode?: ColorMode;
+    position?: ToastPosition;
+    timeOut?: number;
+}) => Promise<any>;