@koide-labs/ui 0.0.0 → 0.0.2

package/dist/components/toast/toast.js

@@ -0,0 +1,878 @@
+import { jsx as E, jsxs as re } from "react/jsx-runtime";
+import { c as rt } from "../../clsx-OuTLNxxd.js";
+import { Button as st } from "../button/index.js";
+import { Heading as ot } from "../heading/index.js";
+import { IconButton as it } from "../icon-button/index.js";
+import { Surface as at } from "../surface/index.js";
+import { Text as ct } from "../text/index.js";
+import { View as xe } from "../view/index.js";
+import { T as ut, a as Re, u as lt } from "../../use-toast-manager-Dq-44AuW.js";
+import * as e from "react";
+import { o as ne } from "../../owner-rKN292Q9.js";
+import { u as U } from "../../useStableCallback-CkTrVkNX.js";
+import { T as Pe } from "../../useTimeout-CflX-kz3.js";
+import { h as de, f as se, m as Ee, e as be } from "../../element-CZEOj04G.js";
+import { F as ft } from "../../FloatingPortalLite-DVyq6YhV.js";
+import { v as dt } from "../../visuallyHidden-CpJ-mhai.js";
+import { F as Te } from "../../FloatingPortal-tWyuKRSN.js";
+import { u as ie } from "../../useRenderElement-DwToLA61.js";
+import { d as Oe } from "../../floating-ui.utils.dom-C7FS5id0.js";
+import * as mt from "react-dom";
+import { i as pt } from "../../inertValue-BCYGsdmf.js";
+import { u as Se } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { f as ht } from "../../formatErrorMessage-BqPuTBN-.js";
+import { a as gt, t as vt } from "../../useOpenChangeComplete-Dse9kY9E.js";
+import { u as _t } from "../../useId-C5kyn6tA.js";
+import { u as wt } from "../../useButton-DfIwsdb8.js";
+import '../../toast.css';let Ce = 0;
+function yt(f) {
+  return Ce += 1, `${f}-${Math.random().toString(36).slice(2, 6)}-${Ce}`;
+}
+function De(f, d) {
+  if (typeof f == "string")
+    return {
+      description: f
+    };
+  if (typeof f == "function") {
+    const v = f(d);
+    return typeof v == "string" ? {
+      description: v
+    } : v;
+  }
+  return f;
+}
+const Ie = function(d) {
+  const {
+    children: v,
+    timeout: s = 5e3,
+    limit: z = 3,
+    toastManager: P
+  } = d, [w, c] = e.useState([]), [_, r] = e.useState(!1), [p, y] = e.useState(!1), [u, R] = e.useState(null);
+  w.length === 0 && (_ && r(!1), p && y(!1));
+  const S = _ || p, M = e.useRef(/* @__PURE__ */ new Map()), Y = e.useRef(null), C = e.useRef(!0), X = e.useRef(!1);
+  function j(t) {
+    const m = de(ne(Y.current));
+    if (!Y.current || !se(Y.current, m) || !Ee(m))
+      return;
+    const g = w.findIndex((n) => n.id === t);
+    let o = null, h = g + 1;
+    for (; h < w.length; ) {
+      if (w[h].transitionStatus !== "ending") {
+        o = w[h];
+        break;
+      }
+      h += 1;
+    }
+    if (!o)
+      for (h = g - 1; h >= 0; ) {
+        if (w[h].transitionStatus !== "ending") {
+          o = w[h];
+          break;
+        }
+        h -= 1;
+      }
+    o ? o.ref?.current?.focus() : u?.focus({
+      preventScroll: !0
+    });
+  }
+  const D = U(() => {
+    X.current || (X.current = !0, M.current.forEach((t) => {
+      if (t.timeout) {
+        t.timeout.clear();
+        const m = Date.now() - t.start, g = t.delay - m;
+        t.remaining = g > 0 ? g : 0;
+      }
+    }));
+  }), F = U(() => {
+    X.current && (X.current = !1, M.current.forEach((t, m) => {
+      t.remaining = t.remaining > 0 ? t.remaining : t.delay, t.timeout ??= Pe.create(), t.timeout.start(t.remaining, () => {
+        M.current.delete(m), t.callback();
+      }), t.start = Date.now();
+    }));
+  }), k = U((t) => {
+    c((o) => {
+      const h = o.map((l) => l.id === t ? {
+        ...l,
+        transitionStatus: "ending",
+        height: 0
+      } : l), n = h.filter((l) => l.transitionStatus !== "ending");
+      return h.map((l) => {
+        if (l.transitionStatus === "ending")
+          return l;
+        const x = n.indexOf(l) >= z;
+        return {
+          ...l,
+          limited: x
+        };
+      });
+    });
+    const m = M.current.get(t);
+    m && m.timeout && (m.timeout.clear(), M.current.delete(t)), w.find((o) => o.id === t)?.onClose?.(), j(t), w.length === 1 && (r(!1), y(!1));
+  }), q = U((t) => {
+    c((g) => g.filter((o) => o.id !== t)), w.find((g) => g.id === t)?.onRemove?.();
+  }), V = U((t, m, g) => {
+    const o = Date.now(), h = C.current && !_ && !p, n = h ? Pe.create() : void 0;
+    n?.start(m, () => {
+      M.current.delete(t), g();
+    }), M.current.set(t, {
+      timeout: n,
+      start: h ? o : 0,
+      delay: m,
+      remaining: m,
+      callback: g
+    });
+  }), G = U((t) => {
+    const m = t.id || yt("toast"), g = {
+      ...t,
+      id: m,
+      transitionStatus: "starting"
+    };
+    c((h) => {
+      const n = [g, ...h], l = n.filter((x) => x.transitionStatus !== "ending");
+      if (l.length > z) {
+        const x = l.length - z, T = l.slice(-x);
+        return n.map((I) => T.some((Z) => Z.id === I.id) ? {
+          ...I,
+          limited: !0
+        } : {
+          ...I,
+          limited: !1
+        });
+      }
+      return n.map((x) => ({
+        ...x,
+        limited: !1
+      }));
+    });
+    const o = g.timeout ?? s;
+    return g.type !== "loading" && o > 0 && V(m, o, () => k(m)), (_ || p || !C.current) && D(), m;
+  }), K = U((t, m) => {
+    c((g) => g.map((o) => o.id === t ? {
+      ...o,
+      ...m
+    } : o));
+  }), O = U((t, m) => {
+    const g = De(m.loading), o = G({
+      ...g,
+      type: "loading"
+    }), h = t.then((n) => {
+      const l = De(m.success, n);
+      K(o, {
+        ...l,
+        type: "success"
+      });
+      const x = l.timeout ?? s;
+      return x > 0 && V(o, x, () => k(o)), (_ || p || !C.current) && D(), n;
+    }).catch((n) => {
+      const l = De(m.error, n);
+      K(o, {
+        ...l,
+        type: "error"
+      });
+      const x = l.timeout ?? s;
+      return x > 0 && V(o, x, () => k(o)), (_ || p || !C.current) && D(), Promise.reject(n);
+    });
+    return {}.hasOwnProperty.call(m, "setPromise") && m.setPromise(h), h;
+  });
+  e.useEffect(function() {
+    return P ? P[" subscribe"](({
+      action: g,
+      options: o
+    }) => {
+      const h = o.id;
+      g === "promise" && o.promise ? O(o.promise, o) : g === "update" && h ? K(h, o) : g === "close" && h ? k(h) : G(o);
+    }) : void 0;
+  }, [G, K, V, s, P, O, k]);
+  const J = e.useMemo(() => ({
+    toasts: w,
+    setToasts: c,
+    hovering: _,
+    setHovering: r,
+    focused: p,
+    setFocused: y,
+    expanded: S,
+    add: G,
+    close: k,
+    remove: q,
+    update: K,
+    promise: O,
+    pauseTimers: D,
+    resumeTimers: F,
+    prevFocusElement: u,
+    setPrevFocusElement: R,
+    viewportRef: Y,
+    scheduleTimer: V,
+    windowFocusedRef: C
+  }), [G, k, p, _, S, D, u, O, q, F, V, w, K]);
+  return /* @__PURE__ */ E(ut.Provider, {
+    value: J,
+    children: v
+  });
+};
+process.env.NODE_ENV !== "production" && (Ie.displayName = "ToastProvider");
+const Le = /* @__PURE__ */ e.createContext(void 0);
+process.env.NODE_ENV !== "production" && (Le.displayName = "ToastViewportContext");
+let xt = /* @__PURE__ */ (function(f) {
+  return f.frontmostHeight = "--toast-frontmost-height", f;
+})({});
+const He = /* @__PURE__ */ e.forwardRef(function(d, v) {
+  const {
+    render: s,
+    className: z,
+    children: P,
+    ...w
+  } = d, {
+    toasts: c,
+    pauseTimers: _,
+    resumeTimers: r,
+    setHovering: p,
+    setFocused: y,
+    viewportRef: u,
+    windowFocusedRef: R,
+    prevFocusElement: S,
+    setPrevFocusElement: M,
+    expanded: Y,
+    focused: C
+  } = Re(), X = e.useRef(!1), j = e.useRef(!1), D = c.length, F = c[0]?.height ?? 0, k = e.useMemo(() => c.some((n) => n.transitionStatus === "ending"), [c]);
+  e.useEffect(() => {
+    if (!u.current)
+      return;
+    function n(x) {
+      D !== 0 && x.key === "F6" && x.target !== u.current && (x.preventDefault(), M(de(ne(u.current))), u.current?.focus({
+        preventScroll: !0
+      }), _(), y(!0));
+    }
+    const l = Oe(u.current);
+    return l.addEventListener("keydown", n), () => {
+      l.removeEventListener("keydown", n);
+    };
+  }, [_, y, M, D, u]), e.useEffect(() => {
+    if (!u.current || !D)
+      return;
+    const n = Oe(u.current);
+    function l(T) {
+      T.target === n && (R.current = !1, _());
+    }
+    function x(T) {
+      if (T.relatedTarget || T.target === n)
+        return;
+      const I = be(T), Z = de(ne(u.current));
+      (!se(u.current, I) || !Ee(Z)) && r(), setTimeout(() => {
+        R.current = !0;
+      });
+    }
+    return n.addEventListener("blur", l, !0), n.addEventListener("focus", x, !0), () => {
+      n.removeEventListener("blur", l, !0), n.removeEventListener("focus", x, !0);
+    };
+  }, [
+    _,
+    r,
+    u,
+    R,
+    y,
+    // `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.
+    D
+  ]), e.useEffect(() => {
+    const n = u.current;
+    if (!n || D === 0)
+      return;
+    const l = ne(n);
+    function x(T) {
+      if (T.pointerType !== "touch")
+        return;
+      const I = be(T);
+      se(n, I) || (r(), p(!1), y(!1));
+    }
+    return l.addEventListener("pointerdown", x, !0), () => {
+      l.removeEventListener("pointerdown", x, !0);
+    };
+  }, [D, r, y, p, u]);
+  function q(n) {
+    u.current && (X.current = !0, n.relatedTarget === u.current ? c[0]?.ref?.current?.focus() : S?.focus({
+      preventScroll: !0
+    }));
+  }
+  function V(n) {
+    n.key === "Tab" && n.shiftKey && n.target === u.current && (n.preventDefault(), S?.focus({
+      preventScroll: !0
+    }), r());
+  }
+  e.useEffect(() => {
+    !R.current || k || !j.current || (r(), p(!1), j.current = !1);
+  }, [k, r, p, R]);
+  function G() {
+    _(), p(!0), j.current = !1;
+  }
+  function K() {
+    c.some((n) => n.transitionStatus === "ending") ? j.current = !0 : (r(), p(!1));
+  }
+  function O() {
+    if (X.current) {
+      X.current = !1;
+      return;
+    }
+    C || Ee(ne(u.current).activeElement) && (y(!0), _());
+  }
+  function J(n) {
+    !C || se(u.current, n.relatedTarget) || (y(!1), r());
+  }
+  const t = {
+    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: V,
+    onClick: O
+  }, m = e.useMemo(() => ({
+    expanded: Y
+  }), [Y]), g = ie("div", d, {
+    ref: [v, u],
+    state: m,
+    props: [t, {
+      style: {
+        [xt.frontmostHeight]: F ? `${F}px` : void 0
+      }
+    }, w, {
+      children: /* @__PURE__ */ re(e.Fragment, {
+        children: [D > 0 && S && /* @__PURE__ */ E(Te, {
+          onFocus: q
+        }), P, D > 0 && S && /* @__PURE__ */ E(Te, {
+          onFocus: q
+        })]
+      })
+    }]
+  }), o = e.useMemo(() => ({
+    viewportRef: u
+  }), [u]), h = e.useMemo(() => c.filter((n) => n.priority === "high"), [c]);
+  return /* @__PURE__ */ re(Le.Provider, {
+    value: o,
+    children: [D > 0 && S && /* @__PURE__ */ E(Te, {
+      onFocus: q
+    }), g, !C && h.length > 0 && /* @__PURE__ */ E("div", {
+      style: dt,
+      children: h.map((n) => /* @__PURE__ */ re("div", {
+        role: "alert",
+        "aria-atomic": !0,
+        children: [/* @__PURE__ */ E("div", {
+          children: n.title
+        }), /* @__PURE__ */ E("div", {
+          children: n.description
+        })]
+      }, n.id))
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (He.displayName = "ToastViewport");
+const Me = /* @__PURE__ */ e.createContext(void 0);
+process.env.NODE_ENV !== "production" && (Me.displayName = "ToastRootContext");
+function me() {
+  const f = e.useContext(Me);
+  if (!f)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: ToastRootContext is missing. Toast parts must be used within <Toast.Root>." : ht(66));
+  return f;
+}
+let ee = /* @__PURE__ */ (function(f) {
+  return f.index = "--toast-index", f.offsetY = "--toast-offset-y", f.height = "--toast-height", f.swipeMovementX = "--toast-swipe-movement-x", f.swipeMovementY = "--toast-swipe-movement-y", f;
+})({});
+const Tt = {
+  ...vt,
+  swipeDirection(f) {
+    return f ? {
+      "data-swipe-direction": f
+    } : null;
+  }
+}, oe = 40, Dt = 10, Q = 0.5, Et = 1;
+function Fe(f, d, v) {
+  switch (f) {
+    case "up":
+      return -v;
+    case "down":
+      return v;
+    case "left":
+      return -d;
+    case "right":
+      return d;
+    default:
+      return 0;
+  }
+}
+function bt(f) {
+  const v = window.getComputedStyle(f).transform;
+  let s = 0, z = 0, P = 1;
+  if (v && v !== "none") {
+    const w = v.match(/matrix(?:3d)?\(([^)]+)\)/);
+    if (w) {
+      const c = w[1].split(", ").map(parseFloat);
+      c.length === 6 ? (s = c[4], z = c[5], P = Math.sqrt(c[0] * c[0] + c[1] * c[1])) : c.length === 16 && (s = c[12], z = c[13], P = c[0]);
+    }
+  }
+  return {
+    x: s,
+    y: z,
+    scale: P
+  };
+}
+const ze = /* @__PURE__ */ e.forwardRef(function(d, v) {
+  const {
+    toast: s,
+    render: z,
+    className: P,
+    swipeDirection: w = ["down", "right"],
+    ...c
+  } = d, _ = s.positionerProps?.anchor !== void 0;
+  let r = [];
+  _ || (r = Array.isArray(w) ? w : [w]);
+  const p = r.length > 0, {
+    toasts: y,
+    focused: u,
+    close: R,
+    remove: S,
+    setToasts: M,
+    pauseTimers: Y,
+    expanded: C,
+    setHovering: X
+  } = Re(), [j, D] = e.useState(void 0), [F, k] = e.useState(!1), [q, V] = e.useState(!1), [G, K] = e.useState(!1), [O, J] = e.useState({
+    x: 0,
+    y: 0
+  }), [t, m] = e.useState({
+    x: 0,
+    y: 0,
+    scale: 1
+  }), [g, o] = e.useState(), [h, n] = e.useState(), [l, x] = e.useState(null), T = e.useRef(null), I = e.useRef({
+    x: 0,
+    y: 0
+  }), Z = e.useRef({
+    x: 0,
+    y: 0,
+    scale: 1
+  }), ae = e.useRef(void 0), pe = e.useRef(0), ce = e.useRef(!1), $ = e.useRef({
+    x: 0,
+    y: 0
+  }), he = e.useRef(!1), ge = e.useMemo(() => y.indexOf(s), [s, y]), ve = e.useMemo(() => y.filter((i) => i.transitionStatus !== "ending").indexOf(s), [s, y]), Be = e.useMemo(() => y.slice(0, y.indexOf(s)).reduce((i, a) => i + (a.height || 0), 0), [y, s]);
+  gt({
+    open: s.transitionStatus !== "ending",
+    ref: T,
+    onComplete() {
+      s.transitionStatus === "ending" && S(s.id);
+    }
+  });
+  const ue = U((i = !1) => {
+    const a = T.current;
+    if (!a)
+      return;
+    const b = a.style.height;
+    a.style.height = "auto";
+    const N = a.offsetHeight;
+    a.style.height = b;
+    function A() {
+      M((L) => L.map((H) => H.id === s.id ? {
+        ...H,
+        ref: T,
+        height: N,
+        transitionStatus: void 0
+      } : H));
+    }
+    i ? mt.flushSync(A) : A();
+  });
+  Se(ue, [ue]);
+  function Ye(i, a) {
+    let b = i, N = a;
+    return !r.includes("left") && !r.includes("right") ? b = i > 0 ? i ** Q : -(Math.abs(i) ** Q) : (!r.includes("right") && i > 0 && (b = i ** Q), !r.includes("left") && i < 0 && (b = -(Math.abs(i) ** Q))), !r.includes("up") && !r.includes("down") ? N = a > 0 ? a ** Q : -(Math.abs(a) ** Q) : (!r.includes("down") && a > 0 && (N = a ** Q), !r.includes("up") && a < 0 && (N = -(Math.abs(a) ** Q))), {
+      x: b,
+      y: N
+    };
+  }
+  function Xe(i) {
+    if (i.button !== 0)
+      return;
+    i.pointerType === "touch" && Y();
+    const a = be(i.nativeEvent);
+    if (!(a && a.closest('button,a,input,textarea,[role="button"],[data-swipe-ignore]'))) {
+      if (ce.current = !1, ae.current = void 0, pe.current = 0, I.current = {
+        x: i.clientX,
+        y: i.clientY
+      }, $.current = I.current, T.current) {
+        const N = bt(T.current);
+        Z.current = N, m(N), J({
+          x: N.x,
+          y: N.y
+        });
+      }
+      X(!0), k(!0), V(!1), x(null), he.current = !0, T.current?.setPointerCapture(i.pointerId);
+    }
+  }
+  function Ge(i) {
+    if (!F)
+      return;
+    i.preventDefault(), he.current && (I.current = {
+      x: i.clientX,
+      y: i.clientY
+    }, he.current = !1);
+    const {
+      clientY: a,
+      clientX: b,
+      movementX: N,
+      movementY: A
+    } = i;
+    (A < 0 && a > $.current.y || A > 0 && a < $.current.y) && ($.current = {
+      x: $.current.x,
+      y: a
+    }), (N < 0 && b > $.current.x || N > 0 && b < $.current.x) && ($.current = {
+      x: b,
+      y: $.current.y
+    });
+    const L = b - I.current.x, H = a - I.current.y, Qe = a - $.current.y, Ze = b - $.current.x;
+    if (!q && Math.sqrt(L * L + H * H) >= Et && (V(!0), l === null)) {
+      const fe = r.includes("left") || r.includes("right"), et = r.includes("up") || r.includes("down");
+      if (fe && et) {
+        const tt = Math.abs(L), nt = Math.abs(H);
+        x(tt > nt ? "horizontal" : "vertical");
+      }
+    }
+    let B;
+    if (!ae.current)
+      l === "vertical" ? H > 0 ? B = "down" : H < 0 && (B = "up") : l === "horizontal" ? L > 0 ? B = "right" : L < 0 && (B = "left") : Math.abs(L) >= Math.abs(H) ? B = L > 0 ? "right" : "left" : B = H > 0 ? "down" : "up", B && r.includes(B) && (ae.current = B, pe.current = Fe(B, L, H), D(B));
+    else {
+      const ye = ae.current, fe = Fe(ye, Ze, Qe);
+      fe > oe ? (ce.current = !1, D(ye)) : !(r.includes("left") && r.includes("right")) && !(r.includes("up") && r.includes("down")) && pe.current - fe >= Dt && (ce.current = !0);
+    }
+    const le = Ye(L, H);
+    let _e = Z.current.x, we = Z.current.y;
+    l === "horizontal" ? (r.includes("left") || r.includes("right")) && (_e += le.x) : (l === "vertical" || (r.includes("left") || r.includes("right")) && (_e += le.x), (r.includes("up") || r.includes("down")) && (we += le.y)), J({
+      x: _e,
+      y: we
+    });
+  }
+  function Ke(i) {
+    if (!F)
+      return;
+    if (k(!1), V(!1), x(null), T.current?.releasePointerCapture(i.pointerId), ce.current) {
+      J({
+        x: t.x,
+        y: t.y
+      }), D(void 0);
+      return;
+    }
+    let a = !1;
+    const b = O.x - t.x, N = O.y - t.y;
+    let A;
+    for (const L of r) {
+      switch (L) {
+        case "right":
+          b > oe && (a = !0, A = "right");
+          break;
+        case "left":
+          b < -oe && (a = !0, A = "left");
+          break;
+        case "down":
+          N > oe && (a = !0, A = "down");
+          break;
+        case "up":
+          N < -oe && (a = !0, A = "up");
+          break;
+      }
+      if (a)
+        break;
+    }
+    a ? (D(A), K(!0), R(s.id)) : (J({
+      x: t.x,
+      y: t.y
+    }), D(void 0));
+  }
+  function We(i) {
+    if (i.key === "Escape") {
+      if (!T.current || !se(T.current, de(ne(T.current))))
+        return;
+      R(s.id);
+    }
+  }
+  e.useEffect(() => {
+    if (!p)
+      return;
+    const i = T.current;
+    if (!i)
+      return;
+    function a(b) {
+      se(i, b.target) && b.preventDefault();
+    }
+    return i.addEventListener("touchmove", a, {
+      passive: !1
+    }), () => {
+      i.removeEventListener("touchmove", a);
+    };
+  }, [p]);
+  function je() {
+    if (!F && O.x === t.x && O.y === t.y && !G)
+      return {
+        [ee.swipeMovementX]: "0px",
+        [ee.swipeMovementY]: "0px"
+      };
+    const i = O.x - t.x, a = O.y - t.y;
+    return {
+      transition: F ? "none" : void 0,
+      // While swiping, freeze the element at its current visual transform so it doesn't snap to the
+      // end position.
+      transform: F ? `translateX(${O.x}px) translateY(${O.y}px) scale(${t.scale})` : void 0,
+      [ee.swipeMovementX]: `${i}px`,
+      [ee.swipeMovementY]: `${a}px`
+    };
+  }
+  const Ne = s.priority === "high", Ue = {
+    role: Ne ? "alertdialog" : "dialog",
+    tabIndex: 0,
+    "aria-modal": !1,
+    "aria-labelledby": g,
+    "aria-describedby": h,
+    "aria-hidden": Ne && !u ? !0 : void 0,
+    onPointerDown: p ? Xe : void 0,
+    onPointerMove: p ? Ge : void 0,
+    onPointerUp: p ? Ke : void 0,
+    onKeyDown: We,
+    inert: pt(s.limited),
+    style: {
+      ...je(),
+      [ee.index]: s.transitionStatus === "ending" ? ge : ve,
+      [ee.offsetY]: `${Be}px`,
+      [ee.height]: s.height ? `${s.height}px` : void 0
+    }
+  }, te = e.useMemo(() => ({
+    rootRef: T,
+    toast: s,
+    titleId: g,
+    setTitleId: o,
+    descriptionId: h,
+    setDescriptionId: n,
+    swiping: F,
+    swipeDirection: j,
+    recalculateHeight: ue,
+    index: ge,
+    visibleIndex: ve,
+    expanded: C
+  }), [s, g, h, F, j, ue, ge, ve, C]), qe = e.useMemo(() => ({
+    transitionStatus: s.transitionStatus,
+    expanded: C,
+    limited: s.limited || !1,
+    type: s.type,
+    swiping: te.swiping,
+    swipeDirection: te.swipeDirection
+  }), [C, s.transitionStatus, s.limited, s.type, te.swiping, te.swipeDirection]), Je = ie("div", d, {
+    ref: [v, te.rootRef],
+    state: qe,
+    stateAttributesMapping: Tt,
+    props: [Ue, c]
+  });
+  return /* @__PURE__ */ E(Me.Provider, {
+    value: te,
+    children: Je
+  });
+});
+process.env.NODE_ENV !== "production" && (ze.displayName = "ToastRoot");
+const Ve = /* @__PURE__ */ e.forwardRef(function(d, v) {
+  const {
+    render: s,
+    className: z,
+    ...P
+  } = d, {
+    visibleIndex: w,
+    expanded: c,
+    recalculateHeight: _
+  } = me(), r = e.useRef(null);
+  Se(() => {
+    const R = r.current;
+    if (!R || (_(), typeof ResizeObserver != "function" || typeof MutationObserver != "function"))
+      return;
+    const S = new ResizeObserver(() => _(!0)), M = new MutationObserver(() => _(!0));
+    return S.observe(R), M.observe(R, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0
+    }), () => {
+      S.disconnect(), M.disconnect();
+    };
+  }, [_]);
+  const p = w > 0, y = e.useMemo(() => ({
+    expanded: c,
+    behind: p
+  }), [c, p]);
+  return ie("div", d, {
+    ref: [v, r],
+    state: y,
+    props: P
+  });
+});
+process.env.NODE_ENV !== "production" && (Ve.displayName = "ToastContent");
+const $e = /* @__PURE__ */ e.forwardRef(function(d, v) {
+  const {
+    render: s,
+    className: z,
+    id: P,
+    children: w,
+    ...c
+  } = d, {
+    toast: _
+  } = me(), r = w ?? _.description, p = !!r, y = _t(P), {
+    setDescriptionId: u
+  } = me();
+  Se(() => {
+    if (p)
+      return u(y), () => {
+        u(void 0);
+      };
+  }, [p, y, u]);
+  const R = e.useMemo(() => ({
+    type: _.type
+  }), [_.type]), S = ie("p", d, {
+    ref: v,
+    state: R,
+    props: {
+      ...c,
+      id: y,
+      children: r
+    }
+  });
+  return p ? S : null;
+});
+process.env.NODE_ENV !== "production" && ($e.displayName = "ToastDescription");
+const Ae = /* @__PURE__ */ e.forwardRef(function(d, v) {
+  const {
+    render: s,
+    className: z,
+    disabled: P,
+    nativeButton: w = !0,
+    ...c
+  } = d, {
+    close: _,
+    expanded: r
+  } = Re(), {
+    toast: p
+  } = me(), [y, u] = e.useState(!1), {
+    getButtonProps: R,
+    buttonRef: S
+  } = wt({
+    disabled: P,
+    native: w
+  }), M = e.useMemo(() => ({
+    type: p.type
+  }), [p.type]);
+  return ie("button", d, {
+    ref: [v, S],
+    state: M,
+    props: [{
+      "aria-hidden": !r && !y,
+      onClick() {
+        _(p.id);
+      },
+      onFocus() {
+        u(!0);
+      },
+      onBlur() {
+        u(!1);
+      }
+    }, c, R]
+  });
+});
+process.env.NODE_ENV !== "production" && (Ae.displayName = "ToastClose");
+const Rt = ft, St = "_toast__viewport_km0zn_1", Mt = "_toast_km0zn_1", Nt = "_toast_variant_neutral_km0zn_109", Pt = "_toast_variant_colorway_km0zn_115", Ot = "_toast__content_km0zn_121", Ct = "_toast__header_km0zn_139", Ft = "_toast__row_km0zn_144", kt = "_toast__title_km0zn_151", It = "_toast__description_km0zn_155", Lt = "_toast__close_km0zn_159", W = {
+  toast__viewport: St,
+  toast: Mt,
+  toast_variant_neutral: Nt,
+  toast_variant_colorway: Pt,
+  toast__content: Ot,
+  toast__header: Ct,
+  toast__row: Ft,
+  toast__title: kt,
+  toast__description: It,
+  toast__close: Lt
+}, un = Ie, ke = {
+  info: "blue",
+  error: "red",
+  warning: "yellow",
+  success: "green"
+};
+function ln() {
+  return /* @__PURE__ */ E(Rt, { children: /* @__PURE__ */ E(He, { className: W.toast__viewport, children: /* @__PURE__ */ E(Ht, {}) }) });
+}
+function Ht() {
+  return lt().toasts.map((d) => {
+    const v = d.type && d.type in ke ? ke[d.type] : void 0;
+    return /* @__PURE__ */ E(
+      ze,
+      {
+        toast: d,
+        className: rt(
+          W.toast,
+          v ? W.toast_variant_colorway : W.toast_variant_neutral
+        ),
+        render: /* @__PURE__ */ E(at, { background: "default", color: v }),
+        children: /* @__PURE__ */ re(
+          xe,
+          {
+            render: /* @__PURE__ */ E(Ve, {}),
+            className: W.toast__content,
+            children: [
+              /* @__PURE__ */ re(xe, { className: W.toast__row, children: [
+                /* @__PURE__ */ re(xe, { className: W.toast__header, children: [
+                  d.title ? /* @__PURE__ */ E(
+                    ot,
+                    {
+                      level: 2,
+                      size: "lg",
+                      color: "inherit",
+                      className: W.toast__title,
+                      children: d.title
+                    }
+                  ) : null,
+                  /* @__PURE__ */ E(
+                    $e,
+                    {
+                      render: /* @__PURE__ */ E(ct, { multiline: !0, color: v ? "inherit" : "dimmer" }),
+                      className: W.toast__description
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ E(
+                  Ae,
+                  {
+                    render: /* @__PURE__ */ E(
+                      it,
+                      {
+                        className: d.title ? W.toast__close : void 0,
+                        interactive: v ? `${v}_no-fill` : "no-fill",
+                        icon: "close-line",
+                        size: "sm",
+                        alt: "Close"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              d.action ? /* @__PURE__ */ E(
+                st,
+                {
+                  ...d.action,
+                  interactive: v ? `${v}_fill` : !0,
+                  children: d.action.children
+                }
+              ) : null
+            ]
+          }
+        )
+      },
+      d.id
+    );
+  });
+}
+export {
+  un as ToastProvider,
+  ln as ToastViewport
+};