@telegraph/modal 0.0.47 → 0.0.49

package/dist/esm/index.mjs

@@ -1,104 +1,139 @@
-import { jsx as d, Fragment as I, jsxs as D } from "react/jsx-runtime";
+import { jsx as u, Fragment as I, 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 { Lucide as J } from "@telegraph/icon";
-import { Stack as g, Box as Q } from "@telegraph/layout";
-import { AnimatePresence as ee, motion as O } from "framer-motion";
-import * as te 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 ne({
-  prop: t,
-  defaultProp: e,
-  onChange: n = () => {
-  }
-}) {
-  const [r, s] = re({ 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 re({
-  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 R(t, e, { checkForDefaultPrevented: n = !0 } = {}) {
-  return function(s) {
-    if (t == null || t(s), n === !1 || !s.defaultPrevented)
-      return e == null ? void 0 : e(s);
-  };
-}
+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 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);
 }
-function oe(...t) {
+function ie(...t) {
   return (e) => t.forEach((n) => se(n, e));
 }
-var j = o.forwardRef((t, e) => {
-  const { children: n, ...r } = t, s = o.Children.toArray(n), i = s.find(ae);
+var W = s.forwardRef((t, e) => {
+  const { children: n, ...r } = t, o = s.Children.toArray(n), i = o.find(ce);
   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 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 });
   }
-  return /* @__PURE__ */ d(x, { ...r, ref: e, children: n });
+  return /* @__PURE__ */ u(N, { ...r, ref: e, children: n });
 });
-j.displayName = "Slot";
-var x = o.forwardRef((t, e) => {
+W.displayName = "Slot";
+var N = s.forwardRef((t, e) => {
   const { children: n, ...r } = t;
-  if (o.isValidElement(n)) {
-    const s = le(n);
-    return o.cloneElement(n, {
-      ...ce(r, n.props),
+  if (s.isValidElement(n)) {
+    const o = ue(n);
+    return s.cloneElement(n, {
+      ...le(r, n.props),
       // @ts-ignore
-      ref: e ? oe(e, s) : s
+      ref: e ? ie(e, o) : o
     });
   }
-  return o.Children.count(n) > 1 ? o.Children.only(null) : null;
+  return s.Children.count(n) > 1 ? s.Children.only(null) : null;
 });
-x.displayName = "SlotClone";
-var ie = ({ children: t }) => /* @__PURE__ */ d(I, { children: t });
-function ae(t) {
-  return o.isValidElement(t) && t.type === ie;
+N.displayName = "SlotClone";
+var ae = ({ children: t }) => /* @__PURE__ */ u(I, { children: t });
+function ce(t) {
+  return s.isValidElement(t) && t.type === ae;
 }
-function ce(t, e) {
+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);
-    } : s && (n[r] = s) : r === "style" ? n[r] = { ...s, ...i } : r === "className" && (n[r] = [s, i].filter(Boolean).join(" "));
+    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(" "));
   }
   return { ...t, ...n };
 }
-function le(t) {
-  var r, s;
+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 = (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);
+  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);
+}
+var de = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "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);
+  }, []);
 }
-var ue = [
+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",
@@ -115,165 +150,165 @@ var ue = [
   "span",
   "svg",
   "ul"
-], _ = ue.reduce((t, e) => {
-  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 });
+], 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 });
   });
   return n.displayName = `Primitive.${e}`, { ...t, [e]: n };
 }, {});
