@tarsis/toolkit 0.5.6 → 0.5.8-beta.0

package/dist/{index-0YeYjJYT.cjs → index-DoYktnjF.cjs}

@@ -52114,11 +52114,11 @@ const BubblyParticlesButton = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("button", { className: styles$4H.root, onClick: handleClick, children: "Click me!" });
 };
 
-const root$4i = "_root_1pxow_1";
-const button$o = "_button_1pxow_13";
-const p$1 = "_p_1pxow_26";
-const text$z = "_text_1pxow_26";
-const effects = "_effects_1pxow_240";
+const root$4i = "_root_3ip19_1";
+const button$o = "_button_3ip19_13";
+const p$1 = "_p_3ip19_26";
+const text$z = "_text_3ip19_26";
+const effects = "_effects_3ip19_240";
 const styles$4G = {
 	root: root$4i,
 	button: button$o,
@@ -59681,11 +59681,6 @@ var module$1 = {};
 const confetti = module$1.exports;
 module$1.exports.create;
 
-const root$4d = "_root_s1prb_1";
-const styles$4z = {
-	root: root$4d
-};
-
 const LayoutGroupContext = React.createContext({});
 
 const useIsomorphicLayoutEffect$2 = useWindowReady.isBrowser ? React.useLayoutEffect : React.useEffect;
@@ -61799,11 +61794,12 @@ function distance2D(a, b) {
     return Math.sqrt(xDelta ** 2 + yDelta ** 2);
 }
 
+const overflowStyles = /*#__PURE__*/ new Set(["auto", "scroll"]);
 /**
  * @internal
  */
 class PanSession {
-    constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3, } = {}) {
+    constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3, element, } = {}) {
         /**
          * @internal
          */
@@ -61824,6 +61820,22 @@ class PanSession {
          * @internal
          */
         this.contextWindow = window;
+        /**
+         * Scroll positions of scrollable ancestors and window.
+         * @internal
+         */
+        this.scrollPositions = new Map();
+        /**
+         * Cleanup function for scroll listeners.
+         * @internal
+         */
+        this.removeScrollListeners = null;
+        this.onElementScroll = (event) => {
+            this.handleScroll(event.target);
+        };
+        this.onWindowScroll = () => {
+            this.handleScroll(window);
+        };
         this.updatePoint = () => {
             if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                 return;
@@ -61886,12 +61898,93 @@ class PanSession {
         onSessionStart &&
             onSessionStart(event, getPanInfo(initialInfo, this.history));
         this.removeListeners = useWindowReady.pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
+        // Start scroll tracking if element provided
+        if (element) {
+            this.startScrollTracking(element);
+        }
+    }
+    /**
+     * Start tracking scroll on ancestors and window.
+     */
+    startScrollTracking(element) {
+        // Store initial scroll positions for scrollable ancestors
+        let current = element.parentElement;
+        while (current) {
+            const style = getComputedStyle(current);
+            if (overflowStyles.has(style.overflowX) ||
+                overflowStyles.has(style.overflowY)) {
+                this.scrollPositions.set(current, {
+                    x: current.scrollLeft,
+                    y: current.scrollTop,
+                });
+            }
+            current = current.parentElement;
+        }
+        // Track window scroll
+        this.scrollPositions.set(window, {
+            x: window.scrollX,
+            y: window.scrollY,
+        });
+        // Capture listener catches element scroll events as they bubble
+        window.addEventListener("scroll", this.onElementScroll, {
+            capture: true,
+            passive: true,
+        });
+        // Direct window scroll listener (window scroll doesn't bubble)
+        window.addEventListener("scroll", this.onWindowScroll, {
+            passive: true,
+        });
+        this.removeScrollListeners = () => {
+            window.removeEventListener("scroll", this.onElementScroll, {
+                capture: true,
+            });
+            window.removeEventListener("scroll", this.onWindowScroll);
+        };
+    }
+    /**
+     * Handle scroll compensation during drag.
+     *
+     * For element scroll: adjusts history origin since pageX/pageY doesn't change.
+     * For window scroll: adjusts lastMoveEventInfo since pageX/pageY would change.
+     */
+    handleScroll(target) {
+        const initial = this.scrollPositions.get(target);
+        if (!initial)
+            return;
+        const isWindow = target === window;
+        const current = isWindow
+            ? { x: window.scrollX, y: window.scrollY }
+            : {
+                x: target.scrollLeft,
+                y: target.scrollTop,
+            };
+        const delta = { x: current.x - initial.x, y: current.y - initial.y };
+        if (delta.x === 0 && delta.y === 0)
+            return;
+        if (isWindow) {
+            // Window scroll: pageX/pageY changes, so update lastMoveEventInfo
+            if (this.lastMoveEventInfo) {
+                this.lastMoveEventInfo.point.x += delta.x;
+                this.lastMoveEventInfo.point.y += delta.y;
+            }
+        }
+        else {
+            // Element scroll: pageX/pageY unchanged, so adjust history origin
+            if (this.history.length > 0) {
+                this.history[0].x -= delta.x;
+                this.history[0].y -= delta.y;
+            }
+        }
+        this.scrollPositions.set(target, current);
+        useWindowReady.frame.update(this.updatePoint, true);
     }
     updateHandlers(handlers) {
         this.handlers = handlers;
     }
     end() {
         this.removeListeners && this.removeListeners();
+        this.removeScrollListeners && this.removeScrollListeners();
+        this.scrollPositions.clear();
         useWindowReady.cancelFrame(this.updatePoint);
     }
 }
@@ -62142,7 +62235,7 @@ class VisualElementDragControls {
                 this.visualElement.projection.target = undefined;
             }
             /**
-             * Record gesture origin
+             * Record gesture origin and pointer offset
              */
             eachAxis((axis) => {
                 let current = this.getAxisMotionValue(axis).get() || 0;
@@ -62223,6 +62316,7 @@ class VisualElementDragControls {
             dragSnapToOrigin,
             distanceThreshold,
             contextWindow: getContextWindow(this.visualElement),
+            element: this.visualElement.current,
         });
     }
     /**
@@ -65142,6 +65236,11 @@ function useAnimate() {
     return [scope, animate];
 }
 
+const root$4d = "_root_s1prb_1";
+const styles$4z = {
+	root: root$4d
+};
+
 const useConfetti = () => React.useCallback(async (rect, options = {}) => {
   const { x, y, width, height } = rect;
   const origin = {
@@ -68127,9 +68226,9 @@ const NeonButton = ({ className = "", ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", ...rest, className: clsx(styles$48.root, className), children: "Neon" });
 };
 
-const root$3P = "_root_1u78n_2";
-const i$6 = "_i_1u78n_22";
-const text$s = "_text_1u78n_482";
+const root$3P = "_root_186y2_2";
+const i$6 = "_i_186y2_22";
+const text$s = "_text_186y2_482";
 const styles$47 = {
 	root: root$3P,
 	i: i$6,
@@ -68654,11 +68753,11 @@ const ProgressButton = ({
   );
 };
 
-const root$3H = "_root_1pabj_1";
-const button$f = "_button_1pabj_17";
-const wavy = "_wavy_1pabj_62";
-const linear = "_linear_1pabj_63";
-const glance = "_glance_1pabj_86";
+const root$3H = "_root_1gjmi_1";
+const button$f = "_button_1gjmi_17";
+const wavy = "_wavy_1gjmi_62";
+const linear = "_linear_1gjmi_63";
+const glance = "_glance_1gjmi_86";
 const styles$3$ = {
 	root: root$3H,
 	button: button$f,
@@ -68668,7 +68767,101 @@ const styles$3$ = {
 };
 
 const PsychedelicButton = ({ variant }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3$.root, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: clsx(styles$3$.button, styles$3$[variant]), children: "hover me" }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "filter",
+        {
+          id: "psychedelic-wavy-filter",
+          x: "-20%",
+          y: "-20%",
+          width: "140%",
+          height: "140%",
+          filterUnits: "objectBoundingBox",
+          primitiveUnits: "userSpaceOnUse",
+          colorInterpolationFilters: "linearRGB",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "feTurbulence",
+              {
+                type: "turbulence",
+                baseFrequency: "0.04 0.03",
+                numOctaves: "12",
+                seed: "27",
+                stitchTiles: "stitch",
+                x: "0%",
+                y: "0%",
+                width: "100%",
+                height: "100%",
+                result: "turbulence"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "feDisplacementMap",
+              {
+                in: "SourceGraphic",
+                in2: "turbulence",
+                scale: "15",
+                xChannelSelector: "R",
+                yChannelSelector: "B",
+                x: "0%",
+                y: "0%",
+                width: "100%",
+                height: "100%",
+                result: "displacementMap2"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "filter",
+        {
+          id: "psychedelic-glance-filter",
+          x: "-20%",
+          y: "-20%",
+          width: "140%",
+          height: "140%",
+          filterUnits: "objectBoundingBox",
+          primitiveUnits: "userSpaceOnUse",
+          colorInterpolationFilters: "linearRGB",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "feTurbulence",
+              {
+                type: "turbulence",
+                baseFrequency: "0.02 0.03",
+                numOctaves: "1",
+                seed: "13",
+                stitchTiles: "stitch",
+                x: "0%",
+                y: "0%",
+                width: "100%",
+                height: "100%",
+                result: "turbulence"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "feDisplacementMap",
+              {
+                in: "SourceGraphic",
+                in2: "turbulence",
+                scale: "126",
+                xChannelSelector: "R",
+                yChannelSelector: "B",
+                x: "0%",
+                y: "0%",
+                width: "100%",
+                height: "100%",
+                result: "displacementMap2"
+              }
+            )
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3$.root, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: clsx(styles$3$.button, styles$3$[variant]), children: "hover me" }) })
+  ] });
 };
 
 const root$3G = "_root_qhbgz_1";
@@ -69455,30 +69648,15 @@ const SquishButton = ({ children, className = "", ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", ...rest, className: clsx(styles$3P.root, className), children });
 };
 
-const root$3w = "_root_v4ko6_1";
-const pending = "_pending_v4ko6_12";
-const loading$1 = "_loading_v4ko6_17";
-const success$1 = "_success_v4ko6_20";
-const icon$f = "_icon_v4ko6_25";
-const fingerprint = "_fingerprint_v4ko6_50";
-const styles$3O = {
-	root: root$3w,
-	pending: pending,
-	loading: loading$1,
-	success: success$1,
-	icon: icon$f,
-	fingerprint: fingerprint
-};
-
-const root$3v = "_root_g5l4r_1";
+const root$3w = "_root_g5l4r_1";
 const a$3 = "_a_g5l4r_9";
 const b$2 = "_b_g5l4r_10";
 const c$3 = "_c_g5l4r_11";
 const d$3 = "_d_g5l4r_12";
 const e$3 = "_e_g5l4r_13";
 const active$m = "_active_g5l4r_20";
-const styles$3N = {
-	root: root$3v,
+const styles$3O = {
+	root: root$3w,
 	a: a$3,
 	b: b$2,
 	c: c$3,
@@ -69491,7 +69669,7 @@ const Fingerprint = ({ className = "" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: clsx(styles$3N.root, className),
+      className: clsx(styles$3O.root, className),
       width: "34px",
       height: "34px",
       viewBox: "0 0 34 34",
@@ -69513,35 +69691,35 @@ const Fingerprint = ({ className = "" }) => {
             /* @__PURE__ */ jsxRuntime.jsx(
               "path",
               {
-                className: clsx(styles$3N.a, { [styles$3N.active]: isActive }),
+                className: clsx(styles$3O.a, { [styles$3O.active]: isActive }),
                 d: "M3.14414922,1.97419264 C3.14414922,1.97419264 5.30885997,0.506351808 9.06036082,0.506351808 C12.8118617,0.506351808 14.781903,1.97419264 14.781903,1.97419264"
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "path",
               {
-                className: clsx(styles$3N.b, { [styles$3N.active]: isActive }),
+                className: clsx(styles$3O.b, { [styles$3O.active]: isActive }),
                 d: "M0.466210729,7.27628774 C0.466210729,7.27628774 3.19024811,2.75878123 9.09512428,2.96502806 C15.0000005,3.17127489 17.4745821,7.17202872 17.4745821,7.17202872"
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "path",
               {
-                className: clsx(styles$3N.c, { [styles$3N.active]: isActive }),
+                className: clsx(styles$3O.c, { [styles$3O.active]: isActive }),
                 d: "M2,16.4687762 C2,16.4687762 1.12580828,14.9305411 1.27082278,11.9727304 C1.45871447,8.14036841 5.19587478,5.30175361 9.05270871,5.30175361 C12.9095426,5.30175361 15.0000001,7.82879552 15.8975926,9.33195218 C16.5919575,10.4947729 17.7597991,14.4361492 14.6226101,15.0206592 C12.41268,15.4324056 11.5911303,13.4911155 11.5911303,12.9859143 C11.5911303,11.9727302 11.1054172,10.2336826 9.05270848,10.2336826 C6.99999978,10.2336826 6.11384543,11.8665663 6.4593664,13.7955614 C6.6532895,14.8782069 7.59887942,18.3701197 12.0173963,19.5605638"
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "path",
               {
-                className: clsx(styles$3N.d, { [styles$3N.active]: isActive }),
+                className: clsx(styles$3O.d, { [styles$3O.active]: isActive }),
                 d: "M7.0204614,19.6657197 C7.0204614,19.6657197 3.88328263,16.5690127 3.88328268,12.9603117 C3.88328274,9.35161068 6.59923746,7.80642537 9.0076008,7.80642554 C11.4159641,7.8064257 14.1798468,9.55747124 14.1798468,12.759562"
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "path",
               {
-                className: clsx(styles$3N.e, { [styles$3N.active]: isActive }),
+                className: clsx(styles$3O.e, { [styles$3O.active]: isActive }),
                 d: "M8.95538742,12.6694189 C8.95538742,12.6694189 9.04883608,18.1288401 15.069217,17.3610597"
               }
             )
@@ -69552,15 +69730,30 @@ const Fingerprint = ({ className = "" }) => {
   );
 };
 
+const root$3v = "_root_v4ko6_1";
+const pending = "_pending_v4ko6_12";
+const loading$1 = "_loading_v4ko6_17";
+const success$1 = "_success_v4ko6_20";
+const icon$f = "_icon_v4ko6_25";
+const fingerprint = "_fingerprint_v4ko6_50";
+const styles$3N = {
+	root: root$3v,
+	pending: pending,
+	loading: loading$1,
+	success: success$1,
+	icon: icon$f,
+	fingerprint: fingerprint
+};
+
 const SuccessLoader = ({ status }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
-    className: clsx(styles$3O.root, {
-      [styles$3O.success]: status === "success",
-      [styles$3O.loading]: status === "loading",
-      [styles$3O.pending]: status === "pending"
+    className: clsx(styles$3N.root, {
+      [styles$3N.success]: status === "success",
+      [styles$3N.loading]: status === "loading",
+      [styles$3N.pending]: status === "pending"
     }),
-    children: status === "success" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$3O.icon }) : status === "pending" ? /* @__PURE__ */ jsxRuntime.jsx(Fingerprint, { className: styles$3O.fingerprint }) : null
+    children: status === "success" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$3N.icon }) : status === "pending" ? /* @__PURE__ */ jsxRuntime.jsx(Fingerprint, { className: styles$3N.fingerprint }) : null
   }
 );
 
@@ -71076,54 +71269,6 @@ const BulletsCarousel = () => {
   ] }) });
 };
 
