@konstructio/ui 0.1.2-alpha.74 → 0.1.2-alpha.76

package/dist/components/Toast/Toast.js

@@ -1,20 +1,22 @@
-import { jsx as i, jsxs as A, Fragment as ae } from "react/jsx-runtime";
+import { jsx as s, jsxs as I, Fragment as ie } from "react/jsx-runtime";
 import { S as B } from "../../index-BvoZGpli.js";
 import * as n from "react";
-import { useRef as xe, useEffect as be, useMemo as re, isValidElement as ne, useCallback as ge } from "react";
-import * as Se from "react-dom";
-import { P as D, a as Ne, c as x, b as Ie, d as Ae, u as De } from "../../index--l0zux8V.js";
-import { u as ie } from "../../index-DLcqcWxM.js";
-import { c as _e } from "../../index-CJnS4BVW.js";
-import { B as Fe, R as Le } from "../../index-URQGEGX7.js";
-import { P as Me } from "../../index-CESXsoMn.js";
+import { useRef as be, useEffect as ge, useMemo as ne, isValidElement as j, useCallback as Se } from "react";
+import * as Ne from "react-dom";
+import { P as D, a as Ie, c as b, b as Ae, d as De, u as _e } from "../../index--l0zux8V.js";
+import { u as ce } from "../../index-DLcqcWxM.js";
+import { c as Fe } from "../../index-CJnS4BVW.js";
+import { B as Le, R as Me, P as ke } from "../../index-BvEpLnOv.js";
 import { P as Oe } from "../../index-3fEdeexs.js";
