@spark-ui/components 14.0.0-beta.1 → 14.0.0

package/dist/toast/index.mjs

@@ -1,905 +1,13 @@
-import { jsx as N, jsxs as j } from "react/jsx-runtime";
-import { a as dt } from "../Slot-C98rL4yy.mjs";
-import { c as ft, a as se } from "../index-BmAFn37q.mjs";
-import { B as pt } from "../Button-D32Avk2j.mjs";
-import { I as _e } from "../Icon-D1RueiPY.mjs";
-import { I as mt } from "../IconButton-BY3gYXtU.mjs";
-import { Close as gt } from "@spark-ui/icons/Close";
-import * as n from "react";
-import { f as Pe, c as W, j as oe, l as ht, a as Ce, i as vt, u as Ae, k as He } from "../useOpenChangeComplete-RUbg6RBw.mjs";
-import * as Ye from "react-dom";
-import { T as Le, a as pe, o as ne, c as re, m as De, F as Te, v as xt, g as Ne, i as yt, u as wt } from "../inertValue-Bif5Sqs6.mjs";
-import { f as ke } from "../floating-ui.utils.dom-uiDUZc_y.mjs";
-let Be = 0;
-function $e(e) {
-  return Be += 1, `${e}-${Math.random().toString(36).slice(2, 6)}-${Be}`;
-}
-const me = /* @__PURE__ */ n.createContext(void 0);
-process.env.NODE_ENV !== "production" && (me.displayName = "ToastContext");
-function Ie() {
-  const e = n.useContext(me);
-  if (!e)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: useToastManager must be used within <Toast.Provider>." : Pe(73));
-  return e;
-}
-function Ee(e, i) {
-  if (typeof e == "string")
-    return {
-      description: e
-    };
-  if (typeof e == "function") {
-    const r = e(i);
-    return typeof r == "string" ? {
-      description: r
-    } : r;
-  }
-  return e;
-}
-const Xe = function(i) {
-  const {
-    children: r,
-    timeout: t = 5e3,
-    limit: v = 3,
-    toastManager: b
-  } = i, [h, c] = n.useState([]), [l, s] = n.useState(!1), [d, p] = n.useState(!1), [u, R] = n.useState(null);
-  h.length === 0 && (l && s(!1), d && p(!1));
-  const E = l || d, P = n.useRef(/* @__PURE__ */ new Map()), A = n.useRef(null), F = n.useRef(!0), z = n.useRef(!1);
-  function U(o) {
-    const y = pe(ne(A.current));
-    if (!A.current || !re(A.current, y) || !De(y))
-      return;
-    const T = h.findIndex((a) => a.id === o);
-    let f = null, w = T + 1;
-    for (; w < h.length; ) {
-      if (h[w].transitionStatus !== "ending") {
-        f = h[w];
-        break;
-      }
-      w += 1;
-    }
-    if (!f)
-      for (w = T - 1; w >= 0; ) {
-        if (h[w].transitionStatus !== "ending") {
-          f = h[w];
-          break;
-        }
-        w -= 1;
-      }
-    f ? f.ref?.current?.focus() : u?.focus({
-      preventScroll: !0
-    });
-  }
-  const M = W(() => {
-    z.current || (z.current = !0, P.current.forEach((o) => {
-      if (o.timeout) {
-        o.timeout.clear();
-        const y = Date.now() - o.start, T = o.delay - y;
-        o.remaining = T > 0 ? T : 0;
-      }
-    }));
-  }), _ = W(() => {
-    z.current && (z.current = !1, P.current.forEach((o, y) => {
-      o.remaining = o.remaining > 0 ? o.remaining : o.delay, o.timeout ??= Le.create(), o.timeout.start(o.remaining, () => {
-        P.current.delete(y), o.callback();
-      }), o.start = Date.now();
-    }));
-  }), L = W((o) => {
-    c((f) => {
-      const w = f.map((x) => x.id === o ? {
-        ...x,
-        transitionStatus: "ending",
-        height: 0
-      } : x), a = w.filter((x) => x.transitionStatus !== "ending");
-      return w.map((x) => {
-        if (x.transitionStatus === "ending")
-          return x;
-        const D = a.indexOf(x) >= v;
-        return {
-          ...x,
-          limited: D
-        };
-      });
-    });
-    const y = P.current.get(o);
-    y && y.timeout && (y.timeout.clear(), P.current.delete(o)), h.find((f) => f.id === o)?.onClose?.(), U(o), h.length === 1 && (s(!1), p(!1));
-  }), q = W((o) => {
-    c((T) => T.filter((f) => f.id !== o)), h.find((T) => T.id === o)?.onRemove?.();
-  }), H = W((o, y, T) => {
-    const f = Date.now(), w = F.current && !l && !d, a = w ? Le.create() : void 0;
-    a?.start(y, () => {
-      P.current.delete(o), T();
-    }), P.current.set(o, {
-      timeout: a,
-      start: w ? f : 0,
-      delay: y,
-      remaining: y,
-      callback: T
-    });
-  }), G = W((o) => {
-    const y = o.id || $e("toast"), T = {
-      ...o,
-      id: y,
-      transitionStatus: "starting"
-    };
-    c((w) => {
-      const a = [T, ...w], x = a.filter((D) => D.transitionStatus !== "ending");
-      if (x.length > v) {
-        const D = x.length - v, S = x.slice(-D);
-        return a.map((k) => S.some((Z) => Z.id === k.id) ? {
-          ...k,
-          limited: !0
-        } : {
-          ...k,
-          limited: !1
-        });
-      }
-      return a.map((D) => ({
-        ...D,
-        limited: !1
-      }));
-    });
-    const f = T.timeout ?? t;
-    return T.type !== "loading" && f > 0 && H(y, f, () => L(y)), (l || d || !F.current) && M(), y;
-  }), K = W((o, y) => {
-    c((T) => T.map((f) => f.id === o ? {
-      ...f,
-      ...y
-    } : f));
-  }), O = W((o, y) => {
-    const T = Ee(y.loading), f = G({
-      ...T,
-      type: "loading"
-    }), w = o.then((a) => {
-      const x = Ee(y.success, a);
-      K(f, {
-        ...x,
-        type: "success"
-      });
-      const D = x.timeout ?? t;
-      return D > 0 && H(f, D, () => L(f)), (l || d || !F.current) && M(), a;
-    }).catch((a) => {
-      const x = Ee(y.error, a);
-      K(f, {
-        ...x,
-        type: "error"
-      });
-      const D = x.timeout ?? t;
-      return D > 0 && H(f, D, () => L(f)), (l || d || !F.current) && M(), Promise.reject(a);
-    });
-    return {}.hasOwnProperty.call(y, "setPromise") && y.setPromise(w), w;
-  });
-  n.useEffect(function() {
-    return b ? b[" subscribe"](({
-      action: T,
-      options: f
-    }) => {
-      const w = f.id;
-      T === "promise" && f.promise ? O(f.promise, f) : T === "update" && w ? K(w, f) : T === "close" && w ? L(w) : G(f);
-    }) : void 0;
-  }, [G, K, H, t, b, O, L]);
-  const J = n.useMemo(() => ({
-    toasts: h,
-    setToasts: c,
-    hovering: l,
-    setHovering: s,
-    focused: d,
-    setFocused: p,
-    expanded: E,
-    add: G,
-    close: L,
-    remove: q,
-    update: K,
-    promise: O,
-    pauseTimers: M,
-    resumeTimers: _,
-    prevFocusElement: u,
-    setPrevFocusElement: R,
-    viewportRef: A,
-    scheduleTimer: H,
-    windowFocusedRef: F
-  }), [G, L, d, l, E, M, u, O, q, _, H, h, K]);
-  return /* @__PURE__ */ N(me.Provider, {
-    value: J,
-    children: r
-  });
-};
-process.env.NODE_ENV !== "production" && (Xe.displayName = "ToastProvider");
-const ze = /* @__PURE__ */ n.createContext(void 0);
-process.env.NODE_ENV !== "production" && (ze.displayName = "ToastViewportContext");
-let bt = /* @__PURE__ */ (function(e) {
-  return e.frontmostHeight = "--toast-frontmost-height", e;
-})({});
-const Ge = /* @__PURE__ */ n.forwardRef(function(i, r) {
-  const {
-    render: t,
-    className: v,
-    children: b,
-    ...h
-  } = i, {
-    toasts: c,
-    pauseTimers: l,
-    resumeTimers: s,
-    setHovering: d,
-    setFocused: p,
-    viewportRef: u,
-    windowFocusedRef: R,
-    prevFocusElement: E,
-    setPrevFocusElement: P,
-    expanded: A,
-    focused: F
-  } = Ie(), z = n.useRef(!1), U = n.useRef(!1), M = c.length, _ = c[0]?.height ?? 0, L = n.useMemo(() => c.some((a) => a.transitionStatus === "ending"), [c]);
-  n.useEffect(() => {
-    if (!u.current)
-      return;
-    function a(D) {
-      M !== 0 && D.key === "F6" && D.target !== u.current && (D.preventDefault(), P(pe(ne(u.current))), u.current?.focus({
-        preventScroll: !0
-      }), l(), p(!0));
-    }
-    const x = ke(u.current);
-    return x.addEventListener("keydown", a), () => {
-      x.removeEventListener("keydown", a);
-    };
-  }, [l, p, P, M, u]), n.useEffect(() => {
-    if (!u.current || !M)
-      return;
-    const a = ke(u.current);
-    function x(S) {
-      S.target === a && (R.current = !1, l());
-    }
-    function D(S) {
-      if (S.relatedTarget || S.target === a)
-        return;
-      const k = Ne(S), Z = pe(ne(u.current));
-      (!re(u.current, k) || !De(Z)) && s(), setTimeout(() => {
-        R.current = !0;
-      });
-    }
-    return a.addEventListener("blur", x, !0), a.addEventListener("focus", D, !0), () => {
-      a.removeEventListener("blur", x, !0), a.removeEventListener("focus", D, !0);
-    };
-  }, [
-    l,
-    s,
-    u,
-    R,
-    p,
-    // `viewportRef.current` isn't available on the first render,
-    // since the portal node hasn't yet been created.
-    // By adding this dependency, we ensure the window listeners
-    // are added when toasts have been created, once the ref is available.
-    M
-  ]), n.useEffect(() => {
-    const a = u.current;
-    if (!a || M === 0)
-      return;
-    const x = ne(a);
-    function D(S) {
-      if (S.pointerType !== "touch")
-        return;
-      const k = Ne(S);
-      re(a, k) || (s(), d(!1), p(!1));
-    }
-    return x.addEventListener("pointerdown", D, !0), () => {
-      x.removeEventListener("pointerdown", D, !0);
-    };
-  }, [M, s, p, d, u]);
-  function q(a) {
-    u.current && (z.current = !0, a.relatedTarget === u.current ? c[0]?.ref?.current?.focus() : E?.focus({
-      preventScroll: !0
-    }));
-  }
-  function H(a) {
-    a.key === "Tab" && a.shiftKey && a.target === u.current && (a.preventDefault(), E?.focus({
-      preventScroll: !0
-    }), s());
-  }
-  n.useEffect(() => {
-    !R.current || L || !U.current || (s(), d(!1), U.current = !1);
-  }, [L, s, d, R]);
-  function G() {
-    l(), d(!0), U.current = !1;
-  }
-  function K() {
-    c.some((a) => a.transitionStatus === "ending") ? U.current = !0 : (s(), d(!1));
-  }
-  function O() {
-    if (z.current) {
-      z.current = !1;
-      return;
-    }
-    F || De(ne(u.current).activeElement) && (p(!0), l());
-  }
-  function J(a) {
-    !F || re(u.current, a.relatedTarget) || (p(!1), s());
-  }
-  const o = {
-    tabIndex: -1,
-    role: "region",
-    "aria-live": "polite",
-    "aria-atomic": !1,
-    "aria-relevant": "additions text",
-    "aria-label": "Notifications",
-    onMouseEnter: G,
-    onMouseMove: G,
-    onMouseLeave: K,
-    onFocus: O,
-    onBlur: J,
-    onKeyDown: H,
-    onClick: O
-  }, y = n.useMemo(() => ({
-    expanded: A
-  }), [A]), T = oe("div", i, {
-    ref: [r, u],
-    state: y,
-    props: [o, {
-      style: {
-        [bt.frontmostHeight]: _ ? `${_}px` : void 0
-      }
-    }, h, {
-      children: /* @__PURE__ */ j(n.Fragment, {
-        children: [M > 0 && E && /* @__PURE__ */ N(Te, {
-          onFocus: q
-        }), b, M > 0 && E && /* @__PURE__ */ N(Te, {
-          onFocus: q
-        })]
-      })
-    }]
-  }), f = n.useMemo(() => ({
-    viewportRef: u
-  }), [u]), w = n.useMemo(() => c.filter((a) => a.priority === "high"), [c]);
-  return /* @__PURE__ */ j(ze.Provider, {
-    value: f,
-    children: [M > 0 && E && /* @__PURE__ */ N(Te, {
-      onFocus: q
-    }), T, !F && w.length > 0 && /* @__PURE__ */ N("div", {
-      style: xt,
-      children: w.map((a) => /* @__PURE__ */ j("div", {
-        role: "alert",
-        "aria-atomic": !0,
-        children: [/* @__PURE__ */ N("div", {
-          children: a.title
-        }), /* @__PURE__ */ N("div", {
-          children: a.description
-        })]
-      }, a.id))
-    })]
-  });
-});
-process.env.NODE_ENV !== "production" && (Ge.displayName = "ToastViewport");
-const Oe = /* @__PURE__ */ n.createContext(void 0);
-process.env.NODE_ENV !== "production" && (Oe.displayName = "ToastRootContext");
-function ie() {
-  const e = n.useContext(Oe);
-  if (!e)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: ToastRootContext is missing. Toast parts must be used within <Toast.Root>." : Pe(66));
-  return e;
-}
-let ee = /* @__PURE__ */ (function(e) {
-  return e.index = "--toast-index", e.offsetY = "--toast-offset-y", e.height = "--toast-height", e.swipeMovementX = "--toast-swipe-movement-x", e.swipeMovementY = "--toast-swipe-movement-y", e;
-})({});
-const Tt = {
-  ...vt,
-  swipeDirection(e) {
-    return e ? {
-      "data-swipe-direction": e
-    } : null;
-  }
-}, ae = 40, Et = 10, Q = 0.5, Dt = 1;
-function Ve(e, i, r) {
-  switch (e) {
-    case "up":
-      return -r;
-    case "down":
-      return r;
-    case "left":
-      return -i;
-    case "right":
-      return i;
-    default:
-      return 0;
-  }
-}
-function Nt(e) {
-  const r = window.getComputedStyle(e).transform;
-  let t = 0, v = 0, b = 1;
-  if (r && r !== "none") {
-    const h = r.match(/matrix(?:3d)?\(([^)]+)\)/);
-    if (h) {
-      const c = h[1].split(", ").map(parseFloat);
-      c.length === 6 ? (t = c[4], v = c[5], b = Math.sqrt(c[0] * c[0] + c[1] * c[1])) : c.length === 16 && (t = c[12], v = c[13], b = c[0]);
-    }
-  }
-  return {
-    x: t,
-    y: v,
-    scale: b
-  };
-}
-const Ke = /* @__PURE__ */ n.forwardRef(function(i, r) {
-  const {
-    toast: t,
-    render: v,
-    className: b,
-    swipeDirection: h = ["down", "right"],
-    ...c
-  } = i, l = t.positionerProps?.anchor !== void 0;
-  let s = [];
-  l || (s = Array.isArray(h) ? h : [h]);
-  const d = s.length > 0, {
-    toasts: p,
-    focused: u,
-    close: R,
-    remove: E,
-    setToasts: P,
-    pauseTimers: A,
-    expanded: F,
-    setHovering: z
-  } = Ie(), [U, M] = n.useState(void 0), [_, L] = n.useState(!1), [q, H] = n.useState(!1), [G, K] = n.useState(!1), [O, J] = n.useState({
-    x: 0,
-    y: 0
-  }), [o, y] = n.useState({
-    x: 0,
-    y: 0,
-    scale: 1
-  }), [T, f] = n.useState(), [w, a] = n.useState(), [x, D] = n.useState(null), S = n.useRef(null), k = n.useRef({
-    x: 0,
-    y: 0
-  }), Z = n.useRef({
-    x: 0,
-    y: 0,
-    scale: 1
-  }), ce = n.useRef(void 0), ge = n.useRef(0), ue = n.useRef(!1), Y = n.useRef({
-    x: 0,
-    y: 0
-  }), he = n.useRef(!1), ve = n.useMemo(() => p.indexOf(t), [t, p]), xe = n.useMemo(() => p.filter((m) => m.transitionStatus !== "ending").indexOf(t), [t, p]), qe = n.useMemo(() => p.slice(0, p.indexOf(t)).reduce((m, g) => m + (g.height || 0), 0), [p, t]);
-  ht({
-    open: t.transitionStatus !== "ending",
-    ref: S,
-    onComplete() {
-      t.transitionStatus === "ending" && E(t.id);
-    }
-  });
-  const le = W((m = !1) => {
-    const g = S.current;
-    if (!g)
-      return;
-    const C = g.style.height;
-    g.style.height = "auto";
-    const I = g.offsetHeight;
-    g.style.height = C;
-    function $() {
-      P((B) => B.map((V) => V.id === t.id ? {
-        ...V,
-        ref: S,
-        height: I,
-        transitionStatus: void 0
-      } : V));
-    }
-    m ? Ye.flushSync($) : $();
-  });
-  Ce(le, [le]);
-  function Je(m, g) {
-    let C = m, I = g;
-    return !s.includes("left") && !s.includes("right") ? C = m > 0 ? m ** Q : -(Math.abs(m) ** Q) : (!s.includes("right") && m > 0 && (C = m ** Q), !s.includes("left") && m < 0 && (C = -(Math.abs(m) ** Q))), !s.includes("up") && !s.includes("down") ? I = g > 0 ? g ** Q : -(Math.abs(g) ** Q) : (!s.includes("down") && g > 0 && (I = g ** Q), !s.includes("up") && g < 0 && (I = -(Math.abs(g) ** Q))), {
-      x: C,
-      y: I
-    };
-  }
-  function Qe(m) {
-    if (m.button !== 0)
-      return;
-    m.pointerType === "touch" && A();
-    const g = Ne(m.nativeEvent);
-    if (!(g && g.closest('button,a,input,textarea,[role="button"],[data-swipe-ignore]'))) {
-      if (ue.current = !1, ce.current = void 0, ge.current = 0, k.current = {
-        x: m.clientX,
-        y: m.clientY
-      }, Y.current = k.current, S.current) {
-        const I = Nt(S.current);
-        Z.current = I, y(I), J({
-          x: I.x,
-          y: I.y
-        });
-      }
-      z(!0), L(!0), H(!1), D(null), he.current = !0, S.current?.setPointerCapture(m.pointerId);
-    }
-  }
-  function Ze(m) {
-    if (!_)
-      return;
-    m.preventDefault(), he.current && (k.current = {
-      x: m.clientX,
-      y: m.clientY
-    }, he.current = !1);
-    const {
-      clientY: g,
-      clientX: C,
-      movementX: I,
-      movementY: $
-    } = m;
-    ($ < 0 && g > Y.current.y || $ > 0 && g < Y.current.y) && (Y.current = {
-      x: Y.current.x,
-      y: g
-    }), (I < 0 && C > Y.current.x || I > 0 && C < Y.current.x) && (Y.current = {
-      x: C,
-      y: Y.current.y
-    });
-    const B = C - k.current.x, V = g - k.current.y, ot = g - Y.current.y, at = C - Y.current.x;
-    if (!q && Math.sqrt(B * B + V * V) >= Dt && (H(!0), x === null)) {
-      const fe = s.includes("left") || s.includes("right"), ct = s.includes("up") || s.includes("down");
-      if (fe && ct) {
-        const ut = Math.abs(B), lt = Math.abs(V);
-        D(ut > lt ? "horizontal" : "vertical");
-      }
-    }
-    let X;
-    if (!ce.current)
-      x === "vertical" ? V > 0 ? X = "down" : V < 0 && (X = "up") : x === "horizontal" ? B > 0 ? X = "right" : B < 0 && (X = "left") : Math.abs(B) >= Math.abs(V) ? X = B > 0 ? "right" : "left" : X = V > 0 ? "down" : "up", X && s.includes(X) && (ce.current = X, ge.current = Ve(X, B, V), M(X));
-    else {
-      const be = ce.current, fe = Ve(be, at, ot);
-      fe > ae ? (ue.current = !1, M(be)) : !(s.includes("left") && s.includes("right")) && !(s.includes("up") && s.includes("down")) && ge.current - fe >= Et && (ue.current = !0);
-    }
-    const de = Je(B, V);
-    let ye = Z.current.x, we = Z.current.y;
-    x === "horizontal" ? (s.includes("left") || s.includes("right")) && (ye += de.x) : (x === "vertical" || (s.includes("left") || s.includes("right")) && (ye += de.x), (s.includes("up") || s.includes("down")) && (we += de.y)), J({
-      x: ye,
-      y: we
-    });
-  }
-  function et(m) {
-    if (!_)
-      return;
-    if (L(!1), H(!1), D(null), S.current?.releasePointerCapture(m.pointerId), ue.current) {
-      J({
-        x: o.x,
-        y: o.y
-      }), M(void 0);
-      return;
-    }
-    let g = !1;
-    const C = O.x - o.x, I = O.y - o.y;
-    let $;
-    for (const B of s) {
-      switch (B) {
-        case "right":
-          C > ae && (g = !0, $ = "right");
-          break;
-        case "left":
-          C < -ae && (g = !0, $ = "left");
-          break;
-        case "down":
-          I > ae && (g = !0, $ = "down");
-          break;
-        case "up":
-          I < -ae && (g = !0, $ = "up");
-          break;
-      }
-      if (g)
-        break;
-    }
-    g ? (M($), K(!0), R(t.id)) : (J({
-      x: o.x,
-      y: o.y
-    }), M(void 0));
-  }
-  function tt(m) {
-    if (m.key === "Escape") {
-      if (!S.current || !re(S.current, pe(ne(S.current))))
-        return;
-      R(t.id);
-    }
-  }
-  n.useEffect(() => {
-    if (!d)
-      return;
-    const m = S.current;
-    if (!m)
-      return;
-    function g(C) {
-      re(m, C.target) && C.preventDefault();
-    }
-    return m.addEventListener("touchmove", g, {
-      passive: !1
-    }), () => {
-      m.removeEventListener("touchmove", g);
-    };
-  }, [d]);
-  function nt() {
-    if (!_ && O.x === o.x && O.y === o.y && !G)
-      return {
-        [ee.swipeMovementX]: "0px",
-        [ee.swipeMovementY]: "0px"
-      };
-    const m = O.x - o.x, g = O.y - o.y;
-    return {
-      transition: _ ? "none" : void 0,
-      // While swiping, freeze the element at its current visual transform so it doesn't snap to the
-      // end position.
-      transform: _ ? `translateX(${O.x}px) translateY(${O.y}px) scale(${o.scale})` : void 0,
-      [ee.swipeMovementX]: `${m}px`,
-      [ee.swipeMovementY]: `${g}px`
-    };
-  }
-  const Fe = t.priority === "high", st = {
-    role: Fe ? "alertdialog" : "dialog",
-    tabIndex: 0,
-    "aria-modal": !1,
-    "aria-labelledby": T,
-    "aria-describedby": w,
-    "aria-hidden": Fe && !u ? !0 : void 0,
-    onPointerDown: d ? Qe : void 0,
-    onPointerMove: d ? Ze : void 0,
-    onPointerUp: d ? et : void 0,
-    onKeyDown: tt,
-    inert: yt(t.limited),
-    style: {
-      ...nt(),
-      [ee.index]: t.transitionStatus === "ending" ? ve : xe,
-      [ee.offsetY]: `${qe}px`,
-      [ee.height]: t.height ? `${t.height}px` : void 0
-    }
-  }, te = n.useMemo(() => ({
-    rootRef: S,
-    toast: t,
-    titleId: T,
-    setTitleId: f,
-    descriptionId: w,
-    setDescriptionId: a,
-    swiping: _,
-    swipeDirection: U,
-    recalculateHeight: le,
-    index: ve,
-    visibleIndex: xe,
-    expanded: F
-  }), [t, T, w, _, U, le, ve, xe, F]), rt = n.useMemo(() => ({
-    transitionStatus: t.transitionStatus,
-    expanded: F,
-    limited: t.limited || !1,
-    type: t.type,
-    swiping: te.swiping,
-    swipeDirection: te.swipeDirection
-  }), [F, t.transitionStatus, t.limited, t.type, te.swiping, te.swipeDirection]), it = oe("div", i, {
-    ref: [r, te.rootRef],
-    state: rt,
-    stateAttributesMapping: Tt,
-    props: [st, c]
-  });
-  return /* @__PURE__ */ N(Oe.Provider, {
-    value: te,
-    children: it
-  });
-});
-process.env.NODE_ENV !== "production" && (Ke.displayName = "ToastRoot");
-const Se = /* @__PURE__ */ n.forwardRef(function(i, r) {
-  const {
-    render: t,
-    className: v,
-    id: b,
-    children: h,
-    ...c
-  } = i, {
-    toast: l
-  } = ie(), s = h ?? l.description, d = !!s, p = Ae(b), {
-    setDescriptionId: u
-  } = ie();
-  Ce(() => {
-    if (d)
-      return u(p), () => {
-        u(void 0);
-      };
-  }, [d, p, u]);
-  const R = n.useMemo(() => ({
-    type: l.type
-  }), [l.type]), E = oe("p", i, {
-    ref: r,
-    state: R,
-    props: {
-      ...c,
-      id: p,
-      children: s
-    }
-  });
-  return d ? E : null;
-});
-process.env.NODE_ENV !== "production" && (Se.displayName = "ToastDescription");
-const Re = /* @__PURE__ */ n.forwardRef(function(i, r) {
-  const {
-    render: t,
-    className: v,
-    id: b,
-    children: h,
-    ...c
-  } = i, {
-    toast: l
-  } = ie(), s = h ?? l.title, d = !!s, p = Ae(b), {
-    setTitleId: u
-  } = ie();
-  Ce(() => {
-    if (d)
-      return u(p), () => {
-        u(void 0);
-      };
-  }, [d, p, u]);
-  const R = n.useMemo(() => ({
-    type: l.type
-  }), [l.type]), E = oe("h2", i, {
-    ref: r,
-    state: R,
-    props: {
-      ...c,
-      id: p,
-      children: s
-    }
-  });
-  return d ? E : null;
-});
-process.env.NODE_ENV !== "production" && (Re.displayName = "ToastTitle");
-const Me = /* @__PURE__ */ n.forwardRef(function(i, r) {
-  const {
-    render: t,
-    className: v,
-    disabled: b,
-    nativeButton: h = !0,
-    ...c
-  } = i, {
-    close: l,
-    expanded: s
-  } = Ie(), {
-    toast: d
-  } = ie(), [p, u] = n.useState(!1), {
-    getButtonProps: R,
-    buttonRef: E
-  } = He({
-    disabled: b,
-    native: h
-  }), P = n.useMemo(() => ({
-    type: d.type
-  }), [d.type]);
-  return oe("button", i, {
-    ref: [r, E],
-    state: P,
-    props: [{
-      "aria-hidden": !s && !p,
-      onClick() {
-        l(d.id);
-      },
-      onFocus() {
-        u(!0);
-      },
-      onBlur() {
-        u(!1);
-      }
-    }, c, R]
-  });
-});
-process.env.NODE_ENV !== "production" && (Me.displayName = "ToastClose");
-const Ue = /* @__PURE__ */ n.forwardRef(function(i, r) {
-  const {
-    render: t,
-    className: v,
-    disabled: b,
-    nativeButton: h = !0,
-    ...c
-  } = i, {
-    toast: l
-  } = ie(), s = l.actionProps?.children ?? c.children, d = !!s, {
-    getButtonProps: p,
-    buttonRef: u
-  } = He({
-    disabled: b,
-    native: h
-  }), R = n.useMemo(() => ({
-    type: l.type
-  }), [l.type]), E = oe("button", i, {
-    ref: [r, u],
-    state: R,
-    props: [c, l.actionProps, p, {
-      children: s
-    }]
-  });
-  return d ? E : null;
-});
-process.env.NODE_ENV !== "production" && (Ue.displayName = "ToastAction");
-const We = /* @__PURE__ */ n.forwardRef(function(i, r) {
-  const {
-    children: t,
-    container: v,
-    className: b,
-    render: h,
-    ...c
-  } = i, {
-    portalNode: l,
-    portalSubtree: s
-  } = wt({
-    container: v,
-    ref: r,
-    componentProps: i,
-    elementProps: c
-  });
-  return !s && !l ? null : /* @__PURE__ */ j(n.Fragment, {
-    children: [s, l && /* @__PURE__ */ Ye.createPortal(t, l)]
-  });
-});
-process.env.NODE_ENV !== "production" && (We.displayName = "FloatingPortalLite");
-const St = We;
-function Rt() {
-  const e = n.useContext(me);
-  if (!e)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: useToastManager must be used within <Toast.Provider>." : Pe(73));
-  const {
-    toasts: i,
-    add: r,
-    close: t,
-    update: v,
-    promise: b
-  } = e;
-  return n.useMemo(() => ({
-    toasts: i,
-    add: r,
-    close: t,
-    update: v,
-    promise: b
-  }), [i, r, t, v, b]);
-}
-function Mt() {
-  const e = [];
-  function i(r) {
-    e.forEach((t) => t(r));
-  }
-  return {
-    // This should be private aside from ToastProvider needing to access it.
-    // https://x.com/drosenwasser/status/1816947740032872664
-    " subscribe": function(t) {
-      return e.push(t), () => {
-        const v = e.indexOf(t);
-        v !== -1 && e.splice(v, 1);
-      };
-    },
-    add(r) {
-      const t = r.id || $e("toast"), v = {
-        ...r,
-        id: t,
-        transitionStatus: "starting"
-      };
-      return i({
-        action: "add",
-        options: v
-      }), t;
-    },
-    close(r) {
-      i({
-        action: "close",
-        options: {
-          id: r
-        }
-      });
-    },
-    update(r, t) {
-      i({
-        action: "update",
-        options: {
-          ...t,
-          id: r
-        }
-      });
-    },
-    promise(r, t) {
-      let v = r;
-      return i({
-        action: "promise",
-        options: {
-          ...t,
-          promise: r,
-          setPromise(b) {
-            v = b;
-          }
-        }
-      }), v;
-    }
-  };
-}
-const Pt = ft(
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { Toast as s } from "@base-ui/react/toast";
+import { a as I } from "../Slot-D2Bbf8Gw.mjs";
+import { cva as h, cx as d } from "class-variance-authority";
+import { B as N } from "../Button-C3C0aixy.mjs";
+import { I as w } from "../Icon-Ck-dhfLd.mjs";
+import { I as C } from "../IconButton-C62-axzv.mjs";
+import { Close as B } from "@spark-ui/icons/Close";
+import * as P from "react";
+const D = h(
   [
     "gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg",
     "absolute right-0 bottom-0 left-auto mr-0",
@@ -1065,161 +173,191 @@ const Pt = ft(
     }
   }
 );
-function Ct(e) {
-  return e === "surfaceInverse" ? "surface" : e === "surface" ? "surfaceInverse" : e === "error" ? "danger" : e;
+h(
+  [
+    "inline-grid items-center",
+    "col-start-1 row-start-1",
+    "pl-md pr-lg"
+    // applying padding on the parent prevents VoiceOver on Safari from reading snackbar content 🤷
+  ],
+  {
+    variants: {
+      /**
+       * Force action button displaying on a new line
+       * @default false
+       */
+      actionOnNewline: {
+        true: [
+          "grid-rows-[52px_1fr_52px]",
+          "grid-cols-[min-content_1fr_min-content]",
+          "[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']"
+        ],
+        false: [
+          "grid-cols-[min-content_1fr_min-content_min-content]",
+          "[grid-template-areas:'icon_message_action_close']"
+        ]
+      }
+    },
+    defaultVariants: {
+      actionOnNewline: !1
+    }
+  }
+);
+function M(t) {
+  return t === "surfaceInverse" ? "surface" : t === "surface" ? "surfaceInverse" : t === "error" ? "danger" : t;
 }
-function It(e) {
-  return e === "surfaceInverse" ? "surfaceInverse" : e === "surface" ? "surface" : e === "error" ? "danger" : e;
+function Y(t) {
+  return t === "surfaceInverse" ? "surfaceInverse" : t === "surface" ? "surface" : t === "error" ? "danger" : t;
 }
-const Ot = (e, { toastDesign: i, toastIntent: r }) => {
-  if (!e) return {};
-  const { design: t, intent: v, className: b, onClick: h, ...c } = e;
+const k = (t, { toastDesign: n, toastIntent: a }) => {
+  if (!t) return {};
+  const { design: c, intent: o, className: l, onClick: f, ...i } = t;
   return {
-    design: t ?? i,
-    intent: v ?? Ct(r),
-    className: se("ml-auto", b),
-    onClick: h,
-    ...c
+    design: c ?? n,
+    intent: o ?? M(a),
+    className: d("ml-auto", l),
+    onClick: f,
+    ...i
   };
-}, Ft = (e, i, r) => ({
-  key: e.id,
+}, z = (t, n, a) => ({
+  key: t.id,
   swipeDirection: ["down", "right"],
-  toast: e,
-  className: se(Pt({ design: i, intent: r })),
+  toast: t,
+  className: d(D({ design: n, intent: a })),
   style: {
     "--gap": "var(--spacing-md)",
     "--offset-y": "calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))"
   }
 });
-function _t({ toast: e }) {
+function A({ toast: t }) {
   const {
-    icon: i,
-    intent: r = "neutral",
-    design: t = "filled",
-    action: v,
-    isClosable: b,
-    closeLabel: h = "Close",
-    compact: c = !1
-  } = e.data ?? {}, l = v?.close ? Me : Ue, s = Ot(v, { toastDesign: t, toastIntent: r }), d = Ft(e, t, r), p = (E) => b ? /* @__PURE__ */ N(
-    Me,
+    icon: n,
+    intent: a = "neutral",
+    design: c = "filled",
+    action: o,
+    isClosable: l,
+    closeLabel: f = "Close",
+    compact: i = !1
+  } = t.data ?? {}, x = o?.close ? s.Close : s.Action, m = k(o, { toastDesign: c, toastIntent: a }), v = z(t, c, a), u = (r) => l ? /* @__PURE__ */ e(
+    s.Close,
     {
-      className: E,
-      render: /* @__PURE__ */ N(
-        mt,
+      className: r,
+      render: /* @__PURE__ */ e(
+        C,
         {
-          "aria-label": h,
-          design: t,
-          intent: It(r),
+          "aria-label": f,
+          design: c,
+          intent: Y(a),
           size: "md"
         }
       ),
-      children: /* @__PURE__ */ N(_e, { children: /* @__PURE__ */ N(gt, {}) })
+      children: /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(B, {}) })
     }
-  ) : null, u = () => {
-    const E = e.data?.title ?? e.title, P = !!(e.data?.description ?? e.description);
-    return typeof E != "string" && E !== void 0 ? /* @__PURE__ */ N(
-      Re,
+  ) : null, b = () => {
+    const r = t.data?.title ?? t.title, p = !!(t.data?.description ?? t.description);
+    return typeof r != "string" && r !== void 0 ? /* @__PURE__ */ e(
+      s.Title,
       {
-        className: P ? "text-headline-2" : "text-body-1",
-        render: /* @__PURE__ */ N("div", {}),
-        children: E
+        className: p ? "text-headline-2" : "text-body-1",
+        render: /* @__PURE__ */ e("div", {}),
+        children: r
       }
-    ) : /* @__PURE__ */ N(Re, { className: P ? "text-headline-2" : "text-body-1" });
-  }, R = () => {
-    const E = e.data?.description ?? e.description;
-    return E ? typeof E != "string" ? /* @__PURE__ */ N(Se, { className: "text-body-1", render: /* @__PURE__ */ N("div", {}), children: E }) : /* @__PURE__ */ N(Se, { className: "text-body-1" }) : null;
+    ) : /* @__PURE__ */ e(s.Title, { className: p ? "text-headline-2" : "text-body-1" });
+  }, y = () => {
+    const r = t.data?.description ?? t.description;
+    return r ? typeof r != "string" ? /* @__PURE__ */ e(s.Description, { className: "text-body-1", render: /* @__PURE__ */ e("div", {}), children: r }) : /* @__PURE__ */ e(s.Description, { className: "text-body-1" }) : null;
   };
-  return /* @__PURE__ */ N(Ke, { ...d, children: /* @__PURE__ */ j("div", { className: se("flex", c ? "gap-lg items-center" : "gap-md flex-col"), children: [
-    /* @__PURE__ */ j("div", { className: "gap-lg p-md flex grow items-center", children: [
-      i && /* @__PURE__ */ N(_e, { size: "md", children: i }),
-      /* @__PURE__ */ j(
+  return /* @__PURE__ */ e(s.Root, { ...v, children: /* @__PURE__ */ g("div", { className: d("flex", i ? "gap-lg items-center" : "gap-md flex-col"), children: [
+    /* @__PURE__ */ g("div", { className: "gap-lg p-md flex grow items-center", children: [
+      n && /* @__PURE__ */ e(w, { size: "md", children: n }),
+      /* @__PURE__ */ g(
         "div",
         {
-          className: se(
+          className: d(
             "gap-sm flex flex-col",
-            c && "flex-1",
-            !c && b && "pr-3xl"
+            i && "flex-1",
+            !i && l && "pr-3xl"
           ),
           children: [
-            u(),
-            R()
+            b(),
+            y()
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ j("div", { className: se("flex"), children: [
-      v && /* @__PURE__ */ N(l, { render: /* @__PURE__ */ N(pt, { ...s }), children: v.label }),
-      c && p()
+    /* @__PURE__ */ g("div", { className: d("flex"), children: [
+      o && /* @__PURE__ */ e(x, { render: /* @__PURE__ */ e(N, { ...m }), children: o.label }),
+      i && u()
     ] }),
-    !c && p("top-md right-md absolute")
+    !i && u("top-md right-md absolute")
   ] }) });
 }
-function je() {
-  const e = Rt(), i = n.useCallback(() => {
-    e.toasts.forEach(({ id: r }) => e.close(r));
-  }, [e]);
+function _() {
+  const t = s.useToastManager(), n = P.useCallback(() => {
+    t.toasts.forEach(({ id: a }) => t.close(a));
+  }, [t]);
   return {
-    ...e,
-    closeAll: i
+    ...t,
+    closeAll: n
   };
 }
-function Lt() {
-  const { toasts: e } = je();
-  return e.map((i) => /* @__PURE__ */ N(_t, { toast: i }, i.id));
+function V() {
+  const { toasts: t } = _();
+  return t.map((n) => /* @__PURE__ */ e(A, { toast: n }, n.id));
 }
-function Kt({ children: e, limit: i = 3, ...r }) {
-  return /* @__PURE__ */ j(Xe, { limit: i, ...r, children: [
-    /* @__PURE__ */ N(St, { children: /* @__PURE__ */ N(
-      Ge,
+function q({ children: t, limit: n = 3, ...a }) {
+  return /* @__PURE__ */ g(s.Provider, { limit: n, ...a, children: [
+    /* @__PURE__ */ e(s.Portal, { children: /* @__PURE__ */ e(
+      s.Viewport,
       {
-        className: se(
+        className: d(
           "z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end"
         ),
-        children: /* @__PURE__ */ N(Lt, {})
+        children: /* @__PURE__ */ e(V, {})
       }
     ) }),
-    e
+    t
   ] });
 }
-function Ut({
-  children: e,
-  onClick: i,
-  asChild: r = !1,
-  title: t,
-  description: v,
-  timeout: b = 5e3,
-  design: h = "filled",
-  intent: c = "neutral",
-  isClosable: l = !0,
-  icon: s,
-  action: d,
-  compact: p,
-  priority: u = "low"
+function F({
+  children: t,
+  onClick: n,
+  asChild: a = !1,
+  title: c,
+  description: o,
+  timeout: l = 5e3,
+  design: f = "filled",
+  intent: i = "neutral",
+  isClosable: x = !0,
+  icon: m,
+  action: v,
+  compact: u,
+  priority: b = "low"
 }) {
-  const R = je(), E = r ? dt : "button";
-  function P(A) {
-    i?.(A), R.add({
-      title: t,
-      description: v,
-      timeout: b,
-      priority: u,
+  const y = _(), r = a ? I : "button";
+  function p(T) {
+    n?.(T), y.add({
+      title: c,
+      description: o,
+      timeout: l,
+      priority: b,
       data: {
-        design: h,
-        intent: c,
-        isClosable: l,
-        ...s && { icon: s },
-        action: d,
-        ...p !== void 0 && { compact: p }
+        design: f,
+        intent: i,
+        isClosable: x,
+        ...m && { icon: m },
+        action: v,
+        ...u !== void 0 && { compact: u }
       }
     });
   }
-  return /* @__PURE__ */ N(E, { ...!r && { type: "button" }, onClick: P, children: e });
+  return /* @__PURE__ */ e(r, { ...!a && { type: "button" }, onClick: p, children: t });
 }
-const Wt = Mt;
+const G = s.createToastManager;
 export {
-  Kt as ToastProvider,
-  Ut as ToastTrigger,
-  Wt as createToastManager,
-  je as useToastManager
+  q as ToastProvider,
+  F as ToastTrigger,
+  G as createToastManager,
+  _ as useToastManager
 };
 //# sourceMappingURL=index.mjs.map