motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-5MP5QNFG.js

@@ -0,0 +1,560 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/liquid-card/liquid-card.tsx
+import * as React from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import {
+  animate,
+  motion,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var lighten = (hex, k) => {
+  const h = hex.replace("#", "");
+  const n = parseInt(h.length === 3 ? h.replace(/./g, "$&$&") : h, 16);
+  const ch = (shift) => Math.round((n >> shift & 255) + (255 - (n >> shift & 255)) * k);
+  return `#${[16, 8, 0].map((sh) => ch(sh).toString(16).padStart(2, "0")).join("")}`;
+};
+var W = 200;
+var H = 300;
+var rounded = (pts, r) => {
+  const n = pts.length;
+  let d = "";
+  pts.forEach(([x, y], i) => {
+    const [px, py] = pts[(i - 1 + n) % n];
+    const [nx, ny] = pts[(i + 1) % n];
+    const toward = (tx, ty) => {
+      const len = Math.hypot(tx - x, ty - y) || 1;
+      const k = Math.min(r, len / 2) / len;
+      return [x + (tx - x) * k, y + (ty - y) * k];
+    };
+    const [ax, ay] = toward(px, py);
+    const [bx, by] = toward(nx, ny);
+    d += `${i ? " L" : "M"} ${ax.toFixed(1)} ${ay.toFixed(1)} Q ${x} ${y} ${bx.toFixed(1)} ${by.toFixed(1)}`;
+  });
+  return `${d} Z`;
+};
+var ICONS = {
+  bolt: rounded(
+    [
+      [128, 2],
+      [14, 180],
+      [94, 180],
+      [62, 298],
+      [190, 108],
+      [112, 108],
+      [154, 2]
+    ],
+    14
+  ),
+  cloud: "M58 250 C24 250 6 224 6 196 C6 166 30 144 58 144 C62 98 98 66 142 70 C176 74 196 104 194 140 C194 142 194 144 194 146 C196 148 198 150 198 152 L198 200 C198 230 176 250 148 250 Z",
+  shield: "M100 8 L188 42 L188 140 C188 214 146 266 100 292 C54 266 12 214 12 140 L12 42 Z",
+  drop: "M100 6 C100 6 22 118 22 186 C22 238 58 274 100 274 C142 274 178 238 178 186 C178 118 100 6 100 6 Z"
+};
+var PRESETS = {
+  bolt: {
+    value: 85,
+    label: "Battery",
+    caption: "charged",
+    message: ["Almost there,", "full in 12 min"],
+    color: "#3cc97a",
+    glow: "#5ff0a0"
+  },
+  cloud: {
+    value: 62,
+    label: "Cloud storage",
+    caption: "used",
+    message: ["Room to grow,", "38 GB free"],
+    color: "#5b8def",
+    glow: "#3dcbff"
+  },
+  shield: {
+    value: 94,
+    label: "Security score",
+    caption: "protected",
+    message: ["All clear,", "scanned today"],
+    color: "#8b6cf6",
+    glow: "#9d6bff"
+  },
+  drop: {
+    value: 70,
+    label: "Hydration",
+    caption: "of daily goal",
+    message: ["Keep sipping,", "three to go"],
+    color: "#25b6d2",
+    glow: "#14d8f5"
+  }
+};
+var PERIOD = 200;
+var SHIFT = { bolt: 18 };
+var wave = (amp, phase) => {
+  let d = "";
+  for (let x = -PERIOD * 2; x <= W + PERIOD * 2; x += 8) {
+    const y = amp * Math.sin(x / PERIOD * Math.PI * 2 + phase);
+    d += `${d ? " L" : "M"} ${x} ${y.toFixed(2)}`;
+  }
+  return `${d} L ${W + PERIOD * 2} ${H + 40} L ${-PERIOD * 2} ${H + 40} Z`;
+};
+var LiquidCard = React.forwardRef(
+  function LiquidCard2({
+    icon = "bolt",
+    value,
+    label,
+    caption,
+    message,
+    color,
+    theme = "light",
+    interactive = true,
+    onChange,
+    className
+  }, ref) {
+    const preset = PRESETS[icon];
+    const fill = color ? theme === "dark" ? lighten(color, 0.22) : color : theme === "dark" ? preset.glow : preset.color;
+    const start = Math.min(100, Math.max(0, value ?? preset.value));
+    const dark = theme === "dark";
+    const still = !!useReducedMotion();
+    const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "");
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const svg = React.useRef(null);
+    const liquid = React.useRef(null);
+    const front = React.useRef(null);
+    const back = React.useRef(null);
+    const num = React.useRef(null);
+    const bubbles = React.useRef([]);
+    const ring = React.useRef(null);
+    const level = React.useRef({ v: still ? start : 0 });
+    const [shown, setShown] = React.useState(start);
+    const [hover, setHover] = React.useState(false);
+    const surfaceY = (v) => H - v / 100 * (H + 12) + 6;
+    const paint = React.useCallback(() => {
+      const v = level.current.v;
+      if (liquid.current) gsap.set(liquid.current, { y: surfaceY(v) });
+      if (num.current) num.current.textContent = String(Math.round(v));
+    }, []);
+    const { contextSafe } = useGSAP(
+      () => {
+        paint();
+        if (still) return;
+        gsap.to(ring.current, {
+          rotation: 360,
+          duration: 3.2,
+          ease: "none",
+          repeat: -1
+        });
+        gsap.to(front.current, {
+          x: PERIOD,
+          duration: 2.4,
+          ease: "none",
+          repeat: -1
+        });
+        gsap.fromTo(
+          back.current,
+          { x: PERIOD },
+          { x: 0, duration: 3.6, ease: "none", repeat: -1 }
+        );
+        bubbles.current.forEach((b, i) => {
+          if (!b) return;
+          const tl = gsap.timeline({
+            repeat: -1,
+            delay: i * 0.55,
+            repeatDelay: gsap.utils.random(0.2, 1.6)
+          });
+          const x0 = gsap.utils.random(40, 170);
+          tl.fromTo(
+            b,
+            {
+              attr: { cx: x0, cy: H - surfaceY(level.current.v) + 20 },
+              opacity: 0,
+              scale: 0.6
+            },
+            {
+              attr: { cy: 14, cx: x0 + gsap.utils.random(-14, 14) },
+              opacity: 0.9,
+              scale: 1,
+              duration: gsap.utils.random(1.8, 2.8),
+              ease: "sine.in"
+            }
+          ).to(b, { opacity: 0, scale: 1.6, duration: 0.18 }, ">-0.18");
+        });
+      },
+      { scope: root, dependencies: [still] }
+    );
+    const poured = React.useRef(still);
+    React.useEffect(() => {
+      if (still) return;
+      const el = root.current;
+      const io = new IntersectionObserver(
+        ([e]) => {
+          if (!e?.isIntersecting || poured.current) return;
+          poured.current = true;
+          gsap.to(level.current, {
+            v: start,
+            duration: 1.8,
+            ease: "elastic.out(1, 0.55)",
+            onUpdate: paint,
+            onComplete: () => setShown(start)
+          });
+        },
+        { threshold: 0.35 }
+      );
+      io.observe(el);
+      return () => io.disconnect();
+    }, [still, start, paint]);
+    const lastX = React.useRef(null);
+    const slosh = contextSafe((e) => {
+      if (still || !liquid.current) return;
+      const now = performance.now();
+      const prev = lastX.current;
+      lastX.current = { x: e.clientX, t: now };
+      if (!prev) return;
+      const vx = (e.clientX - prev.x) / Math.max(1, now - prev.t);
+      const tilt = gsap.utils.clamp(-14, 14, -vx * 9);
+      if (Math.abs(tilt) < 1.5) return;
+      const origin = `${W / 2} 0`;
+      gsap.to(liquid.current, {
+        rotation: tilt,
+        svgOrigin: origin,
+        duration: 0.25,
+        ease: "power2.out",
+        overwrite: "auto"
+      });
+      gsap.to(liquid.current, {
+        rotation: 0,
+        svgOrigin: origin,
+        duration: 1.6,
+        ease: "elastic.out(1, 0.3)",
+        delay: 0.25
+      });
+    });
+    const dragging = React.useRef(false);
+    const setFrom = contextSafe((clientY) => {
+      const r = svg.current.getBoundingClientRect();
+      const v = Math.round(
+        gsap.utils.clamp(0, 100, (1 - (clientY - r.top) / r.height) * 100)
+      );
+      gsap.to(level.current, {
+        v,
+        duration: 0.5,
+        ease: "power3.out",
+        overwrite: true,
+        onUpdate: paint
+      });
+      setShown(v);
+      onChange?.(v);
+    });
+    const nudge = contextSafe((by) => {
+      const v = gsap.utils.clamp(0, 100, Math.round(level.current.v) + by);
+      gsap.to(level.current, {
+        v,
+        duration: still ? 0 : 0.5,
+        ease: "back.out(2)",
+        overwrite: true,
+        onUpdate: paint
+      });
+      setShown(v);
+      onChange?.(v);
+    });
+    const msg = message ?? preset.message;
+    const ink = dark ? "text-white" : "text-[#242423]";
+    const muted = dark ? "text-white/55" : "text-zinc-500";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: root,
+        onPointerEnter: () => setHover(true),
+        onPointerMove: (e) => {
+          const r = e.currentTarget.getBoundingClientRect();
+          e.currentTarget.style.setProperty("--gx", `${e.clientX - r.left}px`);
+          e.currentTarget.style.setProperty("--gy", `${e.clientY - r.top}px`);
+          slosh(e);
+        },
+        onPointerLeave: () => {
+          lastX.current = null;
+          setHover(false);
+        },
+        className: cn(
+          "relative isolate h-[340px] w-[256px] max-w-full select-none overflow-hidden rounded-[28px] p-6",
+          dark ? "bg-[#111111] shadow-[0_2px_6px_rgba(0,0,0,0.2),0_24px_48px_-20px_rgba(0,0,0,0.55)]" : "bg-white shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-x-0 bottom-0 -z-20 h-1/2",
+              style: {
+                background: `radial-gradient(ellipse 80% 70% at 50% 115%, ${fill}${dark ? "26" : "1a"}, transparent 70%)`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 -z-20",
+              style: {
+                background: `radial-gradient(circle at 0% 100%, #5b8def${dark ? "2e" : "1c"}, transparent 45%)`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 -z-20 transition-opacity duration-500",
+              style: {
+                opacity: hover ? 1 : 0,
+                background: `radial-gradient(260px circle at var(--gx, 70%) var(--gy, 60%), ${fill}${dark ? "1e" : "12"}, transparent 70%)`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 z-10 overflow-hidden rounded-[28px] p-px transition-opacity duration-500",
+              style: {
+                opacity: hover ? 0.55 : 0,
+                mask: "linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)",
+                WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+                WebkitMaskComposite: "xor"
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: ring,
+                  className: "absolute left-1/2 top-1/2 size-[220%] -translate-x-1/2 -translate-y-1/2",
+                  style: {
+                    background: `conic-gradient(from 0deg, transparent 0deg, ${fill} 40deg, transparent 90deg, transparent 180deg, ${fill} 220deg, transparent 270deg)`
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              ref: svg,
+              viewBox: `0 0 ${W} ${H}`,
+              style: { translate: `${-(SHIFT[icon] ?? 0)}px 0` },
+              role: interactive ? "slider" : "img",
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": `${label ?? preset.label}, ${shown} percent`,
+              "aria-valuemin": interactive ? 0 : void 0,
+              "aria-valuemax": interactive ? 100 : void 0,
+              "aria-valuenow": interactive ? shown : void 0,
+              onPointerDown: (e) => {
+                if (!interactive) return;
+                e.stopPropagation();
+                dragging.current = true;
+                e.currentTarget.setPointerCapture(e.pointerId);
+                setFrom(e.clientY);
+              },
+              onPointerMove: (e) => dragging.current && setFrom(e.clientY),
+              onPointerUp: () => void (dragging.current = false),
+              onPointerCancel: () => void (dragging.current = false),
+              onKeyDown: (e) => {
+                if (!interactive) return;
+                const by = e.key === "ArrowUp" ? 5 : e.key === "ArrowDown" ? -5 : 0;
+                if (!by) return;
+                e.preventDefault();
+                nudge(by);
+              },
+              className: cn(
+                "absolute -right-[72px] top-4 -z-10 h-[315px] w-[210px] overflow-visible outline-none",
+                interactive && "cursor-ns-resize touch-none"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: `lc-${uid}`, children: /* @__PURE__ */ jsx("path", { d: ICONS[icon] }) }) }),
+                /* @__PURE__ */ jsx(
+                  "use",
+                  {
+                    href: `#lc-icon-${uid}`,
+                    "aria-hidden": true,
+                    style: {
+                      // Spread a little past the icon, so the halo reaches into the card.
+                      transform: "scale(1.08)",
+                      transformOrigin: "50% 60%",
+                      transformBox: "fill-box",
+                      filter: `blur(${hover ? 34 : 30}px)`,
+                      opacity: dark ? hover ? 0.9 : 0.8 : hover ? 0.55 : 0.45,
+                      transition: "filter 0.5s ease, opacity 0.5s ease"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "g",
+                  {
+                    style: {
+                      filter: `drop-shadow(0 0 ${hover ? 25 : 22}px ${fill}${hover ? "70" : "66"})`,
+                      transition: "filter 0.5s ease"
+                    },
+                    children: /* @__PURE__ */ jsxs("g", { id: `lc-icon-${uid}`, clipPath: `url(#lc-${uid})`, children: [
+                      /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          width: W,
+                          height: H,
+                          fill: dark ? "rgba(255,255,255,0.14)" : "rgba(36,36,35,0.06)"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("g", { ref: liquid, children: [
+                        /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            ref: back,
+                            d: wave(7, Math.PI * 0.7),
+                            fill,
+                            opacity: 0.45
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("path", { ref: front, d: wave(9, 0), fill }),
+                        Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsx(
+                          "circle",
+                          {
+                            ref: (el) => void (bubbles.current[i] = el),
+                            r: 2 + i % 3,
+                            cx: 60 + i * 18,
+                            cy: H,
+                            fill: "white",
+                            opacity: 0
+                          },
+                          i
+                        ))
+                      ] })
+                    ] })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "pointer-events-none flex h-full flex-col", children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-xs font-semibold uppercase tracking-[0.12em]",
+                  dark ? "text-white/70" : "text-zinc-500"
+                ),
+                children: label ?? preset.label
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "p",
+              {
+                className: "mt-3 flex items-start leading-none",
+                style: { color: fill },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      ref: num,
+                      className: "text-[48px] font-semibold tracking-tight tabular-nums",
+                      children: still ? start : 0
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "mt-1 text-2xl font-semibold", children: "%" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm", muted), children: caption ?? preset.caption }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-auto max-w-[128px]", children: [
+              /* @__PURE__ */ jsx("p", { className: cn("text-base font-semibold leading-tight", ink), children: msg[0] }),
+              /* @__PURE__ */ jsx("p", { className: cn("text-base leading-tight", muted), children: msg[1] })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var DEFAULT_CARDS = [
+  { icon: "bolt" },
+  { icon: "cloud" },
+  { icon: "shield" },
+  { icon: "drop" }
+];
+var SLIDE = { type: "spring", stiffness: 260, damping: 32 };
+var CARD_W = 256;
+var GAP = 16;
+var LiquidCarousel = React.forwardRef(function LiquidCarousel2({
+  cards = DEFAULT_CARDS,
+  theme = "light",
+  index,
+  defaultIndex = 0,
+  onIndexChange,
+  className
+}, ref) {
+  const still = !!useReducedMotion();
+  const n = cards.length;
+  const view = React.useRef(null);
+  const x = useMotionValue(0);
+  const [room, setRoom] = React.useState(0);
+  const [at, setAt] = React.useState(
+    Math.min(n - 1, Math.max(0, index ?? defaultIndex))
+  );
+  const step = CARD_W + GAP;
+  const track = n * CARD_W + (n - 1) * GAP;
+  React.useLayoutEffect(() => {
+    const el = view.current;
+    const measure = () => setRoom(Math.max(0, track - el.clientWidth));
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [track]);
+  const slideTo = (i) => {
+    const k = Math.min(n - 1, Math.max(0, i));
+    setAt(k);
+    onIndexChange?.(k);
+    animate(x, -Math.min(room, k * step), still ? { duration: 0 } : SLIDE);
+  };
+  React.useEffect(() => {
+    if (index !== void 0) slideTo(index);
+  }, [index, room]);
+  useMotionValueEvent(x, "change", (v) => {
+    const k = Math.min(n - 1, Math.max(0, Math.round(-v / step)));
+    setAt((cur) => cur === k ? cur : k);
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": "Cards",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.target !== e.currentTarget) return;
+        if (e.key === "ArrowRight") e.preventDefault(), slideTo(at + 1);
+        else if (e.key === "ArrowLeft") e.preventDefault(), slideTo(at - 1);
+      },
+      className: cn("w-full outline-none", className),
+      children: /* @__PURE__ */ jsx("div", { ref: view, className: "px-1 py-3", children: /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          className: "flex w-max cursor-grab touch-pan-y active:cursor-grabbing",
+          style: { x, gap: GAP },
+          drag: still ? false : "x",
+          dragConstraints: { left: -room, right: 0 },
+          dragElastic: 0.12,
+          dragTransition: { power: 0.3, timeConstant: 260 },
+          children: cards.map((card, i) => /* @__PURE__ */ jsx("div", { className: "shrink-0", style: { width: CARD_W }, children: /* @__PURE__ */ jsx(LiquidCard, { theme, ...card }) }, i))
+        }
+      ) })
+    }
+  );
+});
+
+export {
+  LiquidCard,
+  LiquidCarousel
+};

package/dist/chunk-62RBYLIN.js

@@ -0,0 +1,128 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/activity.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.6,
+      ease: "linear",
+      opacity: { duration: 0.1 }
+    }
+  }
+};
+var ActivityIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef(null);
+    const reduced = useReducedMotion();
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2",
+                initial: "normal",
+                variants: VARIANTS
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+ActivityIcon.displayName = "ActivityIcon";
+
+export {
+  ActivityIcon
+};