-const MOCK_CARD_CAROUSEL_ITEMS = [
-  {
-    id: "Tour",
-    image: "https://images.pexels.com/photos/991012/pexels-photo-991012.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
-    subtitle: "The grand moment",
-    title: "Le tour",
-    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.",
-    href: "#",
-    hrefTitle: "Explore the tour"
-  },
-  {
-    id: "Window",
-    image: "https://images.pexels.com/photos/921294/pexels-photo-921294.png?auto=compress&cs=tinysrgb&h=750&w=1260",
-    subtitle: "The big window",
-    title: "Minimal window",
-    description: "Clear Glass Window With Brown and White Wooden Frame iste natus error sit voluptatem accusantium doloremque laudantium.",
-    href: "#",
-    hrefTitle: "Read the article"
-  },
-  {
-    id: "Palms",
-    image: "https://images.pexels.com/photos/92733/pexels-photo-92733.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260",
-    subtitle: "Tropical palms",
-    title: "Palms",
-    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.",
-    href: "#",
-    hrefTitle: "Explore the palms"
-  },
-  {
-    id: "Beach",
-    image: "https://images.pexels.com/photos/1008732/pexels-photo-1008732.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260",
-    subtitle: "Beach",
-    title: "The beach",
-    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.",
-    href: "#",
-    hrefTitle: "Explore the beach"
-  },
-  {
-    id: "Building",
-    image: "https://images.pexels.com/photos/1029614/pexels-photo-1029614.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
-    subtitle: "The white building",
-    title: "White Building",
-    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.",
-    href: "#",
-    hrefTitle: "Read article"
-  }
-];
-
 const root$35 = "_root_1f7ly_1";
 const item$m = "_item_1f7ly_14";
 const itemInfo = "_itemInfo_1f7ly_32";
