@telegraph/modal 0.0.49 → 0.0.51

package/dist/esm/index.mjs

@@ -1,62 +1,68 @@
-import { jsx as u, Fragment as I, jsxs as S } from "react/jsx-runtime";
+import { jsx as d, Fragment as Z, jsxs as S } from "react/jsx-runtime";
 import * as v from "@radix-ui/react-dialog";
-import { FocusScope as q } from "@radix-ui/react-focus-scope";
-import * as s from "react";
-import b from "react";
-import * as G from "react-dom";
-import J from "react-dom";
+import * as o from "react";
+import g from "react";
+import * as q from "react-dom";
+import { FocusScope as G } from "@radix-ui/react-focus-scope";
+import * as J from "@radix-ui/react-portal";
 import * as Q from "@radix-ui/react-visually-hidden";
 import { Button as ee } from "@telegraph/button";
 import { RefToTgphRef as te } from "@telegraph/helpers";
 import { Lucide as ne } from "@telegraph/icon";
-import { Stack as g, Box as re } from "@telegraph/layout";
-import { AnimatePresence as oe, motion as T } from "framer-motion";
-function se(t, e) {
-  typeof t == "function" ? t(e) : t != null && (t.current = e);
+import { Stack as E, Box as re } from "@telegraph/layout";
+import { AnimatePresence as se, motion as T } from "framer-motion";
+function x(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
+  return function(s) {
+    if (e == null || e(s), n === !1 || !s.defaultPrevented)
+      return t == null ? void 0 : t(s);
+  };
+}
+function oe(e, t) {
+  typeof e == "function" ? e(t) : e != null && (e.current = t);
 }
-function ie(...t) {
-  return (e) => t.forEach((n) => se(n, e));
+function ie(...e) {
+  return (t) => e.forEach((n) => oe(n, t));
 }
-var W = s.forwardRef((t, e) => {
-  const { children: n, ...r } = t, o = s.Children.toArray(n), i = o.find(ce);
+var j = o.forwardRef((e, t) => {
+  const { children: n, ...r } = e, s = o.Children.toArray(n), i = s.find(ce);
   if (i) {
-    const a = i.props.children, c = o.map((y) => y === i ? s.Children.count(a) > 1 ? s.Children.only(null) : s.isValidElement(a) ? a.props.children : null : y);
-    return /* @__PURE__ */ u(N, { ...r, ref: e, children: s.isValidElement(a) ? s.cloneElement(a, void 0, c) : null });
+    const a = i.props.children, c = s.map((p) => p === i ? o.Children.count(a) > 1 ? o.Children.only(null) : o.isValidElement(a) ? a.props.children : null : p);
+    return /* @__PURE__ */ d(B, { ...r, ref: t, children: o.isValidElement(a) ? o.cloneElement(a, void 0, c) : null });
   }
-  return /* @__PURE__ */ u(N, { ...r, ref: e, children: n });
+  return /* @__PURE__ */ d(B, { ...r, ref: t, children: n });
 });
-W.displayName = "Slot";
-var N = s.forwardRef((t, e) => {
-  const { children: n, ...r } = t;
-  if (s.isValidElement(n)) {
-    const o = ue(n);
-    return s.cloneElement(n, {
+j.displayName = "Slot";
+var B = o.forwardRef((e, t) => {
+  const { children: n, ...r } = e;
+  if (o.isValidElement(n)) {
+    const s = ue(n);
+    return o.cloneElement(n, {
       ...le(r, n.props),
       // @ts-ignore
-      ref: e ? ie(e, o) : o
+      ref: t ? ie(t, s) : s
     });
   }
-  return s.Children.count(n) > 1 ? s.Children.only(null) : null;
+  return o.Children.count(n) > 1 ? o.Children.only(null) : null;
 });
-N.displayName = "SlotClone";
-var ae = ({ children: t }) => /* @__PURE__ */ u(I, { children: t });
-function ce(t) {
-  return s.isValidElement(t) && t.type === ae;
+B.displayName = "SlotClone";
+var ae = ({ children: e }) => /* @__PURE__ */ d(Z, { children: e });
+function ce(e) {
+  return o.isValidElement(e) && e.type === ae;
 }
-function le(t, e) {
-  const n = { ...e };
-  for (const r in e) {
-    const o = t[r], i = e[r];
-    /^on[A-Z]/.test(r) ? o && i ? n[r] = (...c) => {
-      i(...c), o(...c);
-    } : o && (n[r] = o) : r === "style" ? n[r] = { ...o, ...i } : r === "className" && (n[r] = [o, i].filter(Boolean).join(" "));
+function le(e, t) {
+  const n = { ...t };
+  for (const r in t) {
+    const s = e[r], i = t[r];
+    /^on[A-Z]/.test(r) ? s && i ? n[r] = (...c) => {
+      i(...c), s(...c);
+    } : s && (n[r] = s) : r === "style" ? n[r] = { ...s, ...i } : r === "className" && (n[r] = [s, i].filter(Boolean).join(" "));
   }
-  return { ...t, ...n };
+  return { ...e, ...n };
 }
-function ue(t) {
-  var r, o;
-  let e = (r = Object.getOwnPropertyDescriptor(t.props, "ref")) == null ? void 0 : r.get, n = e && "isReactWarning" in e && e.isReactWarning;
-  return n ? t.ref : (e = (o = Object.getOwnPropertyDescriptor(t, "ref")) == null ? void 0 : o.get, n = e && "isReactWarning" in e && e.isReactWarning, n ? t.props.ref : t.props.ref || t.ref);
+function ue(e) {
+  var r, s;
+  let t = (r = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : r.get, n = t && "isReactWarning" in t && t.isReactWarning;
+  return n ? e.ref : (t = (s = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : s.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
 }
 var de = [
   "a",
@@ -75,240 +81,196 @@ var de = [
   "span",
   "svg",
   "ul"
-], fe = de.reduce((t, e) => {
-  const n = s.forwardRef((r, o) => {
-    const { asChild: i, ...a } = r, c = i ? W : e;
-    return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ u(c, { ...a, ref: o });
-  });
-  return n.displayName = `Primitive.${e}`, { ...t, [e]: n };
-}, {}), pe = globalThis != null && globalThis.document ? s.useLayoutEffect : () => {
-}, ye = "Portal", j = s.forwardRef((t, e) => {
-  var c;
-  const { container: n, ...r } = t, [o, i] = s.useState(!1);
-  pe(() => i(!0), []);
-  const a = n || o && ((c = globalThis == null ? void 0 : globalThis.document) == null ? void 0 : c.body);
-  return a ? J.createPortal(/* @__PURE__ */ u(fe.div, { ...r, ref: e }), a) : null;
-});
-j.displayName = ye;
-var he = j;
-function U(t) {
-  const e = s.useRef(t);
-  return s.useEffect(() => {
-    e.current = t;
-  }), s.useMemo(() => (...n) => {
-    var r;
-    return (r = e.current) == null ? void 0 : r.call(e, ...n);
-  }, []);
-}
-function me({
-  prop: t,
-  defaultProp: e,
-  onChange: n = () => {
-  }
-}) {
-  const [r, o] = ve({ defaultProp: e, onChange: n }), i = t !== void 0, a = i ? t : r, c = U(n), y = s.useCallback(
-    (l) => {
-      if (i) {
-        const f = typeof l == "function" ? l(t) : l;
-        f !== t && c(f);
-      } else
-        o(l);
-    },
-    [i, t, o, c]
-  );
-  return [a, y];
-}
-function ve({
-  defaultProp: t,
-  onChange: e
-}) {
-  const n = s.useState(t), [r] = n, o = s.useRef(r), i = U(e);
-  return s.useEffect(() => {
-    o.current !== r && (i(r), o.current = r);
-  }, [r, o, i]), n;
-}
-function x(t, e, { checkForDefaultPrevented: n = !0 } = {}) {
-  return function(o) {
-    if (t == null || t(o), n === !1 || !o.defaultPrevented)
-      return e == null ? void 0 : e(o);
-  };
-}
-var ge = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "span",
-  "svg",
-  "ul"
-], z = ge.reduce((t, e) => {
-  const n = s.forwardRef((r, o) => {
-    const { asChild: i, ...a } = r, c = i ? W : e;
-    return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ u(c, { ...a, ref: o });
+], _ = de.reduce((e, t) => {
+  const n = o.forwardRef((r, s) => {
+    const { asChild: i, ...a } = r, c = i ? j : t;
+    return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ d(c, { ...a, ref: s });
   });
-  return n.displayName = `Primitive.${e}`, { ...t, [e]: n };
+  return n.displayName = `Primitive.${t}`, { ...e, [t]: n };
 }, {});
-function Ee(t, e) {
-  t && G.flushSync(() => t.dispatchEvent(e));
+function fe(e, t) {
+  e && q.flushSync(() => e.dispatchEvent(t));
 }
-function be(t, e) {
-  typeof t == "function" ? t(e) : t != null && (t.current = e);
+function pe(e, t) {
+  typeof e == "function" ? e(t) : e != null && (e.current = t);
 }
-function Ce(...t) {
-  return (e) => t.forEach((n) => be(n, e));
+function ye(...e) {
+  return (t) => e.forEach((n) => pe(n, t));
 }
-function V(...t) {
-  return s.useCallback(Ce(...t), t);
+function $(...e) {
+  return o.useCallback(ye(...e), e);
 }
-function A(t) {
-  const e = s.useRef(t);
-  return s.useEffect(() => {
-    e.current = t;
-  }), s.useMemo(() => (...n) => {
+function N(e) {
+  const t = o.useRef(e);
+  return o.useEffect(() => {
+    t.current = e;
+  }), o.useMemo(() => (...n) => {
     var r;
-    return (r = e.current) == null ? void 0 : r.call(e, ...n);
+    return (r = t.current) == null ? void 0 : r.call(t, ...n);
   }, []);
 }
-function Pe(t, e = globalThis == null ? void 0 : globalThis.document) {
-  const n = A(t);
-  s.useEffect(() => {
-    const r = (o) => {
-      o.key === "Escape" && n(o);
+function he(e, t = globalThis == null ? void 0 : globalThis.document) {
+  const n = N(e);
+  o.useEffect(() => {
+    const r = (s) => {
+      s.key === "Escape" && n(s);
     };
-    return e.addEventListener("keydown", r, { capture: !0 }), () => e.removeEventListener("keydown", r, { capture: !0 });
-  }, [n, e]);
+    return t.addEventListener("keydown", r, { capture: !0 }), () => t.removeEventListener("keydown", r, { capture: !0 });
+  }, [n, t]);
 }
-var Le = "DismissableLayer", B = "dismissableLayer.update", we = "dismissableLayer.pointerDownOutside", Re = "dismissableLayer.focusOutside", $, K = s.createContext({
+var me = "DismissableLayer", W = "dismissableLayer.update", ve = "dismissableLayer.pointerDownOutside", Ee = "dismissableLayer.focusOutside", M, U = o.createContext({
   layers: /* @__PURE__ */ new Set(),
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
   branches: /* @__PURE__ */ new Set()
-}), X = s.forwardRef(
-  (t, e) => {
+}), z = o.forwardRef(
+  (e, t) => {
     const {
       disableOutsidePointerEvents: n = !1,
       onEscapeKeyDown: r,
-      onPointerDownOutside: o,
+      onPointerDownOutside: s,
       onFocusOutside: i,
       onInteractOutside: a,
       onDismiss: c,
-      ...y
-    } = t, l = s.useContext(K), [d, f] = s.useState(null), h = (d == null ? void 0 : d.ownerDocument) ?? (globalThis == null ? void 0 : globalThis.document), [, C] = s.useState({}), D = V(e, (p) => f(p)), P = Array.from(l.layers), [L] = [...l.layersWithOutsidePointerEventsDisabled].slice(-1), w = P.indexOf(L), m = d ? P.indexOf(d) : -1, M = l.layersWithOutsidePointerEventsDisabled.size > 0, E = m >= w, Z = xe((p) => {
-      const R = p.target, F = [...l.branches].some((O) => O.contains(R));
-      !E || F || (o == null || o(p), a == null || a(p), p.defaultPrevented || c == null || c());
-    }, h), k = Se((p) => {
-      const R = p.target;
-      [...l.branches].some((O) => O.contains(R)) || (i == null || i(p), a == null || a(p), p.defaultPrevented || c == null || c());
+      ...p
+    } = e, l = o.useContext(U), [u, y] = o.useState(null), h = (u == null ? void 0 : u.ownerDocument) ?? (globalThis == null ? void 0 : globalThis.document), [, w] = o.useState({}), b = $(t, (f) => y(f)), C = Array.from(l.layers), [L] = [...l.layersWithOutsidePointerEventsDisabled].slice(-1), m = C.indexOf(L), O = u ? C.indexOf(u) : -1, P = l.layersWithOutsidePointerEventsDisabled.size > 0, k = O >= m, Y = Ce((f) => {
+      const R = f.target, F = [...l.branches].some((D) => D.contains(R));
+      !k || F || (s == null || s(f), a == null || a(f), f.defaultPrevented || c == null || c());
+    }, h), A = Le((f) => {
+      const R = f.target;
+      [...l.branches].some((D) => D.contains(R)) || (i == null || i(f), a == null || a(f), f.defaultPrevented || c == null || c());
     }, h);
-    return Pe((p) => {
-      m === l.layers.size - 1 && (r == null || r(p), !p.defaultPrevented && c && (p.preventDefault(), c()));
-    }, h), s.useEffect(() => {
-      if (d)
-        return n && (l.layersWithOutsidePointerEventsDisabled.size === 0 && ($ = h.body.style.pointerEvents, h.body.style.pointerEvents = "none"), l.layersWithOutsidePointerEventsDisabled.add(d)), l.layers.add(d), _(), () => {
-          n && l.layersWithOutsidePointerEventsDisabled.size === 1 && (h.body.style.pointerEvents = $);
+    return he((f) => {
+      O === l.layers.size - 1 && (r == null || r(f), !f.defaultPrevented && c && (f.preventDefault(), c()));
+    }, h), o.useEffect(() => {
+      if (u)
+        return n && (l.layersWithOutsidePointerEventsDisabled.size === 0 && (M = h.body.style.pointerEvents, h.body.style.pointerEvents = "none"), l.layersWithOutsidePointerEventsDisabled.add(u)), l.layers.add(u), I(), () => {
+          n && l.layersWithOutsidePointerEventsDisabled.size === 1 && (h.body.style.pointerEvents = M);
         };
-    }, [d, h, n, l]), s.useEffect(() => () => {
-      d && (l.layers.delete(d), l.layersWithOutsidePointerEventsDisabled.delete(d), _());
-    }, [d, l]), s.useEffect(() => {
-      const p = () => C({});
-      return document.addEventListener(B, p), () => document.removeEventListener(B, p);
-    }, []), /* @__PURE__ */ u(
-      z.div,
+    }, [u, h, n, l]), o.useEffect(() => () => {
+      u && (l.layers.delete(u), l.layersWithOutsidePointerEventsDisabled.delete(u), I());
+    }, [u, l]), o.useEffect(() => {
+      const f = () => w({});
+      return document.addEventListener(W, f), () => document.removeEventListener(W, f);
+    }, []), /* @__PURE__ */ d(
+      _.div,
       {
-        ...y,
-        ref: D,
+        ...p,
+        ref: b,
         style: {
-          pointerEvents: M ? E ? "auto" : "none" : void 0,
-          ...t.style
+          pointerEvents: P ? k ? "auto" : "none" : void 0,
+          ...e.style
         },
-        onFocusCapture: x(t.onFocusCapture, k.onFocusCapture),
-        onBlurCapture: x(t.onBlurCapture, k.onBlurCapture),
+        onFocusCapture: x(e.onFocusCapture, A.onFocusCapture),
+        onBlurCapture: x(e.onBlurCapture, A.onBlurCapture),
         onPointerDownCapture: x(
-          t.onPointerDownCapture,
-          Z.onPointerDownCapture
+          e.onPointerDownCapture,
+          Y.onPointerDownCapture
         )
       }
     );
   }
 );
-X.displayName = Le;
-var De = "DismissableLayerBranch", Oe = s.forwardRef((t, e) => {
-  const n = s.useContext(K), r = s.useRef(null), o = V(e, r);
-  return s.useEffect(() => {
+z.displayName = me;
+var ge = "DismissableLayerBranch", be = o.forwardRef((e, t) => {
+  const n = o.useContext(U), r = o.useRef(null), s = $(t, r);
+  return o.useEffect(() => {
     const i = r.current;
     if (i)
       return n.branches.add(i), () => {
         n.branches.delete(i);
       };
-  }, [n.branches]), /* @__PURE__ */ u(z.div, { ...t, ref: o });
+  }, [n.branches]), /* @__PURE__ */ d(_.div, { ...e, ref: s });
 });
-Oe.displayName = De;
-function xe(t, e = globalThis == null ? void 0 : globalThis.document) {
-  const n = A(t), r = s.useRef(!1), o = s.useRef(() => {
+be.displayName = ge;
+function Ce(e, t = globalThis == null ? void 0 : globalThis.document) {
+  const n = N(e), r = o.useRef(!1), s = o.useRef(() => {
   });
-  return s.useEffect(() => {
+  return o.useEffect(() => {
     const i = (c) => {
       if (c.target && !r.current) {
-        let y = function() {
-          Y(
-            we,
+        let p = function() {
+          V(
+            ve,
             n,
             l,
             { discrete: !0 }
           );
         };
         const l = { originalEvent: c };
-        c.pointerType === "touch" ? (e.removeEventListener("click", o.current), o.current = y, e.addEventListener("click", o.current, { once: !0 })) : y();
+        c.pointerType === "touch" ? (t.removeEventListener("click", s.current), s.current = p, t.addEventListener("click", s.current, { once: !0 })) : p();
       } else
-        e.removeEventListener("click", o.current);
+        t.removeEventListener("click", s.current);
       r.current = !1;
     }, a = window.setTimeout(() => {
-      e.addEventListener("pointerdown", i);
+      t.addEventListener("pointerdown", i);
     }, 0);
     return () => {
-      window.clearTimeout(a), e.removeEventListener("pointerdown", i), e.removeEventListener("click", o.current);
+      window.clearTimeout(a), t.removeEventListener("pointerdown", i), t.removeEventListener("click", s.current);
     };
-  }, [e, n]), {
+  }, [t, n]), {
     // ensures we check React component tree (not just DOM tree)
     onPointerDownCapture: () => r.current = !0
   };
 }
-function Se(t, e = globalThis == null ? void 0 : globalThis.document) {
-  const n = A(t), r = s.useRef(!1);
-  return s.useEffect(() => {
-    const o = (i) => {
-      i.target && !r.current && Y(Re, n, { originalEvent: i }, {
+function Le(e, t = globalThis == null ? void 0 : globalThis.document) {
+  const n = N(e), r = o.useRef(!1);
+  return o.useEffect(() => {
+    const s = (i) => {
+      i.target && !r.current && V(Ee, n, { originalEvent: i }, {
         discrete: !1
       });
     };
-    return e.addEventListener("focusin", o), () => e.removeEventListener("focusin", o);
-  }, [e, n]), {
+    return t.addEventListener("focusin", s), () => t.removeEventListener("focusin", s);
+  }, [t, n]), {
     onFocusCapture: () => r.current = !0,
     onBlurCapture: () => r.current = !1
   };
 }
-function _() {
-  const t = new CustomEvent(B);
-  document.dispatchEvent(t);
+function I() {
+  const e = new CustomEvent(W);
+  document.dispatchEvent(e);
 }
-function Y(t, e, n, { discrete: r }) {
-  const o = n.originalEvent.target, i = new CustomEvent(t, { bubbles: !1, cancelable: !0, detail: n });
-  e && o.addEventListener(t, e, { once: !0 }), r ? Ee(o, i) : o.dispatchEvent(i);
+function V(e, t, n, { discrete: r }) {
+  const s = n.originalEvent.target, i = new CustomEvent(e, { bubbles: !1, cancelable: !0, detail: n });
+  t && s.addEventListener(e, t, { once: !0 }), r ? fe(s, i) : s.dispatchEvent(i);
 }
-const Te = ({
-  id: t,
-  layers: e,
-  children: n,
-  ...r
-}) => t === e[e.length - 1] ? /* @__PURE__ */ u(X, { ...r, children: n }) : /* @__PURE__ */ u(I, { children: n }), H = b.createContext({
+function K(e) {
+  const t = o.useRef(e);
+  return o.useEffect(() => {
+    t.current = e;
+  }), o.useMemo(() => (...n) => {
+    var r;
+    return (r = t.current) == null ? void 0 : r.call(t, ...n);
+  }, []);
+}
+function Pe({
+  prop: e,
+  defaultProp: t,
+  onChange: n = () => {
+  }
+}) {
+  const [r, s] = Re({ defaultProp: t, onChange: n }), i = e !== void 0, a = i ? e : r, c = K(n), p = o.useCallback(
+    (l) => {
+      if (i) {
+        const y = typeof l == "function" ? l(e) : l;
+        y !== e && c(y);
+      } else
+        s(l);
+    },
+    [i, e, s, c]
+  );
+  return [a, p];
+}
+function Re({
+  defaultProp: e,
+  onChange: t
+}) {
+  const n = o.useState(e), [r] = n, s = o.useRef(r), i = K(t);
+  return o.useEffect(() => {
+    s.current !== r && (i(r), s.current = r);
+  }, [r, s, i]), n;
+}
+const H = g.createContext({
   layers: [],
   setLayers: () => {
   },
@@ -318,101 +280,97 @@ const Te = ({
   },
   removeTopLayer: () => {
   }
-}), qe = ({ children: t }) => {
-  const [e, n] = b.useState([]), r = (a, c = {}) => {
-    const { layer: y } = c;
-    if (typeof y == "number")
-      return n((l) => l.length - 1 < y ? [...l, a] : [...l.slice(0, y), a, ...l.slice(y)]);
-    n((l) => [...l, a]);
-  }, o = (a) => {
-    n(e.filter((c) => c !== a));
+}), Ue = ({ children: e }) => {
+  const [t, n] = g.useState([]), r = (a) => {
+    n((c) => [...c, a]);
+  }, s = (a) => {
+    n(t.filter((c) => c !== a));
   }, i = () => {
-    const a = e[e.length - 1];
-    a && o(a);
+    const a = t[t.length - 1];
+    a && s(a);
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ d(
     H.Provider,
     {
-      value: { layers: e, setLayers: n, addLayer: r, removeLayer: o, removeTopLayer: i },
-      children: t
+      value: { layers: t, setLayers: n, addLayer: r, removeLayer: s, removeTopLayer: i },
+      children: e
     }
   );
-}, Ne = () => b.useContext(H), Be = ({
-  defaultOpen: t,
-  open: e,
+}, X = () => g.useContext(H), we = ({
+  defaultOpen: e,
+  open: t,
   onOpenChange: n,
   ...r
 }) => {
-  const [o, i] = me({
-    prop: e,
+  const [s, i] = Pe({
+    prop: t,
     onChange: n,
-    defaultProp: t
-  });
-  if (o)
-    return /* @__PURE__ */ u(We, { open: o, onOpenChange: i, ...r });
-}, We = ({
-  open: t,
-  onOpenChange: e,
+    defaultProp: e
+  }), a = X(), c = r.a11yTitle;
+  if (g.useEffect(() => {
+    !s && a.layers.includes(c) && (console.log("HERE REMOVE", c, s), a.removeLayer(c));
+  }, [c, a, s]), !!s)
+    return /* @__PURE__ */ d(Oe, { open: s, onOpenChange: i, ...r });
+}, Oe = ({
+  open: e,
+  onOpenChange: t,
   a11yTitle: n,
   a11yDescription: r,
-  children: o,
-  layer: i,
+  children: s,
   // Focus scope props
-  trapped: a,
-  onMountAutoFocus: c,
-  onUnmountAutoFocus: y,
-  ...l
+  trapped: i,
+  onMountAutoFocus: a,
+  onUnmountAutoFocus: c,
+  ...p
 }) => {
-  var L, w;
-  const d = n, f = Ne();
-  b.useEffect(() => {
-    !f || !t || f.layers.includes(d) || f.addLayer(d, { layer: i });
-  }, [d, i, f, t]);
-  const h = ((L = f.layers) == null ? void 0 : L.indexOf(d)) || 0, C = ((w = f.layers) == null ? void 0 : w.length) || 0, D = h !== 0, P = d === f.layers[f.layers.length - 1];
-  return /* @__PURE__ */ u(
-    Te,
+  var C, L;
+  const l = n, u = X();
+  g.useEffect(() => {
+    !u || !e || u.layers.includes(l) || u.addLayer(l);
+  }, [l, u, e]);
+  const y = ((C = u.layers) == null ? void 0 : C.indexOf(l)) || 0, h = ((L = u.layers) == null ? void 0 : L.length) || 0, w = y !== 0, b = l === u.layers[u.layers.length - 1];
+  return /* @__PURE__ */ d(
+    z,
     {
-      id: d,
-      layers: f.layers,
       onEscapeKeyDown: (m) => {
-        m.preventDefault(), f.removeTopLayer(), e(!1);
+        b && (m.preventDefault(), u.removeTopLayer(), t(!1));
       },
       onPointerDownOutside: (m) => {
-        m.preventDefault(), f.removeTopLayer(), e(!1);
+        b && (m.preventDefault(), u.removeTopLayer(), t(!1));
       },
       children: /* @__PURE__ */ S(
         v.Root,
         {
-          open: t,
+          open: e,
           onOpenChange: (m) => {
-            var E;
-            if (((E = f == null ? void 0 : f.layers) == null ? void 0 : E.length) > 0)
-              return m === !1 && d === f.layers[f.layers.length - 1] ? (f.removeLayer(d), e(!1)) : void 0;
-            e(m);
+            var P;
+            if (((P = u == null ? void 0 : u.layers) == null ? void 0 : P.length) > 0)
+              return m === !1 && l === u.layers[u.layers.length - 1] ? (u.removeLayer(l), t(!1)) : void 0;
+            t(m);
           },
           children: [
             /* @__PURE__ */ S(Q.Root, { children: [
-              /* @__PURE__ */ u(v.Title, { children: n }),
-              r && /* @__PURE__ */ u(v.Description, { children: r })
+              /* @__PURE__ */ d(v.Title, { children: n }),
+              r && /* @__PURE__ */ d(v.Description, { children: r })
             ] }),
-            /* @__PURE__ */ u(oe, { children: t && // We add the className "tgph" here so that styles within
+            /* @__PURE__ */ d(se, { children: e && // We add the className "tgph" here so that styles within
             // the portal get scoped properly to telegraph
-            /* @__PURE__ */ u(he, { className: "tgph", children: /* @__PURE__ */ u(Ae, { layer: h, children: /* @__PURE__ */ u(
-              q,
+            /* @__PURE__ */ d(J.Root, { className: "tgph", children: /* @__PURE__ */ d(De, { layer: y, children: /* @__PURE__ */ d(
+              G,
               {
-                trapped: typeof a == "boolean" ? a : P,
-                onMountAutoFocus: c,
-                onUnmountAutoFocus: y,
+                trapped: typeof i == "boolean" ? i : b,
+                onMountAutoFocus: a,
+                onUnmountAutoFocus: c,
                 asChild: !0,
-                children: /* @__PURE__ */ u(te, { children: /* @__PURE__ */ u(
-                  g,
+                children: /* @__PURE__ */ d(te, { children: /* @__PURE__ */ d(
+                  E,
                   {
                     as: T.div,
                     initial: {
-                      top: `calc(var(--tgph-spacing-16) + var(--tgph-spacing-4) * ${C - 1})`
+                      top: `calc(var(--tgph-spacing-16) + var(--tgph-spacing-4) * ${h - 1})`
                     },
                     animate: {
-                      top: D ? `calc(var(--tgph-spacing-16) + var(--tgph-spacing-4) * ${h} )` : "var(--tgph-spacing-16)"
+                      top: w ? `calc(var(--tgph-spacing-16) + var(--tgph-spacing-4) * ${y} )` : "var(--tgph-spacing-16)"
                     },
                     exit: { top: 0 },
                     transition: { type: "spring", duration: 0.3, bounce: 0 },
@@ -423,15 +381,15 @@ const Te = ({
                       left: 0,
                       maxHeight: "calc(100vh - var(--tgph-spacing-32))",
                       maxWidth: "calc(100vw - var(--tgph-spacing-8))",
-                      zIndex: `calc(var(--tgph-zIndex-modal) + ${h})`
+                      zIndex: `calc(var(--tgph-zIndex-modal) + ${y})`
                     },
-                    children: /* @__PURE__ */ u(
-                      g,
+                    children: /* @__PURE__ */ d(
+                      E,
                       {
                         direction: "column",
                         as: T.div,
                         animate: {
-                          scale: 1.02 - Math.abs(C - h) * 0.02,
+                          scale: 1.02 - Math.abs(h - y) * 0.02,
                           transformOrigin: "center center"
                         },
                         transition: {
@@ -439,30 +397,30 @@ const Te = ({
                           bounce: 0,
                           type: "spring"
                         },
-                        maxW: l.maxW ?? "160",
-                        w: l.w ?? "full",
+                        maxW: p.maxW ?? "160",
+                        w: p.w ?? "full",
                         bg: "surface-1",
                         border: "px",
                         rounded: "4",
                         shadow: "3",
-                        ...l,
-                        children: o
+                        ...p,
+                        children: s
                       },
-                      `content-${d}`
+                      `content-${l}`
                     )
                   },
-                  `container-${d}`
+                  `container-${l}`
                 ) })
               }
             ) }) }) })
           ]
         },
-        d
+        l
       )
     }
   );
-}, Ae = ({ layer: t, children: e }) => t > 0 ? e : /* @__PURE__ */ S(v.Overlay, { children: [
-  /* @__PURE__ */ u(
+}, De = ({ layer: e, children: t }) => e > 0 ? t : /* @__PURE__ */ S(v.Overlay, { children: [
+  /* @__PURE__ */ d(
     re,
     {
       as: T.div,
@@ -481,43 +439,43 @@ const Te = ({
       }
     }
   ),
-  e
-] }), Me = b.forwardRef(
-  ({ children: t, ...e }, n) => /* @__PURE__ */ u(v.Content, { ref: n, asChild: !0, ...e, children: /* @__PURE__ */ u(g, { direction: "column", h: "full", ...e, children: t }) })
-), ke = ({
-  size: t = "1",
-  variant: e = "ghost",
+  t
+] }), xe = g.forwardRef(
+  ({ children: e, ...t }, n) => /* @__PURE__ */ d(v.Content, { ref: n, asChild: !0, ...t, children: /* @__PURE__ */ d(E, { direction: "column", h: "full", ...t, children: e }) })
+), Se = ({
+  size: e = "1",
+  variant: t = "ghost",
   ...n
-}) => /* @__PURE__ */ u(v.Close, { asChild: !0, children: /* @__PURE__ */ u(
+}) => /* @__PURE__ */ d(v.Close, { asChild: !0, children: /* @__PURE__ */ d(
   ee,
   {
     icon: { icon: ne.X, alt: "Close Modal" },
-    variant: e,
-    size: t,
+    variant: t,
+    size: e,
     ...n
   }
-) }), Fe = ({
-  style: t,
-  children: e,
+) }), Te = ({
+  style: e,
+  children: t,
   ...n
-}) => /* @__PURE__ */ u(
-  g,
+}) => /* @__PURE__ */ d(
+  E,
   {
     direction: "column",
     px: "6",
     py: "4",
     style: {
       overflowY: "auto",
-      ...t
+      ...e
     },
     ...n,
-    children: e
+    children: t
   }
-), $e = ({
-  children: t,
-  ...e
-}) => /* @__PURE__ */ u(
-  g,
+), Be = ({
+  children: e,
+  ...t
+}) => /* @__PURE__ */ d(
+  E,
   {
     direction: "row",
     justify: "space-between",
@@ -525,14 +483,14 @@ const Te = ({
     px: "6",
     py: "4",
     borderBottom: "px",
-    ...e,
-    children: t
+    ...t,
+    children: e
   }
-), _e = ({
-  children: t,
-  ...e
-}) => /* @__PURE__ */ u(
-  g,
+), We = ({
+  children: e,
+  ...t
+}) => /* @__PURE__ */ d(
+  E,
   {
     direction: "row",
     align: "center",
@@ -541,20 +499,20 @@ const Te = ({
     px: "6",
     py: "4",
     borderTop: "px",
-    ...e,
-    children: t
+    ...t,
+    children: e
   }
-), Ie = {};
-Object.assign(Ie, {
-  Root: Be,
-  Content: Me,
-  Close: ke,
-  Body: Fe,
-  Header: $e,
-  Footer: _e
+), Ne = {};
+Object.assign(Ne, {
+  Root: we,
+  Content: xe,
+  Close: Se,
+  Body: Te,
+  Header: Be,
+  Footer: We
 });
 export {
-  Ie as Modal,
-  qe as ModalStackingProvider
+  Ne as Modal,
+  Ue as ModalStackingProvider
 };
 //# sourceMappingURL=index.mjs.map