motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-G3XH7YT2.js

@@ -0,0 +1,122 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/loader-circle.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var G_VARIANTS = {
+  normal: { rotate: 0 },
+  animate: {
+    rotate: 360,
+    transition: {
+      repeat: Number.POSITIVE_INFINITY,
+      duration: 0.8,
+      ease: "linear"
+    }
+  }
+};
+var DEFAULT_TRANSITION = {
+  type: "spring",
+  stiffness: 50,
+  damping: 10
+};
+var LoaderCircleIcon = 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: "M21 12a9 9 0 1 1-6.219-8.56",
+              style: { transformOrigin: "12px 12px" },
+              transition: DEFAULT_TRANSITION,
+              variants: G_VARIANTS
+            }
+          )
+        }
+      )
+    }
+  );
+});
+LoaderCircleIcon.displayName = "LoaderCircleIcon";
+
+export {
+  LoaderCircleIcon
+};

package/dist/chunk-G7KDH7ME.js

@@ -0,0 +1,559 @@
+"use client";
+import {
+  WifiIcon
+} from "./chunk-XL4L2J6N.js";
+import {
+  PlusIcon
+} from "./chunk-HK34LPY6.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/add-card/add-card.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion as motion2,
+  useMotionTemplate,
+  useMotionValue,
+  useInView,
+  useReducedMotion as useReducedMotion2,
+  useSpring,
+  useTransform
+} from "motion/react";
+
+// src/icons/lock.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LockIcon = 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__ */ jsxs(
+          motion.svg,
+          {
+            animate: controls,
+            fill: "none",
+            height: size,
+            initial: "normal",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            transition: {
+              duration: 1,
+              ease: [0.4, 0, 0.2, 1]
+            },
+            variants: {
+              normal: {
+                rotate: 0,
+                scale: 1
+              },
+              animate: {
+                rotate: [-3, 1, -2, 0],
+                scale: [0.95, 1.05, 0.98, 1]
+              }
+            },
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("rect", { height: "11", rx: "2", ry: "2", width: "18", x: "3", y: "11" }),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M7 11V7a5 5 0 0 1 10 0v4",
+                  initial: "normal",
+                  transition: {
+                    duration: 0.3,
+                    ease: [0.4, 0, 0.2, 1]
+                  },
+                  variants: {
+                    normal: {
+                      pathLength: 1
+                    },
+                    animate: {
+                      pathLength: 0.7
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+LockIcon.displayName = "LockIcon";
+
+// src/components/add-card/add-card.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var SPRING = { type: "spring", stiffness: 260, damping: 22 };
+var SUCCESS = "#269a5a";
+function Rolling({
+  text,
+  still,
+  delay = 0,
+  className
+}) {
+  return /* @__PURE__ */ jsx2("span", { className: cn("relative inline-grid overflow-hidden", className), children: /* @__PURE__ */ jsx2(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx2(
+    motion2.span,
+    {
+      className: "whitespace-nowrap",
+      initial: still ? { opacity: 0 } : { opacity: 0, y: "70%", filter: "blur(4px)" },
+      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: still ? { opacity: 0 } : { opacity: 0, y: "-70%", filter: "blur(4px)" },
+      transition: { duration: 0.32, ease: GLIDE, delay },
+      children: text
+    },
+    text
+  ) }) });
+}
+function PaymentCard({
+  phase,
+  last4,
+  holder,
+  expiry,
+  still
+}) {
+  const px = useMotionValue(0.5);
+  const py = useMotionValue(0.5);
+  const rx = useSpring(useTransform(py, [0, 1], [10, -10]), {
+    stiffness: 220,
+    damping: 20
+  });
+  const ry = useSpring(useTransform(px, [0, 1], [-12, 12]), {
+    stiffness: 220,
+    damping: 20
+  });
+  const gx = useTransform(px, (v) => `${v * 100}%`);
+  const gy = useTransform(py, (v) => `${v * 100}%`);
+  const glare = useMotionTemplate`radial-gradient(180px circle at ${gx} ${gy}, rgba(255,255,255,0.18), transparent 70%)`;
+  const [hover, setHover] = React.useState(false);
+  const filled = phase !== "idle";
+  const digits = filled ? last4.padEnd(4, "\u2022").slice(0, 4) : "\u2022\u2022\u2022\u2022";
+  return /* @__PURE__ */ jsx2(
+    motion2.div,
+    {
+      className: "relative h-[152px] w-[240px]",
+      style: { perspective: 800 },
+      onPointerMove: (e) => {
+        if (still) return;
+        const r = e.currentTarget.getBoundingClientRect();
+        px.set((e.clientX - r.left) / r.width);
+        py.set((e.clientY - r.top) / r.height);
+      },
+      onPointerEnter: () => setHover(true),
+      onPointerLeave: () => {
+        setHover(false);
+        px.set(0.5);
+        py.set(0.5);
+      },
+      children: /* @__PURE__ */ jsxs2(
+        motion2.div,
+        {
+          className: "relative size-full overflow-hidden rounded-2xl bg-[#242423] p-4 text-white shadow-[0_2px_4px_rgba(0,0,0,0.12),0_18px_40px_-14px_rgba(0,0,0,0.45)]",
+          style: { rotateX: rx, rotateY: ry, transformStyle: "preserve-3d" },
+          children: [
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "pointer-events-none absolute inset-0 bg-[linear-gradient(135deg,rgba(255,255,255,0.08),transparent_45%)]"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              motion2.span,
+              {
+                "aria-hidden": true,
+                className: "pointer-events-none absolute inset-0 transition-opacity duration-300",
+                style: { background: glare, opacity: hover && !still ? 1 : 0 }
+              }
+            ),
+            /* @__PURE__ */ jsxs2("div", { className: "relative flex items-start justify-between", children: [
+              /* @__PURE__ */ jsxs2("span", { className: "relative block h-6 w-8 overflow-hidden rounded-[6px] bg-gradient-to-br from-[#e8d29a] to-[#b8964f]", children: [
+                /* @__PURE__ */ jsx2("span", { className: "absolute inset-x-0 top-1/2 h-px bg-black/20" }),
+                /* @__PURE__ */ jsx2("span", { className: "absolute inset-y-0 left-1/2 w-px bg-black/20" })
+              ] }),
+              /* @__PURE__ */ jsx2(AnimatePresence, { mode: "popLayout", initial: false, children: phase === "done" ? /* @__PURE__ */ jsx2(
+                motion2.span,
+                {
+                  className: "grid size-6 place-items-center rounded-full text-white",
+                  style: { background: SUCCESS },
+                  initial: still ? { opacity: 0 } : { scale: 0, rotate: -90 },
+                  animate: { scale: 1, rotate: 0, opacity: 1 },
+                  transition: {
+                    type: "spring",
+                    stiffness: 500,
+                    damping: 18,
+                    delay: still ? 0 : 0.25
+                  },
+                  children: /* @__PURE__ */ jsx2(CheckIcon, { className: "size-4", strokeWidth: 3, "aria-hidden": true })
+                },
+                "check"
+              ) : /* @__PURE__ */ jsx2(
+                motion2.span,
+                {
+                  exit: { opacity: 0, scale: 0.6 },
+                  className: "grid size-6 place-items-center",
+                  children: /* @__PURE__ */ jsx2(
+                    WifiIcon,
+                    {
+                      className: "size-5 rotate-90 text-white/60",
+                      strokeWidth: 2,
+                      "aria-hidden": true
+                    }
+                  )
+                },
+                "wave"
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs2("p", { className: "relative mt-6 flex gap-3 font-mono text-sm tracking-[0.12em] text-white/90", children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-white/50", children: "\u2022\u2022\u2022\u2022" }),
+              /* @__PURE__ */ jsx2("span", { className: "text-white/50", children: "\u2022\u2022\u2022\u2022" }),
+              /* @__PURE__ */ jsx2("span", { className: "text-white/50", children: "\u2022\u2022\u2022\u2022" }),
+              /* @__PURE__ */ jsx2("span", { className: "flex", children: [...digits].map((c, i) => /* @__PURE__ */ jsx2(
+                Rolling,
+                {
+                  text: c,
+                  still,
+                  delay: filled ? i * 0.12 : 0
+                },
+                i
+              )) })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "relative mt-4 flex items-end justify-between text-xs", children: [
+              /* @__PURE__ */ jsxs2("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx2("span", { className: "block text-white/40", children: "Cardholder" }),
+                /* @__PURE__ */ jsx2(
+                  Rolling,
+                  {
+                    text: filled ? holder : "Your name",
+                    still,
+                    delay: filled ? 0.5 : 0,
+                    className: cn("font-medium", !filled && "text-white/50")
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs2("span", { className: "text-right", children: [
+                /* @__PURE__ */ jsx2("span", { className: "block text-white/40", children: "Expires" }),
+                /* @__PURE__ */ jsx2(
+                  Rolling,
+                  {
+                    text: filled ? expiry : "MM/YY",
+                    still,
+                    delay: filled ? 0.62 : 0,
+                    className: cn(
+                      "font-medium tabular-nums",
+                      !filled && "text-white/50"
+                    )
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+var AddCard = React.forwardRef(
+  function AddCard2({
+    title = "Add your first card",
+    subtitle = "Save a card to pay for classes in one tap. You can change or remove it any time.",
+    cta = "Add card",
+    doneLabel = "Card added",
+    note = "Encrypted end to end. We never store your full number.",
+    last4 = "4242",
+    holder = "Alex Morgan",
+    expiry = "08/29",
+    onAdd,
+    className
+  }, ref) {
+    const still = !!useReducedMotion2();
+    const [phase, setPhase] = React.useState("idle");
+    const card = React.useRef(null);
+    React.useImperativeHandle(ref, () => card.current);
+    const inView = useInView(card, { once: true, amount: 0.4 });
+    const show = still || inView;
+    const add = async () => {
+      if (phase !== "idle") return;
+      setPhase("typing");
+      try {
+        await Promise.all([
+          onAdd?.(),
+          new Promise((r) => setTimeout(r, still ? 150 : 1e3))
+        ]);
+        setPhase("done");
+      } catch {
+        setPhase("idle");
+      }
+    };
+    const done = phase === "done";
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: card,
+        className: cn(
+          "w-[400px] max-w-full rounded-3xl bg-white p-6 text-zinc-900 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] dark:bg-zinc-900 dark:text-zinc-100",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs2(
+            motion2.div,
+            {
+              initial: still ? false : { opacity: 0, scale: 0.96 },
+              animate: show ? { opacity: 1, scale: 1 } : void 0,
+              transition: { duration: 0.6, ease: GLIDE },
+              className: "relative grid h-[224px] place-items-center overflow-hidden rounded-2xl bg-zinc-100 dark:bg-white/6",
+              children: [
+                /* @__PURE__ */ jsx2(
+                  motion2.span,
+                  {
+                    "aria-hidden": true,
+                    className: "absolute h-[152px] w-[240px] rounded-2xl border-2 border-dashed border-zinc-300 dark:border-white/15",
+                    initial: still ? false : { opacity: 0, scale: 0.9 },
+                    animate: show ? { opacity: done ? 0 : 1, scale: done ? 1.04 : 1 } : void 0,
+                    transition: {
+                      duration: 0.4,
+                      ease: GLIDE,
+                      delay: done ? 0.1 : still ? 0 : 0.2
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  motion2.span,
+                  {
+                    "aria-hidden": true,
+                    className: "absolute top-[calc(50%+64px)] h-6 w-[200px] rounded-[50%] bg-black/15 blur-md dark:bg-black/40",
+                    animate: done ? { opacity: 0.9, scaleX: 1 } : { opacity: 0.45, scaleX: 0.8 },
+                    transition: SPRING
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  motion2.div,
+                  {
+                    "aria-hidden": true,
+                    initial: still ? false : { opacity: 0, y: -120, rotate: -22, scale: 0.9 },
+                    animate: show ? { opacity: 1, y: 0, rotate: 0, scale: 1 } : void 0,
+                    transition: {
+                      type: "spring",
+                      stiffness: 170,
+                      damping: 18,
+                      delay: 0.15,
+                      opacity: { duration: 0.3, delay: 0.15 }
+                    },
+                    children: /* @__PURE__ */ jsx2(
+                      motion2.div,
+                      {
+                        initial: false,
+                        animate: done || still ? { y: 0, rotate: 0, scale: 1 } : { y: [-14, -20, -14], rotate: -6, scale: 0.96 },
+                        transition: done ? { type: "spring", stiffness: 380, damping: 16 } : {
+                          y: { duration: 3.2, repeat: Infinity, ease: "easeInOut" },
+                          default: SPRING
+                        },
+                        children: /* @__PURE__ */ jsx2(
+                          PaymentCard,
+                          {
+                            phase,
+                            last4,
+                            holder,
+                            expiry,
+                            still
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            motion2.div,
+            {
+              initial: still ? false : { opacity: 0, y: 12, filter: "blur(4px)" },
+              animate: show ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+              transition: { duration: 0.5, ease: GLIDE, delay: 0.35 },
+              children: [
+                /* @__PURE__ */ jsx2("h3", { className: "mt-6 text-lg font-semibold tracking-tight", children: title }),
+                /* @__PURE__ */ jsx2("p", { className: "mt-1 text-base leading-relaxed text-zinc-500 dark:text-zinc-400", children: subtitle })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            motion2.div,
+            {
+              initial: still ? false : { opacity: 0, y: 12, filter: "blur(4px)" },
+              animate: show ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+              transition: { duration: 0.5, ease: GLIDE, delay: 0.7 },
+              children: [
+                /* @__PURE__ */ jsxs2(
+                  motion2.button,
+                  {
+                    type: "button",
+                    onClick: add,
+                    "aria-disabled": phase !== "idle",
+                    whileTap: phase === "idle" && !still ? { scale: 0.98 } : void 0,
+                    animate: { backgroundColor: done ? SUCCESS : "#242423" },
+                    transition: { duration: still ? 0 : 0.3, ease: GLIDE },
+                    className: cn(
+                      "group mt-6 flex h-12 w-full items-center justify-center gap-2 rounded-full text-sm font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900",
+                      phase === "idle" ? "cursor-pointer" : "cursor-default"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx2("span", { className: "relative grid size-4 place-items-center", children: /* @__PURE__ */ jsx2(AnimatePresence, { mode: "popLayout", initial: false, children: phase === "typing" ? /* @__PURE__ */ jsx2(
+                        motion2.span,
+                        {
+                          className: "size-4 rounded-full border-2 border-white/30 border-t-white",
+                          initial: { opacity: 0, scale: 0.6 },
+                          animate: { opacity: 1, scale: 1, rotate: still ? 0 : 360 },
+                          exit: { opacity: 0, scale: 0.6 },
+                          transition: {
+                            rotate: {
+                              duration: 0.8,
+                              ease: "linear",
+                              repeat: Infinity
+                            },
+                            default: { duration: 0.2 }
+                          }
+                        },
+                        "spin"
+                      ) : done ? /* @__PURE__ */ jsx2(
+                        motion2.svg,
+                        {
+                          viewBox: "0 0 16 16",
+                          className: "size-4",
+                          initial: { opacity: 0, scale: 0.6 },
+                          animate: { opacity: 1, scale: 1 },
+                          transition: { type: "spring", stiffness: 500, damping: 22 },
+                          children: /* @__PURE__ */ jsx2(
+                            motion2.path,
+                            {
+                              d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: 2.25,
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              initial: { pathLength: still ? 1 : 0 },
+                              animate: { pathLength: 1 },
+                              transition: { duration: 0.35, ease: GLIDE, delay: 0.08 }
+                            }
+                          )
+                        },
+                        "check"
+                      ) : /* @__PURE__ */ jsx2(
+                        motion2.span,
+                        {
+                          className: "grid",
+                          initial: { opacity: 0, scale: 0.6 },
+                          animate: { opacity: 1, scale: 1 },
+                          exit: { opacity: 0, scale: 0.6 },
+                          children: /* @__PURE__ */ jsx2(
+                            PlusIcon,
+                            {
+                              className: "size-4 transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:rotate-90",
+                              strokeWidth: 2.5,
+                              "aria-hidden": true
+                            }
+                          )
+                        },
+                        "plus"
+                      ) }) }),
+                      /* @__PURE__ */ jsx2(
+                        Rolling,
+                        {
+                          text: phase === "typing" ? "Adding card" : done ? doneLabel : cta,
+                          still
+                        }
+                      )
+                    ]
+                  }
+                ),
+                note && /* @__PURE__ */ jsxs2("p", { className: "mt-3 flex items-center justify-center gap-1.5 text-xs text-zinc-500 dark:text-zinc-400", children: [
+                  /* @__PURE__ */ jsx2(LockIcon, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true }),
+                  note
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { role: "status", "aria-live": "polite", className: "sr-only", children: phase === "typing" ? "Adding card." : done ? `Card ending in ${last4} added.` : "" })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  AddCard
+};