@spear-ai/spectral 1.6.17 → 1.8.0

package/dist/Tray.js

@@ -1,6 +1,6 @@
 "use client";
 import "./styles/main.css";
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
 import { ButtonIcon as K } from "./ButtonIcon.js";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
@@ -15,7 +15,7 @@ import "./Icons/ChevronDownIcon.js";
 import "./Icons/ChevronUpIcon.js";
 import "./Icons/ClockIcon.js";
 import "./Icons/CloseCircleIcon.js";
-import { CloseIcon as h } from "./Icons/CloseIcon.js";
+import { CloseIcon as f } from "./Icons/CloseIcon.js";
 import "./Icons/DashboardIcon.js";
 import "./Icons/DatabaseIcon.js";
 import "./Icons/DeleteIcon.js";
@@ -35,7 +35,6 @@ import "./Icons/KeyboardIcon.js";
 import "./Icons/LabelIcon.js";
 import "./Icons/LassoIcon.js";
 import "./Icons/LineToolIcon.js";
-import "./Icons/LineToolIcon2.js";
 import "./Icons/LiveViewIcon.js";
 import "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
@@ -49,6 +48,7 @@ import "./Icons/PanelIconClose.js";
 import "./Icons/PanelIconOpen.js";
 import "./Icons/PlayIcon.js";
 import "./Icons/PlusIcon.js";
+import "./Icons/PolygonIcon.js";
 import "./Icons/ResetIcon.js";
 import "./Icons/ReviewedIcon.js";
 import "./Icons/ScissorsIcon.js";
@@ -70,10 +70,11 @@ import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
 import { cn as a } from "./utils/twUtils.js";
 import { c as M } from "./index-D29mdTf5.js";
-import { createContext as H, useRef as f, useMemo as T, useContext as I } from "react";
-import { j as v, A as O } from "./index-CeP1E2kK.js";
-import { D as m } from "./index-B3UpsZ2x.js";
-import { m as g } from "./proxy-Cukf-VVj.js";
+import { createContext as H, useRef as h, useMemo as T, useContext as I } from "react";
+import { j as g } from "./index-DEYs15GP.js";
+import { D as s } from "./index-CrjD9cAD.js";
+import { m as v } from "./proxy-CgaCj1WQ.js";
+import { A as O } from "./index-DdFoGvON.js";
 const j = M("fixed bottom-4 left-1/2 z-10 -translate-x-1/2 overflow-hidden rounded-2xl bg-drawer-bg outline-none w-full sm:max-md:max-w-full", {
   variants: {
     size: {
@@ -91,50 +92,50 @@ const j = M("fixed bottom-4 left-1/2 z-10 -translate-x-1/2 overflow-hidden round
   if (!t)
     throw new Error("Tray components must be used within Tray root");
   return t;
-}, B = ({ size: t = "sm", children: e, ...o }) => {
-  const i = f("default"), n = T(
+}, B = ({ children: t, size: r = "sm", ...o }) => {
+  const i = h("default"), n = T(
     () => ({
-      size: t,
       animationKey: i.current,
       setAnimationKey: (p) => {
         i.current = p;
-      }
+      },
+      size: r
     }),
-    [t]
+    [r]
   );
-  return /* @__PURE__ */ r(N.Provider, { value: n, children: /* @__PURE__ */ r(m.Root, { "data-testid": "spectral-tray", ...o, children: e }) });
+  return /* @__PURE__ */ e(N.Provider, { value: n, children: /* @__PURE__ */ e(s.Root, { "data-testid": "spectral-tray", ...o, children: t }) });
 };
 B.displayName = "Tray";
-const S = ({
-  ref: t,
-  className: e,
+const P = ({
+  className: t,
+  ref: r,
   ...o
-}) => /* @__PURE__ */ r(m.Trigger, { className: a(e), "data-testid": "spectral-tray-trigger", "data-vaul-no-drag": "", ref: t, ...o });
-S.displayName = "TrayTrigger";
+}) => /* @__PURE__ */ e(s.Trigger, { className: a(t), "data-testid": "spectral-tray-trigger", "data-vaul-no-drag": "", ref: r, ...o });
+P.displayName = "TrayTrigger";
 const C = ({
-  ref: t,
-  className: e,
+  className: t,
+  ref: r,
   ...o
-}) => /* @__PURE__ */ r(m.Close, { asChild: !0, className: a(e), "data-testid": "spectral-tray-close", "data-vaul-no-drag": "", ref: t, ...o, children: /* @__PURE__ */ r(h, {}) });
+}) => /* @__PURE__ */ e(s.Close, { asChild: !0, className: a(t), "data-testid": "spectral-tray-close", "data-vaul-no-drag": "", ref: r, ...o, children: /* @__PURE__ */ e(f, {}) });
 C.displayName = "TrayClose";
 const w = ({
-  ref: t,
-  className: e,
+  className: t,
+  ref: r,
   ...o
-}) => /* @__PURE__ */ r(m.Overlay, { className: a("bg-overlay fixed inset-0 z-10", e), ref: t, ...o });
+}) => /* @__PURE__ */ e(s.Overlay, { className: a("bg-overlay fixed inset-0 z-10", t), ref: r, ...o });
 w.displayName = "TrayOverlay";