@@ -71179,6 +71324,54 @@ const CardCarouselItem = ({
   ] });
 };
 
+const MOCK_CARD_CAROUSEL_ITEMS = [
+  {
+    id: "Tour",
+    image: "https://images.pexels.com/photos/991012/pexels-photo-991012.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
+    subtitle: "The grand moment",
+    title: "Le tour",
+    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.",
+    href: "#",
+    hrefTitle: "Explore the tour"
+  },
+  {
+    id: "Window",
+    image: "https://images.pexels.com/photos/921294/pexels-photo-921294.png?auto=compress&cs=tinysrgb&h=750&w=1260",
+    subtitle: "The big window",
+    title: "Minimal window",
+    description: "Clear Glass Window With Brown and White Wooden Frame iste natus error sit voluptatem accusantium doloremque laudantium.",
+    href: "#",
+    hrefTitle: "Read the article"
+  },
+  {
+    id: "Palms",
+    image: "https://images.pexels.com/photos/92733/pexels-photo-92733.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260",
+    subtitle: "Tropical palms",
+    title: "Palms",
+    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.",
+    href: "#",
+    hrefTitle: "Explore the palms"
+  },
+  {
+    id: "Beach",
+    image: "https://images.pexels.com/photos/1008732/pexels-photo-1008732.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260",
+    subtitle: "Beach",
+    title: "The beach",
+    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.",
+    href: "#",
+    hrefTitle: "Explore the beach"
+  },
+  {
+    id: "Building",
+    image: "https://images.pexels.com/photos/1029614/pexels-photo-1029614.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
+    subtitle: "The white building",
+    title: "White Building",
+    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.",
+    href: "#",
+    hrefTitle: "Read article"
+  }
+];
+
 const CardCarousel = ({ items = MOCK_CARD_CAROUSEL_ITEMS }) => {
   const [activeIndex, setActiveIndex] = React.useState(0);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3l.root, children: [
@@ -73782,12 +73975,12 @@ const DialControl = ({ limit = true }) => {
   ] });
 };
 