-function de(t, e) {
-  t && te.flushSync(() => t.dispatchEvent(e));
+function Ee(t, e) {
+  t && G.flushSync(() => t.dispatchEvent(e));
 }
-function fe(t, e) {
+function be(t, e) {
   typeof t == "function" ? t(e) : t != null && (t.current = e);
 }
-function pe(...t) {
-  return (e) => t.forEach((n) => fe(n, e));
+function Ce(...t) {
+  return (e) => t.forEach((n) => be(n, e));
 }
-function $(...t) {
-  return o.useCallback(pe(...t), t);
+function V(...t) {
+  return s.useCallback(Ce(...t), t);
 }
-function T(t) {
-  const e = o.useRef(t);
-  return o.useEffect(() => {
+function A(t) {
+  const e = s.useRef(t);
+  return s.useEffect(() => {
     e.current = t;
-  }), o.useMemo(() => (...n) => {
+  }), s.useMemo(() => (...n) => {
     var r;
     return (r = e.current) == null ? void 0 : r.call(e, ...n);
   }, []);
 }
-function ye(t, e = globalThis == null ? void 0 : globalThis.document) {
-  const n = T(t);
-  o.useEffect(() => {
-    const r = (s) => {
-      s.key === "Escape" && n(s);
+function Pe(t, e = globalThis == null ? void 0 : globalThis.document) {
+  const n = A(t);
+  s.useEffect(() => {
+    const r = (o) => {
+      o.key === "Escape" && n(o);
     };
     return e.addEventListener("keydown", r, { capture: !0 }), () => e.removeEventListener("keydown", r, { capture: !0 });
   }, [n, e]);
 }
-var he = "DismissableLayer", S = "dismissableLayer.update", me = "dismissableLayer.pointerDownOutside", ve = "dismissableLayer.focusOutside", A, U = o.createContext({
+var Le = "DismissableLayer", B = "dismissableLayer.update", we = "dismissableLayer.pointerDownOutside", Re = "dismissableLayer.focusOutside", $, K = s.createContext({
   layers: /* @__PURE__ */ new Set(),
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
   branches: /* @__PURE__ */ new Set()
-}), z = o.forwardRef(
+}), X = s.forwardRef(
   (t, e) => {
     const {
       disableOutsidePointerEvents: n = !1,
       onEscapeKeyDown: r,
-      onPointerDownOutside: s,
+      onPointerDownOutside: o,
       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, H = c.layersWithOutsidePointerEventsDisabled.size > 0, B = W >= X, Y = be((f) => {
-      const L = f.target, k = [...c.branches].some((w) => w.contains(L));
-      !B || k || (s == null || s(f), l == null || l(f), f.defaultPrevented || a == null || a());
-    }, y), N = Ce((f) => {
-      const L = f.target;
-      [...c.branches].some((w) => w.contains(L)) || (i == null || i(f), l == null || l(f), f.defaultPrevented || a == null || a());
-    }, y);
-    return ye((f) => {
-      W === c.layers.size - 1 && (r == null || r(f), !f.defaultPrevented && a && (f.preventDefault(), a()));
-    }, 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);
+      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());
+    }, 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 = $);
         };
-    }, [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);
-    }, []), /* @__PURE__ */ d(
-      _.div,
+    }, [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,
-        ref: h,
+        ...y,
+        ref: D,
         style: {
-          pointerEvents: H ? B ? "auto" : "none" : void 0,
+          pointerEvents: M ? E ? "auto" : "none" : void 0,
           ...t.style
         },
-        onFocusCapture: R(t.onFocusCapture, N.onFocusCapture),
-        onBlurCapture: R(t.onBlurCapture, N.onBlurCapture),
-        onPointerDownCapture: R(
+        onFocusCapture: x(t.onFocusCapture, k.onFocusCapture),
+        onBlurCapture: x(t.onBlurCapture, k.onBlurCapture),
+        onPointerDownCapture: x(
           t.onPointerDownCapture,
-          Y.onPointerDownCapture
+          Z.onPointerDownCapture
         )
       }
     );
   }
 );
-z.displayName = he;
-var Ee = "DismissableLayerBranch", ge = o.forwardRef((t, e) => {
-  const n = o.useContext(U), r = o.useRef(null), s = $(e, r);
-  return o.useEffect(() => {
+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(() => {
     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__ */ u(z.div, { ...t, ref: o });
 });
-ge.displayName = Ee;
-function be(t, e = globalThis == null ? void 0 : globalThis.document) {
-  const n = T(t), r = o.useRef(!1), s = o.useRef(() => {
+Oe.displayName = De;
+function xe(t, e = globalThis == null ? void 0 : globalThis.document) {
+  const n = A(t), r = s.useRef(!1), o = s.useRef(() => {
   });
-  return o.useEffect(() => {
-    const i = (a) => {
-      if (a.target && !r.current) {
-        let u = function() {
-          V(
-            me,
+  return s.useEffect(() => {
+    const i = (c) => {
+      if (c.target && !r.current) {
+        let y = function() {
+          Y(
+            we,
             n,
-            c,
+            l,
             { 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 l = { originalEvent: c };
+        c.pointerType === "touch" ? (e.removeEventListener("click", o.current), o.current = y, e.addEventListener("click", o.current, { once: !0 })) : y();
       } else
-        e.removeEventListener("click", s.current);
+        e.removeEventListener("click", o.current);
       r.current = !1;
-    }, l = window.setTimeout(() => {
+    }, a = window.setTimeout(() => {
       e.addEventListener("pointerdown", i);
     }, 0);
     return () => {
-      window.clearTimeout(l), e.removeEventListener("pointerdown", i), e.removeEventListener("click", s.current);
+      window.clearTimeout(a), e.removeEventListener("pointerdown", i), e.removeEventListener("click", o.current);
     };
   }, [e, n]), {
     // ensures we check React component tree (not just DOM tree)
     onPointerDownCapture: () => r.current = !0
   };
 }
-function Ce(t, e = globalThis == null ? void 0 : globalThis.document) {
-  const n = T(t), r = o.useRef(!1);
-  return o.useEffect(() => {
-    const s = (i) => {
-      i.target && !r.current && V(ve, n, { originalEvent: i }, {
+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 }, {
         discrete: !1
       });
     };
-    return e.addEventListener("focusin", s), () => e.removeEventListener("focusin", s);
+    return e.addEventListener("focusin", o), () => e.removeEventListener("focusin", o);
   }, [e, n]), {
     onFocusCapture: () => r.current = !0,
     onBlurCapture: () => r.current = !1
   };
 }
-function F() {
-  const t = new CustomEvent(S);
+function _() {
+  const t = new CustomEvent(B);
   document.dispatchEvent(t);
 }
-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 ? de(s, i) : s.dispatchEvent(i);
+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);
 }
-const Le = ({
+const Te = ({
   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({
+}) => t === e[e.length - 1] ? /* @__PURE__ */ u(X, { ...r, children: n }) : /* @__PURE__ */ u(I, { children: n }), H = b.createContext({
   layers: [],
   setLayers: () => {
   },
@@ -283,135 +318,154 @@ const Le = ({
   },
   removeTopLayer: () => {
   }
-}), _e = ({ 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]);
-  }, s = (l) => {
-    n(e.filter((a) => a !== l));
+}), 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));
   }, i = () => {
-    const l = e[e.length - 1];
-    l && s(l);
+    const a = e[e.length - 1];
+    a && o(a);
   };
-  return /* @__PURE__ */ d(
-    K.Provider,
+  return /* @__PURE__ */ u(
+    H.Provider,
     {
-      value: { layers: e, setLayers: n, addLayer: r, removeLayer: s, removeTopLayer: i },
+      value: { layers: e, setLayers: n, addLayer: r, removeLayer: o, removeTopLayer: i },
       children: t
     }
   );
-}, Pe = () => E.useContext(K), we = ({
+}, Ne = () => b.useContext(H), Be = ({
   defaultOpen: t,
   open: e,
   onOpenChange: n,
   ...r
 }) => {
-  const [s, i] = ne({
+  const [o, i] = me({
     prop: e,
     onChange: n,
     defaultProp: t
   });
-  if (s)
-    return /* @__PURE__ */ d(Re, { open: s, onOpenChange: i, ...r });
-}, Re = ({
+  if (o)
+    return /* @__PURE__ */ u(We, { open: o, onOpenChange: i, ...r });
+}, We = ({
   open: t,
   onOpenChange: e,
   a11yTitle: n,
   a11yDescription: r,
-  children: s,
+  children: o,
   layer: i,
+  // Focus scope props
+  trapped: a,
+  onMountAutoFocus: c,
+  onUnmountAutoFocus: y,
   ...l
 }) => {
-  var y, b;
-  const a = E.useId(), u = Pe();
-  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;
-  return /* @__PURE__ */ d(
-    Le,
+  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,
     {
-      id: a,
-      layers: u.layers,
-      onEscapeKeyDown: (h) => {
-        h.preventDefault(), u.removeTopLayer(), e(!1);
+      id: d,
+      layers: f.layers,
+      onEscapeKeyDown: (m) => {
+        m.preventDefault(), f.removeTopLayer(), e(!1);
       },
-      onPointerDownOutside: (h) => {
-        h.preventDefault(), u.removeTopLayer(), e(!1);
+      onPointerDownOutside: (m) => {
+        m.preventDefault(), f.removeTopLayer(), e(!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);
+          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);
           },
           children: [
-            /* @__PURE__ */ D(q.Root, { children: [
-              /* @__PURE__ */ d(v.Title, { children: n }),
-              r && /* @__PURE__ */ d(v.Description, { children: r })
+            /* @__PURE__ */ S(Q.Root, { children: [
+              /* @__PURE__ */ u(v.Title, { children: n }),
+              r && /* @__PURE__ */ u(v.Description, { children: r })
             ] }),
-            /* @__PURE__ */ d(ee, { children: t && /* @__PURE__ */ d(De, { layer: c, children: /* @__PURE__ */ d(
-              g,
+            /* @__PURE__ */ u(oe, { children: t && // 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,
               {
-                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(
+                trapped: typeof a == "boolean" ? a : P,
+                onMountAutoFocus: c,
+                onUnmountAutoFocus: y,
+                asChild: !0,
+                children: /* @__PURE__ */ u(te, { children: /* @__PURE__ */ u(
                   g,
                   {
-                    direction: "column",
-                    as: O.div,
+                    as: T.div,
+                    initial: {
+                      top: `calc(var(--tgph-spacing-16) + var(--tgph-spacing-4) * ${C - 1})`
+                    },
                     animate: {
-                      scale: 1.02 - Math.abs(p - c) * 0.02,
-                      transformOrigin: "center center"
+                      top: D ? `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__ */ u(
+                      g,
+                      {
+                        direction: "column",
+                        as: T.div,
+                        animate: {
+                          scale: 1.02 - Math.abs(C - h) * 0.02,
+                          transformOrigin: "center center"
+                        },
+                        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: o
+                      },
+                      `content-${d}`
+                    )
                   },
-                  `content-${a}`
-                )
-              },
-              `container-${a}`
-            ) }) })
+                  `container-${d}`
+                ) })
+              }
+            ) }) }) })
           ]
         },
-        a
+        d
       )
     }
   );
-}, De = ({ layer: t, children: e }) => t > 0 ? e : /* @__PURE__ */ D(v.Overlay, { children: [
-  /* @__PURE__ */ d(
-    Q,
+}, Ae = ({ layer: t, children: e }) => t > 0 ? e : /* @__PURE__ */ S(v.Overlay, { children: [
+  /* @__PURE__ */ u(
+    re,
     {
-      as: O.div,
+      as: T.div,
       initial: { opacity: 0 },
       animate: { opacity: 1 },
       exit: { opacity: 0 },
@@ -428,24 +482,41 @@ const Le = ({
     }
   ),
   e
-] }), Oe = E.forwardRef(
-  ({ children: t, ...e }, n) => /* @__PURE__ */ d(Z, { trapped: !0, children: /* @__PURE__ */ d(v.Content, { ref: n, asChild: !0, ...e, children: /* @__PURE__ */ d(g, { direction: "column", h: "full", ...e, children: t }) }) })
-), xe = ({
+] }), 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",
   ...n
-}) => /* @__PURE__ */ d(v.Close, { asChild: !0, children: /* @__PURE__ */ d(
-  G,
+}) => /* @__PURE__ */ u(v.Close, { asChild: !0, children: /* @__PURE__ */ u(
+  ee,
   {
-    icon: { icon: J.X, alt: "Close Modal" },
+    icon: { icon: ne.X, alt: "Close Modal" },
     variant: e,
     size: t,
     ...n
   }
-) }), Se = ({ children: t, ...e }) => /* @__PURE__ */ d(g, { direction: "column", px: "6", py: "4", ...e, children: t }), Te = ({
+) }), Fe = ({
+  style: t,
+  children: e,
+  ...n
+}) => /* @__PURE__ */ u(
+  g,
+  {
+    direction: "column",
+    px: "6",
+    py: "4",
+    style: {
+      overflowY: "auto",
+      ...t
+    },
+    ...n,
+    children: e
+  }
+), $e = ({
   children: t,
   ...e
-}) => /* @__PURE__ */ d(
+}) => /* @__PURE__ */ u(
   g,
   {
     direction: "row",
@@ -457,10 +528,10 @@ const Le = ({
     ...e,
     children: t
   }
-), We = ({
+), _e = ({
   children: t,
   ...e
-}) => /* @__PURE__ */ d(
+}) => /* @__PURE__ */ u(
   g,
   {
     direction: "row",
@@ -473,17 +544,17 @@ const Le = ({
     ...e,
     children: t
   }
-), Be = {};
-Object.assign(Be, {
-  Root: we,
-  Content: Oe,
-  Close: xe,
-  Body: Se,
-  Header: Te,
-  Footer: We
+), Ie = {};
+Object.assign(Ie, {
+  Root: Be,
+  Content: Me,
+  Close: ke,
+  Body: Fe,
+  Header: $e,
+  Footer: _e
 });
 export {
-  Be as Modal,
-  _e as ModalStackingProvider
+  Ie as Modal,
+  qe as ModalStackingProvider
 };
 //# sourceMappingURL=index.mjs.map