@purpur/library 9.0.0 → 9.0.2

package/dist/popover-DBMI9Jy1.mjs

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