-const root$2L = "_root_ibak3_58";
-const selector = "_selector_ibak3_136";
-const knob$1 = "_knob_ibak3_150";
-const active$i = "_active_ibak3_189";
-const list$5 = "_list_ibak3_392";
-const item$j = "_item_ibak3_436";
+const root$2L = "_root_1v201_58";
+const selector = "_selector_1v201_136";
+const knob$1 = "_knob_1v201_150";
+const active$i = "_active_1v201_189";
+const list$5 = "_list_1v201_392";
+const item$j = "_item_1v201_436";
 const styles$2Y = {
 	root: root$2L,
 	selector: selector,
@@ -74058,17 +74251,6 @@ const DockMotionEmbedded = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$2T.root, children });
 };
 
-const root$2F = "_root_1oncf_1";
-const block = "_block_1oncf_4";
-const item$g = "_item_1oncf_14";
-const gloss = "_gloss_1oncf_31";
-const styles$2S = {
-	root: root$2F,
-	block: block,
-	item: item$g,
-	gloss: gloss
-};
-
 function hasWindow() {
   return typeof window !== 'undefined';
 }
@@ -78122,7 +78304,7 @@ function useRole(context, props) {
 
 const tooltip = "_tooltip_pli88_1";
 const tooltipContent = "_tooltipContent_pli88_6";
-const styles$2R = {
+const styles$2S = {
 	tooltip: tooltip,
 	tooltipContent: tooltipContent
 };
@@ -78138,6 +78320,9 @@ const Tooltip = ({
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const shouldReduceMotion = useReducedMotion();
+  const hasFinePointer = useWindowReady.useMatchMedia("(pointer: fine)");
+  const isMobile = hasFinePointer === false;
+  const timeoutRef = React.useRef(null);
   const variants = shouldReduceMotion ? void 0 : {
     initial: {
       scale: animate ? 0.6 : 1,
@@ -78183,6 +78368,28 @@ const Tooltip = ({
     dismiss,
     role
   ]);
+  React.useEffect(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (isOpen && isMobile) {
+      timeoutRef.current = setTimeout(() => {
+        setIsOpen(false);
+      }, 2e3);
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [isOpen, isMobile]);
+  const handleMobileClick = (_e) => {
+    if (isMobile) {
+      setIsOpen(true);
+    }
+  };
   const childRef = React.isValidElement(children) && children.props && children.props.ref ? children.props.ref : null;
   const mergedRef = useMergeRefs([refs.setReference, childRef]);
   if (React.isValidElement(children)) {
@@ -78198,6 +78405,10 @@ const Tooltip = ({
     const mergedProps = {
       ...childProps,
       ref: mergedRef,
+      onClick: mergeEventHandler(
+        childProps.onClick,
+        handleMobileClick
+      ),
       onMouseEnter: mergeEventHandler(
         childProps.onMouseEnter,
         tooltipProps.onMouseEnter
@@ -78223,11 +78434,11 @@ const Tooltip = ({
           ref: refs.setFloating,
           style: floatingStyles,
           ...getFloatingProps(),
-          className: styles$2R.tooltip,
+          className: styles$2S.tooltip,
           children: /* @__PURE__ */ jsxRuntime.jsx(
             motion.div,
             {
-              className: clsx(styles$2R.tooltipContent, className),
+              className: clsx(styles$2S.tooltipContent, className),
               variants,
               initial: shouldReduceMotion ? void 0 : "initial",
               animate: shouldReduceMotion ? void 0 : "animate",
@@ -78246,6 +78457,7 @@ const Tooltip = ({
       {
         ref: refs.setReference,
         ...getReferenceProps(),
+        onClick: handleMobileClick,
         style: { display: "contents" },
         children
       }
@@ -78256,11 +78468,11 @@ const Tooltip = ({
         ref: refs.setFloating,
         style: floatingStyles,
         ...getFloatingProps(),
-        className: styles$2R.tooltip,
+        className: styles$2S.tooltip,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           motion.div,
           {
-            className: clsx(styles$2R.tooltipContent, className),
+            className: clsx(styles$2S.tooltipContent, className),
             variants,
             initial: shouldReduceMotion ? void 0 : "initial",
             animate: shouldReduceMotion ? void 0 : "animate",
@@ -78274,15 +78486,15 @@ const Tooltip = ({
   ] });
 };
 
-const root$2E = "_root_1uu8h_1";
+const root$2F = "_root_1uu8h_1";
 const label$8 = "_label_1uu8h_21";
 const input$m = "_input_1uu8h_28";
 const output = "_output_1uu8h_88";
 const valueTrack = "_valueTrack_1uu8h_90";
 const outputValues = "_outputValues_1uu8h_91";
 const outputValue = "_outputValue_1uu8h_91";
-const styles$2Q = {
-	root: root$2E,
+const styles$2R = {
+	root: root$2F,
 	label: label$8,
 	input: input$m,
 	output: output,
@@ -78322,18 +78534,18 @@ const TooltipRangeSlider = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
-      className: styles$2Q.root,
+      className: styles$2R.root,
       action: "",
       style: {
         "--percent": `${percent}%`,
         "--transX": `${transX}em`
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles$2Q.label, htmlFor: "dummy", children: "Range" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles$2R.label, htmlFor: "dummy", children: "Range" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
-            className: styles$2Q.input,
+            className: styles$2R.input,
             type: "range",
             value,
             min: min$1,
@@ -78342,12 +78554,12 @@ const TooltipRangeSlider = () => {
             onChange: update
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2Q.output, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2Q.valueTrack, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2Q.outputValues, children: React.useMemo(() => {
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2R.output, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2R.valueTrack, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2R.outputValues, children: React.useMemo(() => {
           const totalValues = (Math.abs(max$1) + Math.abs(min$1)) / step$2 + 1;
           const values = [];
           for (let i = min$1; i < totalValues; i += 1) {
             values.push(
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$2Q.outputValue, children: i }, i)
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$2R.outputValue, children: i }, i)
             );
           }
           return values;
@@ -78357,6 +78569,17 @@ const TooltipRangeSlider = () => {
   );
 };
 
+const root$2E = "_root_1oncf_1";
+const block = "_block_1oncf_4";
+const item$g = "_item_1oncf_14";
+const gloss = "_gloss_1oncf_31";
+const styles$2Q = {
+	root: root$2E,
+	block: block,
+	item: item$g,
+	gloss: gloss
+};
+
 const baseWidth = 48;
 const distanceLimit = baseWidth * 5;
 const distanceInput = [
@@ -78471,7 +78694,7 @@ const DockMotionItem = ({
   const isInteractive = rest.use !== "div";
   const ContentElement = React.useMemo(() => {
     if (rest.use && typeof rest.use !== "string") {
-      return motion(rest.use);
+      return motion.create(rest.use);
     }
     switch (rest.use) {
       case "a":
@@ -78491,13 +78714,13 @@ const DockMotionItem = ({
     "div",
     {
       ref,
-      className: clsx(styles$2S.root, { [styles$2S.block]: type === "block" }),
+      className: clsx(styles$2Q.root, { [styles$2Q.block]: type === "block" }),
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         ContentElement,
         {
           ref: scope,
           layoutId: itemId,
-          className: clsx(styles$2S.item, className),
+          className: clsx(styles$2Q.item, className),
           onMouseEnter,
           style: contentStyle,
           "data-action": isInteractive,
@@ -78547,7 +78770,7 @@ const DockMotionItem = ({
           whileDrag: { zIndex: 1 },
           ...linkProps,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2S.gloss }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2Q.gloss }),
             children
           ]
         },
@@ -79195,9 +79418,9 @@ const ContrastBackgroundText = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2D.bg, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$2D.text, children: "One place to stack all your cards" }) });
 };
 
-const root$2s = "_root_1077x_1";
-const title$5 = "_title_1077x_10";
-const image$c = "_image_1077x_89";
+const root$2s = "_root_7opbl_1";
+const title$5 = "_title_7opbl_10";
+const image$c = "_image_7opbl_89";
 const styles$2C = {
 	root: root$2s,
 	title: title$5,
@@ -79205,21 +79428,78 @@ const styles$2C = {
 };
 
 const FluidGooeyTextBackground = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2C.root, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: styles$2C.title, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Business intelligence" }),
-      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "built around" }),
-      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "data teams" })
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: "round-desktop", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "feGaussianBlur",
+          {
+            in: "SourceGraphic",
+            stdDeviation: "10",
+            result: "blur"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "feColorMatrix",
+          {
+            in: "blur",
+            mode: "matrix",
+            values: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10",
+            result: "goo"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: "round-tablet", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "feGaussianBlur",
+          {
+            in: "SourceGraphic",
+            stdDeviation: "7.5",
+            result: "blur"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "feColorMatrix",
+          {
+            in: "blur",
+            mode: "matrix",
+            values: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 15 -7.5",
+            result: "goo"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: "round-mobile", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "feColorMatrix",
+          {
+            in: "blur",
+            mode: "matrix",
+            values: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 8 -4",
+            result: "goo"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })
+      ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        className: styles$2C.image,
-        src: "https://cdn.sanity.io/images/0nccms3b/production/51f800179e473cc6ae3b5523d21c0dcdde1bb8ea-1358x854.png?w=1358&h=854&q=95&fit=max&auto=format"
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2C.root, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: styles$2C.title, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Business intelligence" }),
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "built around" }),
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "data teams" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          className: styles$2C.image,
+          src: "https://cdn.sanity.io/images/0nccms3b/production/51f800179e473cc6ae3b5523d21c0dcdde1bb8ea-1358x854.png?w=1358&h=854&q=95&fit=max&auto=format"
+        }
+      )
+    ] })
   ] });
 };
 
@@ -80642,7 +80922,7 @@ const EndlessLoader = ({ container }) => {
         return;
       }
       try {
-        const GLModule = await Promise.resolve().then(() => require('./gl-Bb5NStwh.cjs'));
+        const GLModule = await Promise.resolve().then(() => require('./gl-B5V-Tq8D.cjs'));
         if (!isActiveRef.current) {
           return;
         }
@@ -86550,11 +86830,11 @@ const ScrambledText = ({ children, reveal = false }) => {
   );
 };
 
-const root$Y = "_root_1d8jp_1";
-const line = "_line_1d8jp_9";
-const word$1 = "_word_1d8jp_14";
-const link = "_link_1d8jp_18";
-const letter = "_letter_1d8jp_22";
+const root$Y = "_root_kw2ds_1";
+const line = "_line_kw2ds_9";
+const word$1 = "_word_kw2ds_14";
+const link = "_link_kw2ds_18";
+const letter = "_letter_kw2ds_22";
 const styles$11 = {
 	root: root$Y,
 	line: line,
@@ -96508,7 +96788,7 @@ const Lock = () => {
       }
     };
     const asynchronously = async () => {
-      const Flickity = await Promise.resolve().then(() => require('./index-BoOtR9fl.cjs')).then(n => n.index).then((m) => m.default);
+      const Flickity = await Promise.resolve().then(() => require('./index-n7f8R1ii.cjs')).then(n => n.index).then((m) => m.default);
       if (!rowsRef.current || !window) return;
       const rows = rowsRef.current.children;
       for (let i = 0, len = rows.length; i < len; i++) {
@@ -102308,6 +102588,34 @@ function useDrag(handler, config) {
   }, config || {}, 'drag');
 }
 
+function normalize(value, min, max) {
+  return (value - min) / (max - min);
+}
+function calculateDistance(coordinates1, coordinates2) {
+  const h = coordinates1.x - coordinates2.x;
+  const v = coordinates1.y - coordinates2.y;
+  return Math.sqrt(h * h + v * v);
+}
+function calculateAngle(coordinates1, coordinates2) {
+  let theta = 0;
+  const dy = coordinates2.y - coordinates1.y;
+  const dx = coordinates2.x - coordinates1.x;
+  theta = Math.atan2(dy, dx);
+  theta *= 180 / Math.PI;
+  return theta;
+}
+function getGlowLayers(factor, intensity) {
+  const glowMap = [1, 2, 7, 14, 24, 42, 86, 124];
+  const scale = intensity * factor;
+  const glowLayers = Array.from({ length: 8 }, (_, i) => {
+    return {
+      radius: scale * glowMap[i],
+      opacity: i > 0 ? 1 / i : 1
+    };
+  });
+  return glowLayers;
+}
+
 const root$h = "_root_1xwkj_1";
 const sun = "_sun_1xwkj_9";
 const moon = "_moon_1xwkj_20";
@@ -102361,34 +102669,6 @@ const BaileysBead = ({ theta, offset = 0, opa }) => {
   );
 };
 
-function normalize(value, min, max) {
-  return (value - min) / (max - min);
-}
-function calculateDistance(coordinates1, coordinates2) {
-  const h = coordinates1.x - coordinates2.x;
-  const v = coordinates1.y - coordinates2.y;
-  return Math.sqrt(h * h + v * v);
-}
-function calculateAngle(coordinates1, coordinates2) {
-  let theta = 0;
-  const dy = coordinates2.y - coordinates1.y;
-  const dx = coordinates2.x - coordinates1.x;
-  theta = Math.atan2(dy, dx);
-  theta *= 180 / Math.PI;
-  return theta;
-}
-function getGlowLayers(factor, intensity) {
-  const glowMap = [1, 2, 7, 14, 24, 42, 86, 124];
-  const scale = intensity * factor;
-  const glowLayers = Array.from({ length: 8 }, (_, i) => {
-    return {
-      radius: scale * glowMap[i],
-      opacity: i > 0 ? 1 / i : 1
-    };
-  });
-  return glowLayers;
-}
-
 const SolarEclipse = () => {
   const [theta, setTheta] = React.useState(0);
   const [obscurity, setObscurity] = React.useState(0);