-import { u as X } from "../../index-0ioNhtNM.js";
-import { R as ke } from "../../index-BKjcReYh.js";
-import { cn as j } from "../../utils/index.js";
-import { closeToastVariants as Ve, toastVariants as Ke, viewportToastVariants as He } from "./Toast.variants.js";
-import { X as We } from "../../x-Eoa9FJjA.js";
-var Ue = Object.freeze({
+import { u as Y } from "../../index-0ioNhtNM.js";
+import { R as Ve } from "../../index-BKjcReYh.js";
+import { cn as U } from "../../utils/index.js";
+import { closeToastVariants as Ke, toastVariants as He, viewportToastVariants as We } from "./Toast.variants.js";
+import { CheckCircleFilledIcon as Ue } from "../../assets/icons/components/CheckCircleFilled.js";
+import { ErrorIcon as Xe } from "../../assets/icons/components/Error.js";
+import { WarningTriangleIcon as Ye } from "../../assets/icons/components/WarningTriangle.js";
+import { X as $e } from "../../x-Eoa9FJjA.js";
+var ze = Object.freeze({
   // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
   position: "absolute",
   border: 0,
@@ -26,18 +28,18 @@ var Ue = Object.freeze({
   clip: "rect(0, 0, 0, 0)",
   whiteSpace: "nowrap",
   wordWrap: "normal"
-}), Xe = "VisuallyHidden", Q = n.forwardRef(
-  (e, o) => /* @__PURE__ */ i(
+}), Be = "VisuallyHidden", Z = n.forwardRef(
+  (e, o) => /* @__PURE__ */ s(
     D.span,
     {
       ...e,
       ref: o,
-      style: { ...Ue, ...e.style }
+      style: { ...ze, ...e.style }
     }
   )
 );
-Q.displayName = Xe;
-var Z = "ToastProvider", [ee, Ye, $e] = _e("Toast"), [ce] = Ie("Toast", [$e]), [Be, Y] = ce(Z), ue = (e) => {
+Z.displayName = Be;
+var ee = "ToastProvider", [te, je, qe] = Fe("Toast"), [ue] = Ae("Toast", [qe]), [Ge, $] = ue(ee), le = (e) => {
   const {
     __scopeToast: o,
     label: r = "Notification",
@@ -45,11 +47,11 @@ var Z = "ToastProvider", [ee, Ye, $e] = _e("Toast"), [ce] = Ie("Toast", [$e]), [
     swipeDirection: u = "right",
     swipeThreshold: d = 50,
     children: f
-  } = e, [w, v] = n.useState(null), [c, E] = n.useState(0), T = n.useRef(!1), N = n.useRef(!1);
+  } = e, [w, v] = n.useState(null), [c, E] = n.useState(0), T = n.useRef(!1), x = n.useRef(!1);
   return r.trim() || console.error(
-    `Invalid prop \`label\` supplied to \`${Z}\`. Expected non-empty \`string\`.`
-  ), /* @__PURE__ */ i(ee.Provider, { scope: o, children: /* @__PURE__ */ i(
-    Be,
+    `Invalid prop \`label\` supplied to \`${ee}\`. Expected non-empty \`string\`.`
+  ), /* @__PURE__ */ s(te.Provider, { scope: o, children: /* @__PURE__ */ s(
+    Ge,
     {
       scope: o,
       label: r,
@@ -62,106 +64,106 @@ var Z = "ToastProvider", [ee, Ye, $e] = _e("Toast"), [ce] = Ie("Toast", [$e]), [
       onToastAdd: n.useCallback(() => E((R) => R + 1), []),
       onToastRemove: n.useCallback(() => E((R) => R - 1), []),
       isFocusedToastEscapeKeyDownRef: T,
-      isClosePausedRef: N,
+      isClosePausedRef: x,
       children: f
     }
   ) });
 };
-ue.displayName = Z;
-var le = "ToastViewport", je = ["F8"], z = "toast.viewportPause", G = "toast.viewportResume", de = n.forwardRef(
+le.displayName = ee;
+var de = "ToastViewport", Je = ["F8"], G = "toast.viewportPause", J = "toast.viewportResume", fe = n.forwardRef(
   (e, o) => {
     const {
       __scopeToast: r,
-      hotkey: t = je,
+      hotkey: t = Je,
       label: u = "Notifications ({hotkey})",
       ...d
-    } = e, f = Y(le, r), w = Ye(r), v = n.useRef(null), c = n.useRef(null), E = n.useRef(null), T = n.useRef(null), N = ie(o, T, f.onViewportChange), R = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), b = f.toastCount > 0;
+    } = e, f = $(de, r), w = je(r), v = n.useRef(null), c = n.useRef(null), E = n.useRef(null), T = n.useRef(null), x = ce(o, T, f.onViewportChange), R = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), g = f.toastCount > 0;
     n.useEffect(() => {
-      const s = (h) => {
-        t.length !== 0 && t.every((m) => h[m] || h.code === m) && T.current?.focus();
+      const a = (y) => {
+        t.length !== 0 && t.every((m) => y[m] || y.code === m) && T.current?.focus();
       };
-      return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
+      return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
     }, [t]), n.useEffect(() => {
-      const s = v.current, h = T.current;
-      if (b && s && h) {
+      const a = v.current, y = T.current;
+      if (g && a && y) {
         const p = () => {
           if (!f.isClosePausedRef.current) {
-            const y = new CustomEvent(z);
-            h.dispatchEvent(y), f.isClosePausedRef.current = !0;
+            const h = new CustomEvent(G);
+            y.dispatchEvent(h), f.isClosePausedRef.current = !0;
           }
         }, m = () => {
           if (f.isClosePausedRef.current) {
-            const y = new CustomEvent(G);
-            h.dispatchEvent(y), f.isClosePausedRef.current = !1;
+            const h = new CustomEvent(J);
+            y.dispatchEvent(h), f.isClosePausedRef.current = !1;
           }
-        }, P = (y) => {
-          !s.contains(y.relatedTarget) && m();
+        }, P = (h) => {
+          !a.contains(h.relatedTarget) && m();
         }, C = () => {
-          s.contains(document.activeElement) || m();
+          a.contains(document.activeElement) || m();
         };
-        return s.addEventListener("focusin", p), s.addEventListener("focusout", P), s.addEventListener("pointermove", p), s.addEventListener("pointerleave", C), window.addEventListener("blur", p), window.addEventListener("focus", m), () => {
-          s.removeEventListener("focusin", p), s.removeEventListener("focusout", P), s.removeEventListener("pointermove", p), s.removeEventListener("pointerleave", C), window.removeEventListener("blur", p), window.removeEventListener("focus", m);
+        return a.addEventListener("focusin", p), a.addEventListener("focusout", P), a.addEventListener("pointermove", p), a.addEventListener("pointerleave", C), window.addEventListener("blur", p), window.addEventListener("focus", m), () => {
+          a.removeEventListener("focusin", p), a.removeEventListener("focusout", P), a.removeEventListener("pointermove", p), a.removeEventListener("pointerleave", C), window.removeEventListener("blur", p), window.removeEventListener("focus", m);
         };
       }
-    }, [b, f.isClosePausedRef]);
+    }, [g, f.isClosePausedRef]);
     const l = n.useCallback(
-      ({ tabbingDirection: s }) => {
+      ({ tabbingDirection: a }) => {
         const p = w().map((m) => {
-          const P = m.ref.current, C = [P, ...at(P)];
-          return s === "forwards" ? C : C.reverse();
+          const P = m.ref.current, C = [P, ...lt(P)];
+          return a === "forwards" ? C : C.reverse();
         });
-        return (s === "forwards" ? p.reverse() : p).flat();
+        return (a === "forwards" ? p.reverse() : p).flat();
       },
       [w]
     );
     return n.useEffect(() => {
-      const s = T.current;
-      if (s) {
-        const h = (p) => {
+      const a = T.current;
+      if (a) {
+        const y = (p) => {
           const m = p.altKey || p.ctrlKey || p.metaKey;
           if (p.key === "Tab" && !m) {
-            const C = document.activeElement, y = p.shiftKey;
-            if (p.target === s && y) {
+            const C = document.activeElement, h = p.shiftKey;
+            if (p.target === a && h) {
               c.current?.focus();
               return;
             }
-            const F = l({ tabbingDirection: y ? "backwards" : "forwards" }), V = F.findIndex((I) => I === C);
-            q(F.slice(V + 1)) ? p.preventDefault() : y ? c.current?.focus() : E.current?.focus();
+            const F = l({ tabbingDirection: h ? "backwards" : "forwards" }), V = F.findIndex((A) => A === C);
+            q(F.slice(V + 1)) ? p.preventDefault() : h ? c.current?.focus() : E.current?.focus();
           }
         };
-        return s.addEventListener("keydown", h), () => s.removeEventListener("keydown", h);
+        return a.addEventListener("keydown", y), () => a.removeEventListener("keydown", y);
       }
-    }, [w, l]), /* @__PURE__ */ A(
-      Fe,
+    }, [w, l]), /* @__PURE__ */ I(
+      Le,
       {
         ref: v,
         role: "region",
         "aria-label": u.replace("{hotkey}", R),
         tabIndex: -1,
-        style: { pointerEvents: b ? void 0 : "none" },
+        style: { pointerEvents: g ? void 0 : "none" },
         children: [
-          b && /* @__PURE__ */ i(
-            J,
+          g && /* @__PURE__ */ s(
+            Q,
             {
               ref: c,
               onFocusFromOutsideViewport: () => {
-                const s = l({
+                const a = l({
                   tabbingDirection: "forwards"
                 });
-                q(s);
+                q(a);
               }
             }
           ),
-          /* @__PURE__ */ i(ee.Slot, { scope: r, children: /* @__PURE__ */ i(D.ol, { tabIndex: -1, ...d, ref: N }) }),
-          b && /* @__PURE__ */ i(
-            J,
+          /* @__PURE__ */ s(te.Slot, { scope: r, children: /* @__PURE__ */ s(D.ol, { tabIndex: -1, ...d, ref: x }) }),
+          g && /* @__PURE__ */ s(
+            Q,
             {
               ref: E,
               onFocusFromOutsideViewport: () => {
-                const s = l({
+                const a = l({
                   tabbingDirection: "backwards"
                 });
-                q(s);
+                q(a);
               }
             }
           )
@@ -170,12 +172,12 @@ var le = "ToastViewport", je = ["F8"], z = "toast.viewportPause", G = "toast.vie
     );
   }
 );
-de.displayName = le;
-var fe = "ToastFocusProxy", J = n.forwardRef(
+fe.displayName = de;
+var pe = "ToastFocusProxy", Q = n.forwardRef(
   (e, o) => {
-    const { __scopeToast: r, onFocusFromOutsideViewport: t, ...u } = e, d = Y(fe, r);
-    return /* @__PURE__ */ i(
-      Q,
+    const { __scopeToast: r, onFocusFromOutsideViewport: t, ...u } = e, d = $(pe, r);
+    return /* @__PURE__ */ s(
+      Z,
       {
         tabIndex: 0,
         ...u,
@@ -189,35 +191,35 @@ var fe = "ToastFocusProxy", J = n.forwardRef(
     );
   }
 );
-J.displayName = fe;
-var O = "Toast", qe = "toast.swipeStart", ze = "toast.swipeMove", Ge = "toast.swipeCancel", Je = "toast.swipeEnd", pe = n.forwardRef(
+Q.displayName = pe;
+var k = "Toast", Qe = "toast.swipeStart", Ze = "toast.swipeMove", et = "toast.swipeCancel", tt = "toast.swipeEnd", me = n.forwardRef(
   (e, o) => {
-    const { forceMount: r, open: t, defaultOpen: u, onOpenChange: d, ...f } = e, [w, v] = Ne({
+    const { forceMount: r, open: t, defaultOpen: u, onOpenChange: d, ...f } = e, [w, v] = Ie({
       prop: t,
       defaultProp: u ?? !0,
       onChange: d,
-      caller: O
+      caller: k
     });
-    return /* @__PURE__ */ i(Oe, { present: r || w, children: /* @__PURE__ */ i(
-      et,
+    return /* @__PURE__ */ s(Oe, { present: r || w, children: /* @__PURE__ */ s(
+      nt,
       {
         open: w,
         ...f,
         ref: o,
         onClose: () => v(!1),
-        onPause: X(e.onPause),
-        onResume: X(e.onResume),
-        onSwipeStart: x(e.onSwipeStart, (c) => {
+        onPause: Y(e.onPause),
+        onResume: Y(e.onResume),
+        onSwipeStart: b(e.onSwipeStart, (c) => {
           c.currentTarget.setAttribute("data-swipe", "start");
         }),
-        onSwipeMove: x(e.onSwipeMove, (c) => {
+        onSwipeMove: b(e.onSwipeMove, (c) => {
           const { x: E, y: T } = c.detail.delta;
           c.currentTarget.setAttribute("data-swipe", "move"), c.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${E}px`), c.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${T}px`);
         }),
-        onSwipeCancel: x(e.onSwipeCancel, (c) => {
+        onSwipeCancel: b(e.onSwipeCancel, (c) => {
           c.currentTarget.setAttribute("data-swipe", "cancel"), c.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), c.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), c.currentTarget.style.removeProperty("--radix-toast-swipe-end-x"), c.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
         }),
-        onSwipeEnd: x(e.onSwipeEnd, (c) => {
+        onSwipeEnd: b(e.onSwipeEnd, (c) => {
           const { x: E, y: T } = c.detail.delta;
           c.currentTarget.setAttribute("data-swipe", "end"), c.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), c.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), c.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${E}px`), c.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${T}px`), v(!1);
         })
@@ -225,11 +227,11 @@ var O = "Toast", qe = "toast.swipeStart", ze = "toast.swipeMove", Ge = "toast.sw
     ) });
   }
 );
-pe.displayName = O;
-var [Qe, Ze] = ce(O, {
+me.displayName = k;
+var [ot, rt] = ue(k, {
   onClose() {
   }
-}), et = n.forwardRef(
+}), nt = n.forwardRef(
   (e, o) => {
     const {
       __scopeToast: r,
@@ -242,85 +244,85 @@ var [Qe, Ze] = ce(O, {
       onResume: c,
       onSwipeStart: E,
       onSwipeMove: T,
-      onSwipeCancel: N,
+      onSwipeCancel: x,
       onSwipeEnd: R,
-      ...b
-    } = e, l = Y(O, r), [s, h] = n.useState(null), p = ie(o, (a) => h(a)), m = n.useRef(null), P = n.useRef(null), C = u || l.duration, y = n.useRef(0), _ = n.useRef(C), k = n.useRef(0), { onToastAdd: F, onToastRemove: V } = l, I = X(() => {
-      s?.contains(document.activeElement) && l.viewport?.focus(), f();
+      ...g
+    } = e, l = $(k, r), [a, y] = n.useState(null), p = ce(o, (i) => y(i)), m = n.useRef(null), P = n.useRef(null), C = u || l.duration, h = n.useRef(0), _ = n.useRef(C), O = n.useRef(0), { onToastAdd: F, onToastRemove: V } = l, A = Y(() => {
+      a?.contains(document.activeElement) && l.viewport?.focus(), f();
     }), K = n.useCallback(
-      (a) => {
-        !a || a === 1 / 0 || (window.clearTimeout(k.current), y.current = (/* @__PURE__ */ new Date()).getTime(), k.current = window.setTimeout(I, a));
+      (i) => {
+        !i || i === 1 / 0 || (window.clearTimeout(O.current), h.current = (/* @__PURE__ */ new Date()).getTime(), O.current = window.setTimeout(A, i));
       },
-      [I]
+      [A]
     );
     n.useEffect(() => {
-      const a = l.viewport;
-      if (a) {
-        const g = () => {
+      const i = l.viewport;
+      if (i) {
+        const S = () => {
           K(_.current), c?.();
-        }, S = () => {
-          const L = (/* @__PURE__ */ new Date()).getTime() - y.current;
-          _.current = _.current - L, window.clearTimeout(k.current), v?.();
+        }, N = () => {
+          const L = (/* @__PURE__ */ new Date()).getTime() - h.current;
+          _.current = _.current - L, window.clearTimeout(O.current), v?.();
         };
-        return a.addEventListener(z, S), a.addEventListener(G, g), () => {
-          a.removeEventListener(z, S), a.removeEventListener(G, g);
+        return i.addEventListener(G, N), i.addEventListener(J, S), () => {
+          i.removeEventListener(G, N), i.removeEventListener(J, S);
         };
       }
     }, [l.viewport, C, v, c, K]), n.useEffect(() => {
       d && !l.isClosePausedRef.current && K(C);
     }, [d, C, l.isClosePausedRef, K]), n.useEffect(() => (F(), () => V()), [F, V]);
-    const te = n.useMemo(() => s ? Pe(s) : null, [s]);
-    return l.viewport ? /* @__PURE__ */ A(ae, { children: [
-      te && /* @__PURE__ */ i(
-        tt,
+    const oe = n.useMemo(() => a ? Ce(a) : null, [a]);
+    return l.viewport ? /* @__PURE__ */ I(ie, { children: [
+      oe && /* @__PURE__ */ s(
+        st,
         {
           __scopeToast: r,
           role: "status",
           "aria-live": t === "foreground" ? "assertive" : "polite",
-          children: te
+          children: oe
         }
       ),
-      /* @__PURE__ */ i(Qe, { scope: r, onClose: I, children: Se.createPortal(
-        /* @__PURE__ */ i(ee.ItemSlot, { scope: r, children: /* @__PURE__ */ i(
-          Le,
+      /* @__PURE__ */ s(ot, { scope: r, onClose: A, children: Ne.createPortal(
+        /* @__PURE__ */ s(te.ItemSlot, { scope: r, children: /* @__PURE__ */ s(
+          Me,
           {
             asChild: !0,
-            onEscapeKeyDown: x(w, () => {
-              l.isFocusedToastEscapeKeyDownRef.current || I(), l.isFocusedToastEscapeKeyDownRef.current = !1;
+            onEscapeKeyDown: b(w, () => {
+              l.isFocusedToastEscapeKeyDownRef.current || A(), l.isFocusedToastEscapeKeyDownRef.current = !1;
             }),
-            children: /* @__PURE__ */ i(
+            children: /* @__PURE__ */ s(
               D.li,
               {
                 tabIndex: 0,
                 "data-state": d ? "open" : "closed",
                 "data-swipe-direction": l.swipeDirection,
-                ...b,
+                ...g,
                 ref: p,
                 style: { userSelect: "none", touchAction: "none", ...e.style },
-                onKeyDown: x(e.onKeyDown, (a) => {
-                  a.key === "Escape" && (w?.(a.nativeEvent), a.nativeEvent.defaultPrevented || (l.isFocusedToastEscapeKeyDownRef.current = !0, I()));
+                onKeyDown: b(e.onKeyDown, (i) => {
+                  i.key === "Escape" && (w?.(i.nativeEvent), i.nativeEvent.defaultPrevented || (l.isFocusedToastEscapeKeyDownRef.current = !0, A()));
                 }),
-                onPointerDown: x(e.onPointerDown, (a) => {
-                  a.button === 0 && (m.current = { x: a.clientX, y: a.clientY });
+                onPointerDown: b(e.onPointerDown, (i) => {
+                  i.button === 0 && (m.current = { x: i.clientX, y: i.clientY });
                 }),
-                onPointerMove: x(e.onPointerMove, (a) => {
+                onPointerMove: b(e.onPointerMove, (i) => {
                   if (!m.current) return;
-                  const g = a.clientX - m.current.x, S = a.clientY - m.current.y, L = !!P.current, M = ["left", "right"].includes(l.swipeDirection), H = ["left", "up"].includes(l.swipeDirection) ? Math.min : Math.max, Ce = M ? H(0, g) : 0, Re = M ? 0 : H(0, S), $ = a.pointerType === "touch" ? 10 : 2, W = { x: Ce, y: Re }, oe = { originalEvent: a, delta: W };
-                  L ? (P.current = W, U(ze, T, oe, {
+                  const S = i.clientX - m.current.x, N = i.clientY - m.current.y, L = !!P.current, M = ["left", "right"].includes(l.swipeDirection), H = ["left", "up"].includes(l.swipeDirection) ? Math.min : Math.max, xe = M ? H(0, S) : 0, Re = M ? 0 : H(0, N), z = i.pointerType === "touch" ? 10 : 2, W = { x: xe, y: Re }, re = { originalEvent: i, delta: W };
+                  L ? (P.current = W, X(Ze, T, re, {
                     discrete: !1
-                  })) : se(W, l.swipeDirection, $) ? (P.current = W, U(qe, E, oe, {
+                  })) : se(W, l.swipeDirection, z) ? (P.current = W, X(Qe, E, re, {
                     discrete: !1
-                  }), a.target.setPointerCapture(a.pointerId)) : (Math.abs(g) > $ || Math.abs(S) > $) && (m.current = null);
+                  }), i.target.setPointerCapture(i.pointerId)) : (Math.abs(S) > z || Math.abs(N) > z) && (m.current = null);
                 }),
-                onPointerUp: x(e.onPointerUp, (a) => {
-                  const g = P.current, S = a.target;
-                  if (S.hasPointerCapture(a.pointerId) && S.releasePointerCapture(a.pointerId), P.current = null, m.current = null, g) {
-                    const L = a.currentTarget, M = { originalEvent: a, delta: g };
-                    se(g, l.swipeDirection, l.swipeThreshold) ? U(Je, R, M, {
+                onPointerUp: b(e.onPointerUp, (i) => {
+                  const S = P.current, N = i.target;
+                  if (N.hasPointerCapture(i.pointerId) && N.releasePointerCapture(i.pointerId), P.current = null, m.current = null, S) {
+                    const L = i.currentTarget, M = { originalEvent: i, delta: S };
+                    se(S, l.swipeDirection, l.swipeThreshold) ? X(tt, R, M, {
                       discrete: !0
-                    }) : U(
-                      Ge,
-                      N,
+                    }) : X(
+                      et,
+                      x,
                       M,
                       {
                         discrete: !0
@@ -338,57 +340,57 @@ var [Qe, Ze] = ce(O, {
       ) })
     ] }) : null;
   }
-), tt = (e) => {
-  const { __scopeToast: o, children: r, ...t } = e, u = Y(O, o), [d, f] = n.useState(!1), [w, v] = n.useState(!1);
-  return nt(() => f(!0)), n.useEffect(() => {
+), st = (e) => {
+  const { __scopeToast: o, children: r, ...t } = e, u = $(k, o), [d, f] = n.useState(!1), [w, v] = n.useState(!1);
+  return ct(() => f(!0)), n.useEffect(() => {
     const c = window.setTimeout(() => v(!0), 1e3);
     return () => window.clearTimeout(c);
-  }, []), w ? null : /* @__PURE__ */ i(Me, { asChild: !0, children: /* @__PURE__ */ i(Q, { ...t, children: d && /* @__PURE__ */ A(ae, { children: [
+  }, []), w ? null : /* @__PURE__ */ s(ke, { asChild: !0, children: /* @__PURE__ */ s(Z, { ...t, children: d && /* @__PURE__ */ I(ie, { children: [
     u.label,
     " ",
     r
   ] }) }) });
-}, ot = "ToastTitle", me = n.forwardRef(
+}, at = "ToastTitle", we = n.forwardRef(
   (e, o) => {
     const { __scopeToast: r, ...t } = e;
-    return /* @__PURE__ */ i(D.div, { ...t, ref: o });
+    return /* @__PURE__ */ s(D.div, { ...t, ref: o });
   }
 );
-me.displayName = ot;
-var rt = "ToastDescription", we = n.forwardRef(
+we.displayName = at;
+var it = "ToastDescription", Te = n.forwardRef(
   (e, o) => {
     const { __scopeToast: r, ...t } = e;
-    return /* @__PURE__ */ i(D.div, { ...t, ref: o });
+    return /* @__PURE__ */ s(D.div, { ...t, ref: o });
   }
 );
-we.displayName = rt;
-var Te = "ToastAction", ve = n.forwardRef(
+Te.displayName = it;
+var ve = "ToastAction", Ee = n.forwardRef(
   (e, o) => {
     const { altText: r, ...t } = e;
-    return r.trim() ? /* @__PURE__ */ i(he, { altText: r, asChild: !0, children: /* @__PURE__ */ i(ye, { ...t, ref: o }) }) : (console.error(
-      `Invalid prop \`altText\` supplied to \`${Te}\`. Expected non-empty \`string\`.`
+    return r.trim() ? /* @__PURE__ */ s(Pe, { altText: r, asChild: !0, children: /* @__PURE__ */ s(ye, { ...t, ref: o }) }) : (console.error(
+      `Invalid prop \`altText\` supplied to \`${ve}\`. Expected non-empty \`string\`.`
     ), null);
   }
 );
-ve.displayName = Te;
-var Ee = "ToastClose", ye = n.forwardRef(
+Ee.displayName = ve;
+var he = "ToastClose", ye = n.forwardRef(
   (e, o) => {
-    const { __scopeToast: r, ...t } = e, u = Ze(Ee, r);
-    return /* @__PURE__ */ i(he, { asChild: !0, children: /* @__PURE__ */ i(
+    const { __scopeToast: r, ...t } = e, u = rt(he, r);
+    return /* @__PURE__ */ s(Pe, { asChild: !0, children: /* @__PURE__ */ s(
       D.button,
       {
         type: "button",
         ...t,
         ref: o,
-        onClick: x(e.onClick, u.onClose)
+        onClick: b(e.onClick, u.onClose)
       }
     ) });
   }
 );
-ye.displayName = Ee;
-var he = n.forwardRef((e, o) => {
+ye.displayName = he;
+var Pe = n.forwardRef((e, o) => {
   const { __scopeToast: r, altText: t, ...u } = e;
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ s(
     D.div,
     {
       "data-radix-toast-announce-exclude": "",
@@ -398,42 +400,42 @@ var he = n.forwardRef((e, o) => {
     }
   );
 });
-function Pe(e) {
+function Ce(e) {
   const o = [];
   return Array.from(e.childNodes).forEach((t) => {
-    if (t.nodeType === t.TEXT_NODE && t.textContent && o.push(t.textContent), st(t)) {
+    if (t.nodeType === t.TEXT_NODE && t.textContent && o.push(t.textContent), ut(t)) {
       const u = t.ariaHidden || t.hidden || t.style.display === "none", d = t.dataset.radixToastAnnounceExclude === "";
       if (!u)
         if (d) {
           const f = t.dataset.radixToastAnnounceAlt;
           f && o.push(f);
         } else
-          o.push(...Pe(t));
+          o.push(...Ce(t));
     }
   }), o;
 }
-function U(e, o, r, { discrete: t }) {
+function X(e, o, r, { discrete: t }) {
   const u = r.originalEvent.currentTarget, d = new CustomEvent(e, { bubbles: !0, cancelable: !0, detail: r });
-  o && u.addEventListener(e, o, { once: !0 }), t ? Ae(u, d) : u.dispatchEvent(d);
+  o && u.addEventListener(e, o, { once: !0 }), t ? De(u, d) : u.dispatchEvent(d);
 }
 var se = (e, o, r = 0) => {
   const t = Math.abs(e.x), u = Math.abs(e.y), d = t > u;
   return o === "left" || o === "right" ? d && t > r : !d && u > r;
 };
-function nt(e = () => {
+function ct(e = () => {
 }) {
-  const o = X(e);
-  De(() => {
+  const o = Y(e);
+  _e(() => {
     let r = 0, t = 0;
     return r = window.requestAnimationFrame(() => t = window.requestAnimationFrame(o)), () => {
       window.cancelAnimationFrame(r), window.cancelAnimationFrame(t);
     };
   }, [o]);
 }
-function st(e) {
+function ut(e) {
   return e.nodeType === e.ELEMENT_NODE;
 }
-function at(e) {
+function lt(e) {
   const o = [], r = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
     acceptNode: (t) => {
       const u = t.tagName === "INPUT" && t.type === "hidden";
@@ -447,8 +449,8 @@ function q(e) {
   const o = document.activeElement;
   return e.some((r) => r === o ? !0 : (r.focus(), document.activeElement !== o));
 }
-var it = ue, ct = de, ut = pe, lt = me, dt = we, ft = ve;
-const St = ({
+var dt = le, ft = fe, pt = me, mt = we, ae = Te, wt = Ee;
+const _t = ({
   title: e,
   duration: o = 5e3,
   titleClassName: r,
@@ -461,46 +463,51 @@ const St = ({
   className: c,
   open: E = !1,
   setOpen: T,
-  variant: N
+  variant: x
 }) => {
-  const R = xe(0);
-  be(() => () => clearTimeout(R.current), []);
-  const b = re(() => ne(e) ? /* @__PURE__ */ i(B, { className: r, children: e }) : e, [e, r]), l = re(() => ne(u) ? /* @__PURE__ */ i(B, { className: t, children: u }) : u, [u, t]), s = ge(() => {
+  const R = be(0);
+  ge(() => () => clearTimeout(R.current), []);
+  const g = ne(() => j(e) ? /* @__PURE__ */ s(B, { className: r, children: e }) : e, [e, r]), l = ne(() => j(u) ? /* @__PURE__ */ s(B, { className: t, children: u }) : u, [u, t]), a = Se(() => {
     T(!1), R.current = window.setTimeout(() => T(!0), 100);
   }, [T]);
-  return /* @__PURE__ */ A(it, { swipeDirection: "right", duration: o, children: [
-    /* @__PURE__ */ i(B, { onClick: s, children: d }),
-    /* @__PURE__ */ A(
-      ut,
+  return /* @__PURE__ */ I(dt, { swipeDirection: "right", duration: o, children: [
+    /* @__PURE__ */ s(B, { onClick: a, children: d }),
+    /* @__PURE__ */ I(
+      pt,
       {
-        className: j(Ke({ variant: N, className: c })),
+        className: U(He({ variant: x, className: c })),
         "data-theme": f,
         open: E,
         onOpenChange: T,
         children: [
-          /* @__PURE__ */ A("div", { className: "flex gap-2 items-center flex-1", children: [
-            /* @__PURE__ */ i(lt, { asChild: !0, className: r, children: b }),
-            l && /* @__PURE__ */ i(dt, { asChild: !0, children: l })
+          /* @__PURE__ */ I("div", { className: "flex gap-2 items-center flex-1", children: [
+            x === "success" && /* @__PURE__ */ s(Ue, { size: 20, className: "shrink-0" }),
+            x === "error" && /* @__PURE__ */ s(Xe, { size: 20, className: "shrink-0" }),
+            x === "warning" && /* @__PURE__ */ s(Ye, { size: 20, className: "shrink-0" }),
+            /* @__PURE__ */ I("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ s(mt, { asChild: !0, className: r, children: g }),
+              l && (j(l) ? /* @__PURE__ */ s(ae, { asChild: !0, children: l }) : /* @__PURE__ */ s(ae, { className: U("text-sm", t), children: l }))
+            ] })
           ] }),
-          w && /* @__PURE__ */ i(ft, { asChild: !0, altText: "Close the toast", children: /* @__PURE__ */ A("button", { type: "button", className: "absolute right-1.5 top-1.5", children: [
-            /* @__PURE__ */ i(
-              We,
+          w && /* @__PURE__ */ s(wt, { asChild: !0, altText: "Close the toast", children: /* @__PURE__ */ I("button", { type: "button", className: "cursor-pointer", children: [
+            /* @__PURE__ */ s(
+              $e,
               {
-                className: j(
-                  Ve({
+                className: U(
+                  Ke({
                     className: v
                   })
                 )
               }
             ),
-            /* @__PURE__ */ i(ke, { children: "Close toast" })
+            /* @__PURE__ */ s(Ve, { children: "Close toast" })
           ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ i(ct, { className: j(He()) })
+    /* @__PURE__ */ s(ft, { className: U(We()) })
   ] });
 };
 export {
-  St as Toast
+  _t as Toast
 };