@purpur/library 9.9.0 → 9.10.0

package/dist/popover-wiiwtqWE.mjs

@@ -0,0 +1,1043 @@
+import { jsx as a, Fragment as ke, jsxs as T } from "react/jsx-runtime";
+import { b as ne } from "./button-4-yWOgtD.mjs";
+import * as h from "react";
+import { createContext as ge, useContext as se, useState as W, useCallback as R, useMemo as Pt, useEffect as j, forwardRef as ve, useRef as $ } from "react";
+import { a as Ct } from "./variables-DkCN2x27.mjs";
+import { P as q, c as X, a as St, u as xt } from "./index-DCcK_d4W.mjs";
+import { u as ie } from "./index-DLcqcWxM.mjs";
+import { c as Me, u as yt, b as Fe } from "./index-DOfn3ixy.mjs";
+import { P as bt, h as At, R as Ot, u as Rt, F as Nt, D as Ft } from "./index-CLMd7NJE.mjs";
+import { u as Et } from "./index-CEQ35j8b.mjs";
+import { u as Tt, o as kt, s as Mt, l as Dt, n as It, p as jt, q as $t, k as Ht, m as Bt } from "./floating-ui.react-dom-EredA301.mjs";
+import { u as zt } from "./index-DPxjTK4w.mjs";
+import { P as De } from "./index-DDrLXRUs.mjs";
+import { r as Wt } from "./close.es-BPmk2wkU.mjs";
+import { P as Ie } from "./paragraph-CwAdFoIm.mjs";
+import "./ThemeProvider-BJ25_asg.mjs";
+import { u as Lt } from "./useThemePortalContainer-D13Xx24N.mjs";
+import { c as U } from "./bind-CU-R61T-.mjs";
+import { H as Kt } from "./heading-xwBuT_-9.mjs";
+const me = ge(null), _e = () => {
+  const e = se(me);
+  if (!e)
+    throw new Error("usePopoverFlow must be used within a PopoverFlow provider");
+  return e;
+}, G = () => se(me), Yt = ({
+  children: e,
+  initialStep: t = 1,
+  onComplete: o,
+  onDismiss: n,
+  separatorText: r,
+  stepText: s,
+  backLabel: i,
+  nextLabel: p,
+  finishLabel: l,
+  openDelay: u = 0
+}) => {
+  const [g, d] = W(t), [f, P] = W(/* @__PURE__ */ new Set()), m = R((_) => {
+    P((b) => {
+      const O = new Set(b);
+      return O.add(_), O;
+    });
+  }, []), S = R((_) => {
+    P((b) => {
+      const O = new Set(b);
+      return O.delete(_), O;
+    });
+  }, []), v = R(() => {
+    d((_) => {
+      const b = _ + 1;
+      return b > f.size ? (o?.(), _) : b;
+    });
+  }, [f.size, o]), y = R(() => {
+    d((_) => Math.max(1, _ - 1));
+  }, []), N = R(() => {
+    d(0), n?.();
+  }, [n]), A = Pt(
+    () => ({
+      currentStep: g,
+      totalSteps: f.size,
+      next: v,
+      back: y,
+      dismiss: N,
+      registerStep: m,
+      unregisterStep: S,
+      separatorText: r,
+      stepText: s,
+      backLabel: i,
+      nextLabel: p,
+      finishLabel: l,
+      openDelay: u
+    }),
+    [
+      g,
+      f.size,
+      v,
+      y,
+      N,
+      m,
+      S,
+      r,
+      s,
+      i,
+      p,
+      l,
+      u
+    ]
+  );
+  return /* @__PURE__ */ a(me.Provider, { value: A, children: e });
+}, we = ge(null), ae = () => se(we), je = ge({ negative: !1 }), Pe = () => se(je), Xt = 150, Ee = {
+  MAX_MD: `(max-width: ${Ct})`
+}, Ce = () => {
+  const e = window.matchMedia(Ee.MAX_MD);
+  function t() {
+    n(e.matches);
+  }
+  const [o, n] = W(() => typeof window > "u" ? !1 : window.matchMedia(Ee.MAX_MD).matches), r = R(() => {
+    let s;
+    return () => {
+      clearTimeout(s), s = setTimeout(() => t(), Xt);
+    };
+  }, [t]);
+  return j(() => {
+    if (!(typeof window > "u"))
+      return window.addEventListener("resize", r), () => window.removeEventListener("resize", r);
+  }, [r]), { isMdOrSmaller: o };
+}, Se = ({
+  children: e,
+  onClick: t
+}) => {
+  const { back: o } = _e(), { negative: n } = Pe(), { isMdOrSmaller: r } = Ce();
+  return /* @__PURE__ */ a(
+    ne,
+    {
+      size: "sm",
+      variant: "secondary",
+      onClick: () => {
+        t?.(), o();
+      },
+      negative: !n,
+      fullWidth: r,
+      children: e
+    }
+  );
+};
+Se.displayName = "PopoverBack";
+var qt = "Arrow", $e = h.forwardRef((e, t) => {
+  const { children: o, width: n = 10, height: r = 5, ...s } = e;
+  return /* @__PURE__ */ a(
+    q.svg,
+    {
+      ...s,
+      ref: t,
+      width: n,
+      height: r,
+      viewBox: "0 0 30 10",
+      preserveAspectRatio: "none",
+      children: e.asChild ? o : /* @__PURE__ */ a("polygon", { points: "0,0 30,0 15,10" })
+    }
+  );
+});
+$e.displayName = qt;
+var Ut = $e, xe = "Popper", [He, Be] = Me(xe), [Gt, ze] = He(xe), We = (e) => {
+  const { __scopePopper: t, children: o } = e, [n, r] = h.useState(null);
+  return /* @__PURE__ */ a(Gt, { scope: t, anchor: n, onAnchorChange: r, children: o });
+};
+We.displayName = xe;
+var Le = "PopperAnchor", Ke = h.forwardRef(
+  (e, t) => {
+    const { __scopePopper: o, virtualRef: n, ...r } = e, s = ze(Le, o), i = h.useRef(null), p = ie(t, i), l = h.useRef(null);
+    return h.useEffect(() => {
+      const u = l.current;
+      l.current = n?.current || i.current, u !== l.current && s.onAnchorChange(l.current);
+    }), n ? null : /* @__PURE__ */ a(q.div, { ...r, ref: p });
+  }
+);
+Ke.displayName = Le;
+var ye = "PopperContent", [Vt, Zt] = He(ye), Ye = h.forwardRef(
+  (e, t) => {
+    const {
+      __scopePopper: o,
+      side: n = "bottom",
+      sideOffset: r = 0,
+      align: s = "center",
+      alignOffset: i = 0,
+      arrowPadding: p = 0,
+      avoidCollisions: l = !0,
+      collisionBoundary: u = [],
+      collisionPadding: g = 0,
+      sticky: d = "partial",
+      hideWhenDetached: f = !1,
+      updatePositionStrategy: P = "optimized",
+      onPlaced: m,
+      ...S
+    } = e, v = ze(ye, o), [y, N] = h.useState(null), A = ie(t, (Y) => N(Y)), [_, b] = h.useState(null), O = zt(_), pe = O?.width ?? 0, Q = O?.height ?? 0, J = n + (s !== "center" ? "-" + s : ""), ee = typeof g == "number" ? g : { top: 0, right: 0, bottom: 0, left: 0, ...g }, K = Array.isArray(u) ? u : [u], le = K.length > 0, H = {
+      padding: ee,
+      boundary: K.filter(Jt),
+      // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
+      altBoundary: le
+    }, { refs: ue, floatingStyles: te, placement: de, isPositioned: B, middlewareData: c } = Tt({
+      // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
+      strategy: "fixed",
+      placement: J,
+      whileElementsMounted: (...Y) => Ht(...Y, {
+        animationFrame: P === "always"
+      }),
+      elements: {
+        reference: v.anchor
+      },
+      middleware: [
+        kt({ mainAxis: r + Q, alignmentAxis: i }),
+        l && Mt({
+          mainAxis: !0,
+          crossAxis: !1,
+          limiter: d === "partial" ? Bt() : void 0,
+          ...H
+        }),
+        l && Dt({ ...H }),
+        It({
+          ...H,
+          apply: ({ elements: Y, rects: Ne, availableWidth: vt, availableHeight: mt }) => {
+            const { width: _t, height: wt } = Ne.reference, re = Y.floating.style;
+            re.setProperty("--radix-popper-available-width", `${vt}px`), re.setProperty("--radix-popper-available-height", `${mt}px`), re.setProperty("--radix-popper-anchor-width", `${_t}px`), re.setProperty("--radix-popper-anchor-height", `${wt}px`);
+          }
+        }),
+        _ && jt({ element: _, padding: p }),
+        eo({ arrowWidth: pe, arrowHeight: Q }),
+        f && $t({ strategy: "referenceHidden", ...H })
+      ]
+    }), [w, C] = Ue(de), F = yt(m);
+    Fe(() => {
+      B && F?.();
+    }, [B, F]);
+    const D = c.arrow?.x, x = c.arrow?.y, E = c.arrow?.centerOffset !== 0, [I, oe] = h.useState();
+    return Fe(() => {
+      y && oe(window.getComputedStyle(y).zIndex);
+    }, [y]), /* @__PURE__ */ a(
+      "div",
+      {
+        ref: ue.setFloating,
+        "data-radix-popper-content-wrapper": "",
+        style: {
+          ...te,
+          transform: B ? te.transform : "translate(0, -200%)",
+          // keep off the page when measuring
+          minWidth: "max-content",
+          zIndex: I,
+          "--radix-popper-transform-origin": [
+            c.transformOrigin?.x,
+            c.transformOrigin?.y
+          ].join(" "),
+          // hide the content if using the hide middleware and should be hidden
+          // set visibility to hidden and disable pointer events so the UI behaves
+          // as if the PopperContent isn't there at all
+          ...c.hide?.referenceHidden && {
+            visibility: "hidden",
+            pointerEvents: "none"
+          }
+        },
+        dir: e.dir,
+        children: /* @__PURE__ */ a(
+          Vt,
+          {
+            scope: o,
+            placedSide: w,
+            onArrowChange: b,
+            arrowX: D,
+            arrowY: x,
+            shouldHideArrow: E,
+            children: /* @__PURE__ */ a(
+              q.div,
+              {
+                "data-side": w,
+                "data-align": C,
+                ...S,
+                ref: A,
+                style: {
+                  ...S.style,
+                  // if the PopperContent hasn't been placed yet (not all measurements done)
+                  // we prevent animations so that users's animation don't kick in too early referring wrong sides
+                  animation: B ? void 0 : "none"
+                }
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+Ye.displayName = ye;
+var Xe = "PopperArrow", Qt = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+}, qe = h.forwardRef(function(t, o) {
+  const { __scopePopper: n, ...r } = t, s = Zt(Xe, n), i = Qt[s.placedSide];
+  return (
+    // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
+    // doesn't report size as we'd expect on SVG elements.
+    // it reports their bounding box which is effectively the largest path inside the SVG.
+    /* @__PURE__ */ a(
+      "span",
+      {
+        ref: s.onArrowChange,
+        style: {
+          position: "absolute",
+          left: s.arrowX,
+          top: s.arrowY,
+          [i]: 0,
+          transformOrigin: {
+            top: "",
+            right: "0 0",
+            bottom: "center 0",
+            left: "100% 0"
+          }[s.placedSide],
+          transform: {
+            top: "translateY(100%)",
+            right: "translateY(50%) rotate(90deg) translateX(-50%)",
+            bottom: "rotate(180deg)",
+            left: "translateY(50%) rotate(-90deg) translateX(50%)"
+          }[s.placedSide],
+          visibility: s.shouldHideArrow ? "hidden" : void 0
+        },
+        children: /* @__PURE__ */ a(
+          Ut,
+          {
+            ...r,
+            ref: o,
+            style: {
+              ...r.style,
+              // ensures the element can be measured correctly (mostly for if SVG)
+              display: "block"
+            }
+          }
+        )
+      }
+    )
+  );
+});
+qe.displayName = Xe;
+function Jt(e) {
+  return e !== null;
+}
+var eo = (e) => ({
+  name: "transformOrigin",
+  options: e,
+  fn(t) {
+    const { placement: o, rects: n, middlewareData: r } = t, i = r.arrow?.centerOffset !== 0, p = i ? 0 : e.arrowWidth, l = i ? 0 : e.arrowHeight, [u, g] = Ue(o), d = { start: "0%", center: "50%", end: "100%" }[g], f = (r.arrow?.x ?? 0) + p / 2, P = (r.arrow?.y ?? 0) + l / 2;
+    let m = "", S = "";
+    return u === "bottom" ? (m = i ? d : `${f}px`, S = `${-l}px`) : u === "top" ? (m = i ? d : `${f}px`, S = `${n.floating.height + l}px`) : u === "right" ? (m = `${-l}px`, S = i ? d : `${P}px`) : u === "left" && (m = `${n.floating.width + l}px`, S = i ? d : `${P}px`), { data: { x: m, y: S } };
+  }
+});
+function Ue(e) {
+  const [t, o = "center"] = e.split("-");
+  return [t, o];
+}
+var to = We, Ge = Ke, oo = Ye, ro = qe, ce = "Popover", [Ve] = Me(ce, [
+  Be
+]), V = Be(), [no, k] = Ve(ce), Ze = (e) => {
+  const {
+    __scopePopover: t,
+    children: o,
+    open: n,
+    defaultOpen: r,
+    onOpenChange: s,
+    modal: i = !1
+  } = e, p = V(t), l = h.useRef(null), [u, g] = h.useState(!1), [d, f] = xt({
+    prop: n,
+    defaultProp: r ?? !1,
+    onChange: s,
+    caller: ce
+  });
+  return /* @__PURE__ */ a(to, { ...p, children: /* @__PURE__ */ a(
+    no,
+    {
+      scope: t,
+      contentId: Et(),
+      triggerRef: l,
+      open: d,
+      onOpenChange: f,
+      onOpenToggle: h.useCallback(() => f((P) => !P), [f]),
+      hasCustomAnchor: u,
+      onCustomAnchorAdd: h.useCallback(() => g(!0), []),
+      onCustomAnchorRemove: h.useCallback(() => g(!1), []),
+      modal: i,
+      children: o
+    }
+  ) });
+};
+Ze.displayName = ce;
+var Qe = "PopoverAnchor", so = h.forwardRef(
+  (e, t) => {
+    const { __scopePopover: o, ...n } = e, r = k(Qe, o), s = V(o), { onCustomAnchorAdd: i, onCustomAnchorRemove: p } = r;
+    return h.useEffect(() => (i(), () => p()), [i, p]), /* @__PURE__ */ a(Ge, { ...s, ...n, ref: t });
+  }
+);
+so.displayName = Qe;
+var Je = "PopoverTrigger", et = h.forwardRef(
+  (e, t) => {
+    const { __scopePopover: o, ...n } = e, r = k(Je, o), s = V(o), i = ie(t, r.triggerRef), p = /* @__PURE__ */ a(
+      q.button,
+      {
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": r.open,
+        "aria-controls": r.contentId,
+        "data-state": at(r.open),
+        ...n,
+        ref: i,
+        onClick: X(e.onClick, r.onOpenToggle)
+      }
+    );
+    return r.hasCustomAnchor ? p : /* @__PURE__ */ a(Ge, { asChild: !0, ...s, children: p });
+  }
+);
+et.displayName = Je;
+var be = "PopoverPortal", [io, ao] = Ve(be, {
+  forceMount: void 0
+}), tt = (e) => {
+  const { __scopePopover: t, forceMount: o, children: n, container: r } = e, s = k(be, t);
+  return /* @__PURE__ */ a(io, { scope: t, forceMount: o, children: /* @__PURE__ */ a(De, { present: o || s.open, children: /* @__PURE__ */ a(bt, { asChild: !0, container: r, children: n }) }) });
+};
+tt.displayName = be;
+var L = "PopoverContent", ot = h.forwardRef(
+  (e, t) => {
+    const o = ao(L, e.__scopePopover), { forceMount: n = o.forceMount, ...r } = e, s = k(L, e.__scopePopover);
+    return /* @__PURE__ */ a(De, { present: n || s.open, children: s.modal ? /* @__PURE__ */ a(po, { ...r, ref: t }) : /* @__PURE__ */ a(lo, { ...r, ref: t }) });
+  }
+);
+ot.displayName = L;
+var co = St("PopoverContent.RemoveScroll"), po = h.forwardRef(
+  (e, t) => {
+    const o = k(L, e.__scopePopover), n = h.useRef(null), r = ie(t, n), s = h.useRef(!1);
+    return h.useEffect(() => {
+      const i = n.current;
+      if (i) return At(i);
+    }, []), /* @__PURE__ */ a(Ot, { as: co, allowPinchZoom: !0, children: /* @__PURE__ */ a(
+      rt,
+      {
+        ...e,
+        ref: r,
+        trapFocus: o.open,
+        disableOutsidePointerEvents: !0,
+        onCloseAutoFocus: X(e.onCloseAutoFocus, (i) => {
+          i.preventDefault(), s.current || o.triggerRef.current?.focus();
+        }),
+        onPointerDownOutside: X(
+          e.onPointerDownOutside,
+          (i) => {
+            const p = i.detail.originalEvent, l = p.button === 0 && p.ctrlKey === !0, u = p.button === 2 || l;
+            s.current = u;
+          },
+          { checkForDefaultPrevented: !1 }
+        ),
+        onFocusOutside: X(
+          e.onFocusOutside,
+          (i) => i.preventDefault(),
+          { checkForDefaultPrevented: !1 }
+        )
+      }
+    ) });
+  }
+), lo = h.forwardRef(
+  (e, t) => {
+    const o = k(L, e.__scopePopover), n = h.useRef(!1), r = h.useRef(!1);
+    return /* @__PURE__ */ a(
+      rt,
+      {
+        ...e,
+        ref: t,
+        trapFocus: !1,
+        disableOutsidePointerEvents: !1,
+        onCloseAutoFocus: (s) => {
+          e.onCloseAutoFocus?.(s), s.defaultPrevented || (n.current || o.triggerRef.current?.focus(), s.preventDefault()), n.current = !1, r.current = !1;
+        },
+        onInteractOutside: (s) => {
+          e.onInteractOutside?.(s), s.defaultPrevented || (n.current = !0, s.detail.originalEvent.type === "pointerdown" && (r.current = !0));
+          const i = s.target;
+          o.triggerRef.current?.contains(i) && s.preventDefault(), s.detail.originalEvent.type === "focusin" && r.current && s.preventDefault();
+        }
+      }
+    );
+  }
+), rt = h.forwardRef(
+  (e, t) => {
+    const {
+      __scopePopover: o,
+      trapFocus: n,
+      onOpenAutoFocus: r,
+      onCloseAutoFocus: s,
+      disableOutsidePointerEvents: i,
+      onEscapeKeyDown: p,
+      onPointerDownOutside: l,
+      onFocusOutside: u,
+      onInteractOutside: g,
+      ...d
+    } = e, f = k(L, o), P = V(o);
+    return Rt(), /* @__PURE__ */ a(
+      Nt,
+      {
+        asChild: !0,
+        loop: !0,
+        trapped: n,
+        onMountAutoFocus: r,
+        onUnmountAutoFocus: s,
+        children: /* @__PURE__ */ a(
+          Ft,
+          {
+            asChild: !0,
+            disableOutsidePointerEvents: i,
+            onInteractOutside: g,
+            onEscapeKeyDown: p,
+            onPointerDownOutside: l,
+            onFocusOutside: u,
+            onDismiss: () => f.onOpenChange(!1),
+            children: /* @__PURE__ */ a(
+              oo,
+              {
+                "data-state": at(f.open),
+                role: "dialog",
+                id: f.contentId,
+                ...P,
+                ...d,
+                ref: t,
+                style: {
+                  ...d.style,
+                  "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
+                  "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
+                  "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
+                  "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
+                  "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
+                }
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+), nt = "PopoverClose", st = h.forwardRef(
+  (e, t) => {
+    const { __scopePopover: o, ...n } = e, r = k(nt, o);
+    return /* @__PURE__ */ a(
+      q.button,
+      {
+        type: "button",
+        ...n,
+        ref: t,
+        onClick: X(e.onClick, () => r.onOpenChange(!1))
+      }
+    );
+  }
+);
+st.displayName = nt;
+var uo = "PopoverArrow", it = h.forwardRef(
+  (e, t) => {
+    const { __scopePopover: o, ...n } = e, r = V(o);
+    return /* @__PURE__ */ a(ro, { ...r, ...n, ref: t });
+  }
+);
+it.displayName = uo;
+function at(e) {
+  return e ? "open" : "closed";
+}
+var ct = Ze, fo = et, ho = tt, go = ot, pt = st, vo = it;
+const Ae = ({
+  children: e,
+  asChild: t,
+  onClick: o,
+  variant: n = "primary",
+  dismiss: r = !0,
+  fullWidth: s
+}) => {
+  const i = G(), { isMdOrSmaller: p } = Ce(), { negative: l } = Pe(), f = t ? e : /* @__PURE__ */ a(
+    ne,
+    {
+      variant: n,
+      size: "sm",
+      fullWidth: s ?? p,
+      negative: !l,
+      onClick: () => {
+        o?.(), r && i?.dismiss();
+      },
+      children: e
+    }
+  );
+  return r ? /* @__PURE__ */ a(pt, { asChild: !0, children: f }) : f;
+};
+Ae.displayName = "PopoverButton";
+const mo = "_highlightState1_1w9je_1", _o = "_fadeIn_1w9je_1", wo = "_slideFromTop_1w9je_1", Po = "_slideFromBottom_1w9je_1", Co = "_slideFromLeft_1w9je_1", So = "_slideFromRight_1w9je_1", xo = "_fadeOut_1w9je_1", yo = "_slideToTop_1w9je_1", bo = "_slideToBottom_1w9je_1", Ao = "_slideToLeft_1w9je_1", Oo = "_slideToRight_1w9je_1", Z = {
+  "purpur-popover__trigger": "_purpur-popover__trigger_1w9je_1",
+  "purpur-popover__trigger-highlight": "_purpur-popover__trigger-highlight_1w9je_5",
+  "purpur-popover__trigger-highlight--state1": "_purpur-popover__trigger-highlight--state1_1w9je_14",
+  highlightState1: mo,
+  "purpur-popover__trigger-highlight--negative": "_purpur-popover__trigger-highlight--negative_1w9je_29",
+  "purpur-popover__trigger-highlight--state2": "_purpur-popover__trigger-highlight--state2_1w9je_33",
+  "purpur-popover__inner": "_purpur-popover__inner_1w9je_45",
+  "purpur-popover__content": "_purpur-popover__content_1w9je_52",
+  fadeIn: _o,
+  slideFromTop: wo,
+  slideFromBottom: Po,
+  slideFromLeft: Co,
+  slideFromRight: So,
+  fadeOut: xo,
+  slideToTop: yo,
+  slideToBottom: bo,
+  slideToLeft: Ao,
+  slideToRight: Oo,
+  "purpur-popover__arrow": "_purpur-popover__arrow_1w9je_103",
+  "purpur-popover__body": "_purpur-popover__body_1w9je_106",
+  "purpur-popover__icon": "_purpur-popover__icon_1w9je_107",
+  "purpur-popover__steps": "_purpur-popover__steps_1w9je_108",
+  "purpur-popover__title": "_purpur-popover__title_1w9je_109",
+  "purpur-popover__content--negative": "_purpur-popover__content--negative_1w9je_112",
+  "purpur-popover__header-content": "_purpur-popover__header-content_1w9je_124",
+  "purpur-popover__close": "_purpur-popover__close_1w9je_137",
+  "purpur-popover__footer": "_purpur-popover__footer_1w9je_142",
+  "purpur-popover__footer-button-group": "_purpur-popover__footer-button-group_1w9je_155"
+}, Ro = U.bind(Z), lt = () => {
+  const e = _e(), o = ae()?.walkthroughStep || e.currentStep, { totalSteps: n, separatorText: r, stepText: s } = e;
+  return /* @__PURE__ */ a(ke, { children: /* @__PURE__ */ T(
+    Ie,
+    {
+      className: Ro("purpur-popover__steps"),
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: [
+        s,
+        " ",
+        o,
+        " ",
+        r,
+        " ",
+        n
+      ]
+    }
+  ) });
+};
+lt.displayName = "PopoverSteps";
+const Te = U.bind(Z), Oe = ({ children: e, className: t }) => {
+  const o = G(), n = ae(), r = o && n && n.walkthroughStep > 0;
+  return /* @__PURE__ */ T("div", { className: Te("purpur-popover__footer", t), children: [
+    r && /* @__PURE__ */ a(lt, {}),
+    /* @__PURE__ */ a("div", { className: Te("purpur-popover__footer-button-group"), children: e })
+  ] });
+};
+Oe.displayName = "PopoverFooter";
+const fe = U.bind(Z), ut = ve(
+  ({ title: e, icon: t }, o) => /* @__PURE__ */ T("div", { ref: o, className: fe("purpur-popover__header-content"), children: [
+    t && /* @__PURE__ */ a("span", { className: fe("purpur-popover__icon"), children: t }),
+    /* @__PURE__ */ a(
+      Kt,
+      {
+        tag: "h2",
+        variant: "title-100",
+        className: fe("purpur-popover__title"),
+        id: "popover-heading",
+        children: e
+      }
+    )
+  ] })
+);
+ut.displayName = "PopoverHeader";
+const Re = ({
+  children: e,
+  onClick: t
+}) => {
+  const { next: o } = _e(), { negative: n } = Pe(), { isMdOrSmaller: r } = Ce();
+  return /* @__PURE__ */ a(
+    ne,
+    {
+      size: "sm",
+      variant: "primary",
+      onClick: () => {
+        t?.(), o();
+      },
+      negative: !n,
+      fullWidth: r,
+      children: e
+    }
+  );
+};
+Re.displayName = "PopoverNext";
+const z = U.bind(Z), dt = ve(
+  ({
+    children: e,
+    className: t,
+    beakPosition: o = "down",
+    align: n = "center",
+    alignOffset: r = 0,
+    sideOffset: s = 5,
+    // How close or far the popover is from the trigger
+    negative: i = !1,
+    closeIconAriaLabel: p,
+    title: l,
+    icon: u,
+    body: g,
+    onAction: d,
+    zIndex: f = 210,
+    container: P,
+    ...m
+  }, S) => {
+    const v = G(), y = ae(), N = $(null), A = $(!1), _ = Lt(), b = P === void 0 ? _ : P ?? void 0, pe = {
+      up: "bottom",
+      right: "left",
+      down: "top",
+      left: "right",
+      none: "bottom"
+      // Default position when no arrow
+    }[o], Q = o !== "none", J = (c) => Array.from(c.querySelectorAll("button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])")).filter(
+      (C) => !C.hasAttribute("aria-hidden")
+    ), ee = (c, w, C) => {
+      const F = J(document.body), D = F.indexOf(w);
+      if (D === -1)
+        return;
+      const x = C === "next" ? 1 : -1;
+      for (let E = D + x; E >= 0 && E < F.length; E += x) {
+        const I = F[E];
+        if (!c.contains(I)) {
+          I.focus();
+          return;
+        }
+      }
+    };
+    let K = e;
+    if (v && !e) {
+      const c = y?.walkthroughStep || v.currentStep, w = c === 1, C = c === v.totalSteps;
+      K = /* @__PURE__ */ T(Oe, { children: [
+        !w && /* @__PURE__ */ a(Se, { onClick: () => d?.({ type: "back", step: c }), children: v.backLabel }),
+        C ? /* @__PURE__ */ a(
+          Ae,
+          {
+            onClick: () => d?.({ type: "finish", step: c }),
+            dismiss: !0,
+            children: v.finishLabel
+          }
+        ) : /* @__PURE__ */ a(Re, { onClick: () => d?.({ type: "next", step: c }), children: v.nextLabel })
+      ] });
+    }
+    const le = (c) => {
+      c.preventDefault();
+      const w = c.currentTarget, C = N.current?.querySelector(
+        "#popover-heading"
+      );
+      setTimeout(() => {
+        if (v && C) {
+          C.setAttribute("tabindex", "-1"), C.focus();
+          return;
+        }
+        w.setAttribute("tabindex", "-1"), w.focus();
+      }, 0), m.onOpenAutoFocus?.(c);
+    }, H = (c) => {
+      if (c.key !== "Tab") {
+        m.onKeyDown?.(c);
+        return;
+      }
+      const w = c.currentTarget, C = J(w);
+      if (C.length === 0) {
+        m.onKeyDown?.(c);
+        return;
+      }
+      const F = C[0], D = C[C.length - 1], x = document.activeElement, E = x === F, I = x === D, oe = x !== null && w.contains(x) && x.tabIndex === -1;
+      if (!v) {
+        x !== null && (c.shiftKey && E ? (c.preventDefault(), ee(w, x, "previous")) : !c.shiftKey && I && (c.preventDefault(), ee(w, x, "next"))), m.onKeyDown?.(c);
+        return;
+      }
+      c.shiftKey && (E || oe) ? (c.preventDefault(), D.focus()) : !c.shiftKey && (I || oe) && (c.preventDefault(), F.focus()), m.onKeyDown?.(c);
+    }, ue = (c) => {
+      v && !A.current && c.preventDefault(), A.current && (A.current = !1), m.onCloseAutoFocus?.(c);
+    }, te = (c) => {
+      v && (A.current = !0, c.preventDefault()), d?.({ type: "dismiss", step: v?.currentStep }), v?.dismiss();
+    }, de = (c) => {
+      v && (A.current = !0, c.preventDefault()), d?.({ type: "dismiss", step: v?.currentStep }), v?.dismiss();
+    }, B = (c) => {
+      if (y?.disableClickOutside) {
+        c.preventDefault();
+        return;
+      }
+      if (v) {
+        const w = c.target;
+        w.closest("[role='dialog']") || w.closest(".purpur-popover__trigger") || w.closest("button[aria-haspopup='dialog']") || (d?.({ type: "dismiss", step: v.currentStep }), setTimeout(() => {
+          v.dismiss();
+        }, 0));
+      }
+    };
+    return /* @__PURE__ */ a(ho, { container: b, children: /* @__PURE__ */ T(
+      go,
+      {
+        "data-testid": "popover-content",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": m["aria-label"] ? void 0 : "popover-heading",
+        ref: S,
+        side: pe,
+        sideOffset: s,
+        align: n,
+        alignOffset: r,
+        style: {
+          "--popover-z-index": f
+        },
+        className: z(
+          "purpur-popover__content",
+          { "purpur-popover__content--negative": i },
+          t
+        ),
+        onOpenAutoFocus: le,
+        onCloseAutoFocus: ue,
+        onKeyDown: H,
+        onEscapeKeyDown: de,
+        onInteractOutside: B,
+        ...m,
+        children: [
+          /* @__PURE__ */ T(je.Provider, { value: { negative: i }, children: [
+            /* @__PURE__ */ T("div", { className: z("purpur-popover__inner"), children: [
+              /* @__PURE__ */ a(ut, { ref: N, title: l, icon: u }),
+              /* @__PURE__ */ a(Ie, { className: z("purpur-popover__body"), children: g })
+            ] }),
+            K,
+            /* @__PURE__ */ a(pt, { asChild: !0, onClick: te, children: /* @__PURE__ */ a(
+              ne,
+              {
+                variant: i ? "text" : "tertiary-purple",
+                size: "sm",
+                "aria-label": p,
+                className: z("purpur-popover__close"),
+                negative: !i,
+                iconOnly: !0,
+                children: /* @__PURE__ */ a(Wt, { size: "xs", className: z("purpur-popover__icon") })
+              }
+            ) })
+          ] }),
+          Q && /* @__PURE__ */ a(
+            vo,
+            {
+              className: z("purpur-popover__arrow"),
+              "aria-hidden": "true",
+              tabIndex: -1
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+dt.displayName = "PopoverContent";
+const ft = ({
+  children: e,
+  open: t,
+  defaultOpen: o = !1,
+  onOpenChange: n,
+  disableClickOutside: r,
+  ...s
+}) => {
+  const [i, p] = W(o), l = t !== void 0, u = l ? t : i;
+  return /* @__PURE__ */ a(ct, { open: u, onOpenChange: (d) => {
+    l || p(d), n?.(d);
+  }, ...s, children: /* @__PURE__ */ a(
+    we.Provider,
+    {
+      value: {
+        isOpen: u,
+        walkthroughStep: 0,
+        disableClickOutside: r
+      },
+      children: e
+    }
+  ) });
+};
+ft.displayName = "PopoverStandalone";
+const No = (e) => {
+  const t = $(null), o = R(() => {
+    t.current && (cancelAnimationFrame(t.current), t.current = null);
+  }, []);
+  return { scrollToElement: R(
+    (r, s = 600) => {
+      const i = window.matchMedia("(prefers-reduced-motion: reduce)").matches, p = r.getBoundingClientRect(), l = p.top + window.pageYOffset, u = p.height, g = window.innerHeight;
+      let d = l - g / 2 + u / 2;
+      const f = document.documentElement.scrollHeight, P = Math.max(0, f - g);
+      if (d = Math.max(0, Math.min(d, P)), i) {
+        window.scrollTo(0, d), e?.();
+        return;
+      }
+      const m = window.pageYOffset, S = d - m, v = performance.now(), y = (N) => {
+        const A = N - v, _ = Math.min(A / s, 1), b = _ < 0.5 ? 2 * _ * _ : 1 - Math.pow(-2 * _ + 2, 2) / 2, O = m + S * b;
+        window.scrollTo(0, O), _ < 1 ? t.current = requestAnimationFrame(y) : (t.current = null, e?.());
+      };
+      o(), t.current = requestAnimationFrame(y);
+    },
+    [e, o]
+  ), cancelScroll: o };
+};
+function Fo(e) {
+  const t = $(null), o = ae(), n = G(), r = $(!1), { scrollToElement: s, cancelScroll: i } = No(o?.onScrollComplete);
+  return j(() => {
+    typeof e == "function" ? e(t.current) : e && (e.current = t.current);
+  }, [e]), j(() => {
+    if (n && o?.walkthroughStep !== void 0 && n.currentStep === o.walkthroughStep && t.current && !r.current) {
+      const l = t.current, u = l.getBoundingClientRect(), g = 100;
+      u.top >= -g && u.bottom <= window.innerHeight + g && u.left >= -g && u.right <= window.innerWidth + g ? o?.onScrollComplete?.() : (o?.onScrollStart?.(), s(l)), r.current = !0;
+    } else n?.currentStep !== o?.walkthroughStep && (r.current = !1, i());
+  }, [n?.currentStep, o?.walkthroughStep, n, s, i, o]), j(() => {
+    t.current && t.current.removeAttribute("aria-expanded");
+  }, [o?.isOpen]), j(() => i, [i]), { triggerRef: t, context: o };
+}
+const he = U.bind(Z), ht = ve(
+  ({ children: e, className: t, highlight: o = !0, negative: n = !1, ...r }, s) => {
+    const { triggerRef: i, context: p } = Fo(s);
+    return /* @__PURE__ */ T(
+      "div",
+      {
+        className: he(
+          "purpur-popover__trigger",
+          { "purpur-popover__trigger--highlight": p?.isOpen && o },
+          t
+        ),
+        children: [
+          p?.isOpen && o && /* @__PURE__ */ T(ke, { children: [
+            /* @__PURE__ */ a(
+              "div",
+              {
+                className: he(
+                  "purpur-popover__trigger-highlight",
+                  "purpur-popover__trigger-highlight--state1",
+                  { "purpur-popover__trigger-highlight--negative": n }
+                ),
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ a(
+              "div",
+              {
+                className: he(
+                  "purpur-popover__trigger-highlight",
+                  "purpur-popover__trigger-highlight--state2",
+                  { "purpur-popover__trigger-highlight--negative": n }
+                ),
+                "aria-hidden": "true"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a(
+            fo,
+            {
+              ref: i,
+              asChild: !0,
+              "aria-haspopup": "dialog",
+              ...r,
+              children: e
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ht.displayName = "PopoverTrigger";
+function Eo(e) {
+  const t = G(), [o, n] = W(!1), [r, s] = W(!1), i = $(null), p = $(0);
+  j(() => t ? (t.registerStep(e), () => t.unregisterStep(e)) : () => {
+  }, [t, e]);
+  const l = t?.currentStep === e, u = R(() => {
+    s(!0);
+  }, []), g = R(() => {
+    if (s(!1), l) {
+      const f = t.openDelay;
+      i.current = window.setTimeout(() => {
+        n(!0), p.current = Date.now();
+      }, f);
+    }
+  }, [l, t]);
+  j(() => {
+    if (i.current && (clearTimeout(i.current), i.current = null), l) {
+      if (!r) {
+        const f = t.openDelay;
+        i.current = window.setTimeout(() => {
+          n(!0), p.current = Date.now();
+        }, f);
+      }
+    } else
+      n(!1), s(!1), p.current = 0;
+    return () => {
+      i.current && (clearTimeout(i.current), i.current = null);
+    };
+  }, [l, r, t]);
+  const d = R(
+    (f, P) => {
+      if (P?.(f), !f && o && t && t.currentStep === e) {
+        if (Date.now() - p.current < 10 || i.current !== null)
+          return;
+        t.dismiss();
+      }
+    },
+    [o, t, e]
+  );
+  return {
+    actuallyOpen: o,
+    onScrollStart: u,
+    onScrollComplete: g,
+    handleOpenChange: d
+  };
+}
+const gt = ({
+  children: e,
+  step: t,
+  onOpenChange: o,
+  disableClickOutside: n = !0,
+  ...r
+}) => {
+  const { actuallyOpen: s, onScrollStart: i, onScrollComplete: p, handleOpenChange: l } = Eo(t);
+  return /* @__PURE__ */ a(
+    ct,
+    {
+      modal: !0,
+      open: s,
+      onOpenChange: (u) => l(u, o),
+      ...r,
+      children: /* @__PURE__ */ a(
+        we.Provider,
+        {
+          value: {
+            isOpen: s,
+            walkthroughStep: t,
+            onScrollStart: i,
+            onScrollComplete: p,
+            disableClickOutside: n
+          },
+          children: e
+        }
+      )
+    }
+  );
+};
+gt.displayName = "PopoverWalkthrough";
+const M = (e) => {
+  const { multistep: t = !1, disableClickOutside: o, ...n } = e;
+  return t ? /* @__PURE__ */ a(
+    gt,
+    {
+      ...n,
+      disableClickOutside: o ?? !0
+    }
+  ) : /* @__PURE__ */ a(
+    ft,
+    {
+      ...n,
+      disableClickOutside: o
+    }
+  );
+};
+M.Back = Se;
+M.Button = Ae;
+M.Content = dt;
+M.Flow = Yt;
+M.Footer = Oe;
+M.Next = Re;
+M.Trigger = ht;
+M.displayName = "Popover";
+export {
+  M as P
+};
+//# sourceMappingURL=popover-wiiwtqWE.mjs.map