@telegraph/modal 0.0.48 → 0.0.50

package/dist/esm/index.mjs

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