-const V = ({
-  ref: t,
-  className: e,
-  size: o,
-  children: i,
+const S = ({
+  children: t,
+  className: r,
+  ref: o,
+  size: i,
   ...n
 }) => {
-  const { size: p } = b(), l = o || p, [s, c] = v();
-  return /* @__PURE__ */ x(m.Portal, { children: [
-    /* @__PURE__ */ r(w, {}),
-    /* @__PURE__ */ r(m.Content, { asChild: !0, className: a(j({ size: l }), e), "data-testid": "spectral-tray-content", ref: t, ...n, children: /* @__PURE__ */ r(
-      g.div,
+  const { size: p } = b(), l = i ?? p, [m, c] = g();
+  return /* @__PURE__ */ x(s.Portal, { children: [
+    /* @__PURE__ */ e(w, {}),
+    /* @__PURE__ */ e(s.Content, { asChild: !0, className: a(j({ size: l }), r), "data-testid": "spectral-tray-content", ref: o, ...n, children: /* @__PURE__ */ e(
+      v.div,
       {
         animate: {
           height: c.height,
@@ -143,51 +144,51 @@ const V = ({
             ease: [0.25, 1, 0.5, 1]
           }
         },
-        children: /* @__PURE__ */ r("div", { ref: s, className: "px-6 pt-2.5 pb-6 antialiased", children: i })
+        children: /* @__PURE__ */ e("div", { ref: m, className: "px-6 pt-2.5 pb-6 antialiased", children: t })
       }
     ) })
   ] });
 };
-V.displayName = "TrayContent";
-const P = ({
-  ref: t,
-  className: e,
-  children: o,
+S.displayName = "TrayContent";
+const V = ({
+  children: t,
+  className: r,
+  ref: o,
   ...i
-}) => /* @__PURE__ */ x("div", { className: a("relative flex flex-col space-y-1.5 pb-4 text-start", e), "data-testid": "spectral-tray-header", ref: t, ...i, children: [
-  o,
-  /* @__PURE__ */ r(C, { className: "hover:bg-level-four absolute top-0 right-[-14px] z-10 cursor-pointer rounded-full p-1 text-neutral-400 transition-colors hover:scale-110 hover:text-neutral-100", children: /* @__PURE__ */ r(K, { icon: /* @__PURE__ */ r(h, {}), label: "Close tray", shape: "circle" }) })
+}) => /* @__PURE__ */ x("div", { className: a("relative flex flex-col space-y-1.5 pb-4 text-start", r), "data-testid": "spectral-tray-header", ref: o, ...i, children: [
+  t,
+  /* @__PURE__ */ e(C, { className: "hover:bg-level-four absolute top-0 right-[-14px] z-10 cursor-pointer rounded-full p-1 text-neutral-400 transition-colors hover:scale-110 hover:text-neutral-100", children: /* @__PURE__ */ e(K, { icon: /* @__PURE__ */ e(f, {}), label: "Close tray", shape: "circle" }) })
 ] });
-P.displayName = "TrayHeader";
+V.displayName = "TrayHeader";
 const U = ({
-  ref: t,
-  className: e,
-  children: o,
+  children: t,
+  className: r,
+  ref: o,
   ...i
-}) => /* @__PURE__ */ r("h2", { className: a("text-text-primary text-xl font-semibold", e), "data-testid": "spectral-tray-title", ref: t, ...i, children: o });
+}) => /* @__PURE__ */ e("h2", { className: a("text-text-primary text-xl font-semibold", r), "data-testid": "spectral-tray-title", ref: o, ...i, children: t });
 U.displayName = "TrayTitle";
 const _ = ({
-  ref: t,
-  className: e,
+  className: t,
+  ref: r,
   ...o
-}) => /* @__PURE__ */ r("p", { className: a("text-text-secondary text-sm", e), "data-testid": "spectral-tray-subtitle", ref: t, ...o });
+}) => /* @__PURE__ */ e("p", { className: a("text-text-secondary text-sm", t), "data-testid": "spectral-tray-subtitle", ref: r, ...o });
 _.displayName = "TraySubtitle";
-const E = ({
-  ref: t,
-  className: e,
-  children: o,
-  animationKey: i,
+const k = ({
+  animationKey: t,
+  children: r,
+  className: o,
+  ref: i,
   ...n
 }) => {
-  const { animationKey: p } = b(), l = i !== void 0 ? i : p, s = f(null), [c, y] = v(), z = T(() => {
-    const d = y.height, R = s.current, u = 0.15, A = 0.27;
-    if (!s.current)
-      return s.current = d, u;
-    const D = Math.abs(d - R);
-    return s.current = d, Math.min(Math.max(D / 500, u), A);
+  const { animationKey: p } = b(), l = t ?? p, m = h(null), [c, y] = g(), z = T(() => {
+    const d = y.height, R = m.current, A = 0.27, u = 0.15;
+    if (!m.current)
+      return m.current = d, u;
+    const D = Math.abs(d - (R ?? 0));
+    return m.current = d, Math.min(Math.max(D / 500, u), A);
   }, [y.height]);
-  return /* @__PURE__ */ r("div", { ref: t, "data-testid": "spectral-tray-body", className: a(e), ...n, children: /* @__PURE__ */ r(O, { initial: !1, mode: "popLayout", custom: l, children: /* @__PURE__ */ r(
-    g.div,
+  return /* @__PURE__ */ e("div", { ref: i, "data-testid": "spectral-tray-body", className: a(o), ...n, children: /* @__PURE__ */ e(O, { initial: !1, mode: "popLayout", custom: l, children: /* @__PURE__ */ e(
+    v.div,
     {
       animate: { opacity: 1, scale: 1, y: 0 },
       exit: { opacity: 0, scale: 0.96 },
@@ -197,19 +198,19 @@ const E = ({
         duration: z,
         ease: [0.26, 0.08, 0.25, 1]
       },
-      children: o
+      children: r
     },
     l
   ) }) });
 };
-E.displayName = "TrayBody";
+k.displayName = "TrayBody";
 export {
   B as Tray,
-  E as TrayBody,
+  k as TrayBody,
   C as TrayClose,
-  V as TrayContent,
-  P as TrayHeader,
+  S as TrayContent,
+  V as TrayHeader,
   _ as TraySubtitle,
   U as TrayTitle,
-  S as TrayTrigger
+  P as TrayTrigger
 };

package/dist/hooks/useAccordionAutoScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAccordionAutoScroll.d.ts","sourceRoot":"","sources":["../../src/hooks/useAccordionAutoScroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAOvF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,YAAY,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,eA6GxD,UAAU,CAAC,iBAAiB,CAAC,SAI3D,CAAA"}
+{"version":3,"file":"useAccordionAutoScroll.d.ts","sourceRoot":"","sources":["../../src/hooks/useAccordionAutoScroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAOvF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,YAAY,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,eA8GxD,UAAU,CAAC,iBAAiB,CAAC,SAI3D,CAAA"}

package/dist/hooks/useAccordionAutoScroll.js

@@ -1,64 +1,67 @@
 "use client";
 import { useRef as h, useCallback as v, useEffect as O } from "react";
-const A = (d) => {
-  const o = h(null), c = h(null), u = v((t) => {
+const A = (f) => {
+  const e = h(null), s = h(null), a = v((t) => {
     if (!t || t === document.body) return window;
-    const { overflow: s, overflowY: a } = window.getComputedStyle(t);
-    return /(auto|scroll)/.test(s) || /(auto|scroll)/.test(a) ? t : u(t.parentElement);
+    const { overflow: i, overflowY: d } = window.getComputedStyle(t);
+    return /(auto|scroll)/.test(i) || /(auto|scroll)/.test(d) ? t : a(t.parentElement);
   }, []);
   return O(() => {
-    const t = d?.current ?? null;
+    const t = f?.current ?? null;
     if (!t) return;
-    const s = new MutationObserver((a) => {
-      a.forEach((f) => {
-        if (f.attributeName === "data-state") {
-          const r = f.target, w = r.getAttribute("data-state"), p = r.closest("[data-scroll-options]");
-          if (!p) return;
+    const i = new MutationObserver((d) => {
+      d.forEach((w) => {
+        if (w.attributeName === "data-state") {
+          const r = w.target, p = r.getAttribute("data-state"), m = r.closest("[data-scroll-options]");
+          if (!m) return;
           try {
-            const i = p.getAttribute("data-scroll-options");
-            if (!i) return;
-            const T = JSON.parse(i), { autoScroll: m, scrollPadding: S } = T;
-            if (m === "never") return;
-            const n = u(r);
-            if (w === "open") {
-              if (m === "mobile" && window.innerHeight >= 768) return;
-              n === window ? o.current = window.scrollY : o.current = n.scrollTop, c.current = n, setTimeout(() => {
+            const u = m.getAttribute("data-scroll-options");
+            if (!u) return;
+            const T = JSON.parse(u), { autoScroll: b, scrollPadding: S } = T;
+            if (b === "never") return;
+            const n = a(r);
+            if (p === "open") {
+              if (b === "mobile" && window.innerHeight >= 768) return;
+              n === window ? e.current = window.scrollY : e.current = n.scrollTop, s.current = n, setTimeout(() => {
                 if (!r) return;
-                const e = r.getBoundingClientRect(), b = 0, g = S;
+                const l = r.getBoundingClientRect(), o = 0, g = S;
                 if (n === window) {
-                  const l = window.scrollY + e.top + g - b;
+                  const c = window.scrollY + l.top + g - o;
                   window.scrollTo({
-                    top: l,
+                    top: c,
                     behavior: "smooth"
                   });
                 } else {
-                  const l = n, C = l.getBoundingClientRect(), E = e.top - C.top;
-                  l.scrollTo({
-                    top: l.scrollTop + E + g - b,
+                  const c = n, C = c.getBoundingClientRect(), E = l.top - C.top;
+                  c.scrollTo({
+                    top: c.scrollTop + E + g - o,
                     behavior: "smooth"
                   });
                 }
               }, 100);
-            } else w === "closed" && o.current !== null && c.current && setTimeout(() => {
-              const e = c.current;
-              e === window ? window.scrollTo({
-                top: o.current,
-                behavior: "smooth"
-              }) : e instanceof HTMLElement && e.scrollTo({
-                top: o.current,
-                behavior: "smooth"
-              }), o.current = null, c.current = null;
-            }, 100);
-          } catch (i) {
-            console.error("Error handling accordion scroll:", { error: i });
+            } else if (p === "closed" && e.current !== null && s.current) {
+              const l = e.current;
+              setTimeout(() => {
+                const o = s.current;
+                o === window ? window.scrollTo({
+                  top: l,
+                  behavior: "smooth"
+                }) : o instanceof HTMLElement && o.scrollTo({
+                  top: l,
+                  behavior: "smooth"
+                }), e.current = null, s.current = null;
+              }, 100);
+            }
+          } catch (u) {
+            console.error("Error handling accordion scroll:", { error: u });
           }
         }
       });
     });
-    return s.observe(t, { attributes: !0 }), () => {
-      s.disconnect();
+    return i.observe(t, { attributes: !0 }), () => {
+      i.disconnect();
     };
-  }, [d, u]), v((t) => {
+  }, [f, a]), v((t) => {
   }, []);
 };
 export {

package/dist/hooks/useControllableState.d.ts

@@ -1,9 +1,9 @@
 /**
  * Hook for managing controllable state - supports both controlled and uncontrolled patterns
  */
-export declare function useControllableState<T>(options: {
+export declare const useControllableState: <T>(options: {
     value?: T;
     defaultValue: T;
     onChange?: (next: T) => void;
-}): [T, (next: T | ((prev: T) => T)) => void];
+}) => [T, (next: T | ((prev: T) => T)) => void];
 //# sourceMappingURL=useControllableState.d.ts.map

package/dist/hooks/useControllableState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,OAAO,EAAE;IAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IAAC,YAAY,EAAE,CAAC,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;CAAE,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAcxJ"}
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,CAAC,EAAE,SAAS;IAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IAAC,YAAY,EAAE,CAAC,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;CAAE,KAAG,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAcvJ,CAAA"}

package/dist/hooks/useControllableState.js

@@ -1,6 +1,6 @@
 "use client";
 import { useState as f, useCallback as i } from "react";
-function p(c) {
+const p = (c) => {
   const { value: n, defaultValue: a, onChange: l } = c, [r, u] = f(a), t = n !== void 0, o = t ? n : r, d = i(
     (e) => {
       const s = typeof e == "function" ? e(o) : e;
@@ -9,7 +9,7 @@ function p(c) {
     [t, l, o]
   );
   return [o, d];
-}
+};
 export {
   p as useControllableState
 };

package/dist/index-C12FUuIW.js

@@ -0,0 +1,13 @@
+import * as r from "react";
+import { f as s } from "./index-OnYbwQjk.js";
+var u = r[" useId ".trim().toString()] || (() => {
+}), i = 0;
+function n(e) {
+  const [t, o] = r.useState(u());
+  return s(() => {
+    o((a) => a ?? String(i++));
+  }, [e]), t ? `radix-${t}` : "";
+}
+export {
+  n as u
+};

package/dist/{index-yU8jOTzS.js → index-CpovUAO-.js}

@@ -6,7 +6,7 @@ import { e as Ee, c as st, u as k, P as M, b as R, f as Y, a as ct } from "./ind
 import { u as lt, c as at } from "./index-DSXuB1g3.js";
 import { P as it, D as dt } from "./index-u1k2AYWy.js";
 import { h as ut, u as pt, R as ft, F as mt } from "./Combination-CK_g12Qb.js";
-import { u as Ie } from "./index-Dy-Hzr7y.js";
+import { u as Ie } from "./index-C12FUuIW.js";
 import { c as _e, R as ht, A as vt, C as gt, a as St } from "./index-B3FZpM60.js";
 import { u as wt } from "./index-0ioNhtNM.js";
 import { u as Ct } from "./index-BZPx6jYI.js";

package/dist/{index-BdS7Ix8W.js → index-CqbPiOid.js}

@@ -1,7 +1,7 @@
 import "./styles/main.css";
 import * as i from "react";
 import { c as V, a as q, P as p, u as _, b as g, d as K, e as U } from "./index-OnYbwQjk.js";
-import { u as R } from "./index-Dy-Hzr7y.js";
+import { u as R } from "./index-C12FUuIW.js";
 import { D as Y, P as Z } from "./index-u1k2AYWy.js";
 import { R as z, h as J, u as Q, F as X } from "./Combination-CK_g12Qb.js";
 import { P as h } from "./index-D6HcSXrq.js";

package/dist/{index-B3UpsZ2x.js → index-CrjD9cAD.js}

@@ -1,4 +1,4 @@
-import { O as me, a as pe, b as we, C as he, T as ge, D as ve, R as ye, P as be } from "./index-BdS7Ix8W.js";
+import { O as me, a as pe, b as we, C as he, T as ge, D as ve, R as ye, P as be } from "./index-CqbPiOid.js";
 import * as Se from "react";
 import r, { useMemo as Te, useLayoutEffect as Re, useEffect as Ee } from "react";
 function De(t) {

package/dist/index-DEYs15GP.js

@@ -0,0 +1,66 @@
+import { useState as T, useRef as g, useEffect as u, useMemo as j } from "react";
+function p(t, r) {
+  let o;
+  return (...i) => {
+    window.clearTimeout(o), o = window.setTimeout(() => t(...i), r);
+  };
+}
+function Y({ debounce: t, scroll: r, polyfill: o, offsetSize: i } = { debounce: 0, scroll: !1, offsetSize: !1 }) {
+  const a = o || (typeof window > "u" ? class {
+  } : window.ResizeObserver);
+  if (!a) throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
+  const [c, h] = T({ left: 0, top: 0, width: 0, height: 0, bottom: 0, right: 0, x: 0, y: 0 }), e = g({ element: null, scrollContainers: null, resizeObserver: null, lastBounds: c, orientationHandler: null }), d = t ? typeof t == "number" ? t : t.scroll : null, f = t ? typeof t == "number" ? t : t.resize : null, w = g(!1);
+  u(() => (w.current = !0, () => {
+    w.current = !1;
+  }));
+  const [z, m, s] = j(() => {
+    const n = () => {
+      if (!e.current.element) return;
+      const { left: y, top: C, width: H, height: O, bottom: x, right: S, x: B, y: R } = e.current.element.getBoundingClientRect(), l = { left: y, top: C, width: H, height: O, bottom: x, right: S, x: B, y: R };
+      e.current.element instanceof HTMLElement && i && (l.height = e.current.element.offsetHeight, l.width = e.current.element.offsetWidth), Object.freeze(l), w.current && !k(e.current.lastBounds, l) && h(e.current.lastBounds = l);
+    };
+    return [n, f ? p(n, f) : n, d ? p(n, d) : n];
+  }, [h, i, d, f]);
+  function v() {
+    e.current.scrollContainers && (e.current.scrollContainers.forEach((n) => n.removeEventListener("scroll", s, !0)), e.current.scrollContainers = null), e.current.resizeObserver && (e.current.resizeObserver.disconnect(), e.current.resizeObserver = null), e.current.orientationHandler && ("orientation" in screen && "removeEventListener" in screen.orientation ? screen.orientation.removeEventListener("change", e.current.orientationHandler) : "onorientationchange" in window && window.removeEventListener("orientationchange", e.current.orientationHandler));
+  }
+  function b() {
+    e.current.element && (e.current.resizeObserver = new a(s), e.current.resizeObserver.observe(e.current.element), r && e.current.scrollContainers && e.current.scrollContainers.forEach((n) => n.addEventListener("scroll", s, { capture: !0, passive: !0 })), e.current.orientationHandler = () => {
+      s();
+    }, "orientation" in screen && "addEventListener" in screen.orientation ? screen.orientation.addEventListener("change", e.current.orientationHandler) : "onorientationchange" in window && window.addEventListener("orientationchange", e.current.orientationHandler));
+  }
+  const L = (n) => {
+    !n || n === e.current.element || (v(), e.current.element = n, e.current.scrollContainers = E(n), b());
+  };
+  return W(s, !!r), M(m), u(() => {
+    v(), b();
+  }, [r, s, m]), u(() => v, []), [L, c, z];
+}
+function M(t) {
+  u(() => {
+    const r = t;
+    return window.addEventListener("resize", r), () => {
+      window.removeEventListener("resize", r);
+    };
+  }, [t]);
+}
+function W(t, r) {
+  u(() => {
+    if (r) {
+      const o = t;
+      return window.addEventListener("scroll", o, { capture: !0, passive: !0 }), () => {
+        window.removeEventListener("scroll", o, !0);
+      };
+    }
+  }, [t, r]);
+}
+function E(t) {
+  const r = [];
+  if (!t || t === document.body) return r;
+  const { overflow: o, overflowX: i, overflowY: a } = window.getComputedStyle(t);
+  return [o, i, a].some((c) => c === "auto" || c === "scroll") && r.push(t), [...r, ...E(t.parentElement)];
+}
+const X = ["x", "y", "top", "bottom", "left", "right", "width", "height"], k = (t, r) => X.every((o) => t[o] === r[o]);
+export {
+  Y as j
+};

package/dist/index-DdFoGvON.js

@@ -0,0 +1,146 @@
+import "./styles/main.css";
+import { jsx as w, Fragment as N } from "react/jsx-runtime";
+import * as v from "react";
+import { useId as T, useRef as P, useContext as D, useInsertionEffect as S, useMemo as $, Children as U, isValidElement as V, useState as z } from "react";
+import { M as X, d as _, u as W, P as B, e as F, b as G, L as O } from "./proxy-CgaCj1WQ.js";
+function A(e, s) {
+  if (typeof e == "function")
+    return e(s);
+  e != null && (e.current = s);
+}
+function Y(...e) {
+  return (s) => {
+    let t = !1;
+    const o = e.map((r) => {
+      const n = A(r, s);
+      return !t && typeof n == "function" && (t = !0), n;
+    });
+    if (t)
+      return () => {
+        for (let r = 0; r < o.length; r++) {
+          const n = o[r];
+          typeof n == "function" ? n() : A(e[r], null);
+        }
+      };
+  };
+}
+function q(...e) {
+  return v.useCallback(Y(...e), e);
+}
+class J extends v.Component {
+  getSnapshotBeforeUpdate(s) {
+    const t = this.props.childRef.current;
+    if (t && s.isPresent && !this.props.isPresent) {
+      const o = t.offsetParent, r = _(o) && o.offsetWidth || 0, n = this.props.sizeRef.current;
+      n.height = t.offsetHeight || 0, n.width = t.offsetWidth || 0, n.top = t.offsetTop, n.left = t.offsetLeft, n.right = r - n.width - n.left;
+    }
+    return null;
+  }
+  /**
+   * Required with getSnapshotBeforeUpdate to stop React complaining.
+   */
+  componentDidUpdate() {
+  }
+  render() {
+    return this.props.children;
+  }
+}
+function Q({ children: e, isPresent: s, anchorX: t, root: o }) {
+  const r = T(), n = P(null), p = P({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    right: 0
+  }), { nonce: C } = D(X), x = q(n, e?.ref);
+  return S(() => {
+    const { width: i, height: g, top: c, left: u, right: a } = p.current;
+    if (s || !n.current || !i || !g)
+      return;
+    const h = t === "left" ? `left: ${u}` : `right: ${a}`;
+    n.current.dataset.motionPopId = r;
+    const l = document.createElement("style");
+    C && (l.nonce = C);
+    const R = o ?? document.head;
+    return R.appendChild(l), l.sheet && l.sheet.insertRule(`
+          [data-motion-pop-id="${r}"] {
+            position: absolute !important;
+            width: ${i}px !important;
+            height: ${g}px !important;
+            ${h}px !important;
+            top: ${c}px !important;
+          }
+        `), () => {
+      R.contains(l) && R.removeChild(l);
+    };
+  }, [s]), w(J, { isPresent: s, childRef: n, sizeRef: p, children: v.cloneElement(e, { ref: x }) });
+}
+const Z = ({ children: e, initial: s, isPresent: t, onExitComplete: o, custom: r, presenceAffectsLayout: n, mode: p, anchorX: C, root: x }) => {
+  const i = W(ee), g = T();
+  let c = !0, u = $(() => (c = !1, {
+    id: g,
+    initial: s,
+    isPresent: t,
+    custom: r,
+    onExitComplete: (a) => {
+      i.set(a, !0);
+      for (const h of i.values())
+        if (!h)
+          return;
+      o && o();
+    },
+    register: (a) => (i.set(a, !1), () => i.delete(a))
+  }), [t, i, o]);
+  return n && c && (u = { ...u }), $(() => {
+    i.forEach((a, h) => i.set(h, !1));
+  }, [t]), v.useEffect(() => {
+    !t && !i.size && o && o();
+  }, [t]), p === "popLayout" && (e = w(Q, { isPresent: t, anchorX: C, root: x, children: e })), w(B.Provider, { value: u, children: e });
+};
+function ee() {
+  return /* @__PURE__ */ new Map();
+}
+const E = (e) => e.key || "";
+function I(e) {
+  const s = [];
+  return U.forEach(e, (t) => {
+    V(t) && s.push(t);
+  }), s;
+}
+const oe = ({ children: e, custom: s, initial: t = !0, onExitComplete: o, presenceAffectsLayout: r = !0, mode: n = "sync", propagate: p = !1, anchorX: C = "left", root: x }) => {
+  const [i, g] = F(p), c = $(() => I(e), [e]), u = p && !i ? [] : c.map(E), a = P(!0), h = P(c), l = W(() => /* @__PURE__ */ new Map()), [R, j] = z(c), [m, b] = z(c);
+  G(() => {
+    a.current = !1, h.current = c;
+    for (let d = 0; d < m.length; d++) {
+      const f = E(m[d]);
+      u.includes(f) ? l.delete(f) : l.get(f) !== !0 && l.set(f, !1);
+    }
+  }, [m, u.length, u.join("-")]);
+  const M = [];
+  if (c !== R) {
+    let d = [...c];
+    for (let f = 0; f < m.length; f++) {
+      const y = m[f], L = E(y);
+      u.includes(L) || (d.splice(f, 0, y), M.push(y));
+    }
+    return n === "wait" && M.length && (d = M), b(I(d)), j(c), null;
+  }
+  process.env.NODE_ENV !== "production" && n === "wait" && m.length > 1 && console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
+  const { forceRender: H } = D(O);
+  return w(N, { children: m.map((d) => {
+    const f = E(d), y = p && !i ? !1 : c === m || u.includes(f), L = () => {
+      if (l.has(f))
+        l.set(f, !0);
+      else
+        return;
+      let k = !0;
+      l.forEach((K) => {
+        K || (k = !1);
+      }), k && (H?.(), b(h.current), p && g?.(), o && o());
+    };
+    return w(Z, { isPresent: y, initial: !a.current || t ? void 0 : !1, custom: s, presenceAffectsLayout: r, mode: n, root: x, onExitComplete: y ? void 0 : L, anchorX: C, children: d }, f);
+  }) });
+};
+export {
+  oe as A
+};