@cimplify/sdk 0.56.0 → 0.58.0

package/dist/react.mjs

@@ -1,12 +1,12 @@
 "use client";
-import { DURATION_UNIT, getVariantDisplayName, INPUT_FIELD_TYPE, PRODUCT_TYPE, startSignIn, RENDER_HINT } from './chunk-XYI4NXWG.mjs';
-export { getVariantDisplayName } from './chunk-XYI4NXWG.mjs';
+import { DURATION_UNIT, getVariantDisplayName, INPUT_FIELD_TYPE, PRODUCT_TYPE, resolveGallery, startSignIn, RENDER_HINT } from './chunk-W6FRIYYU.mjs';
+export { getVariantDisplayName } from './chunk-W6FRIYYU.mjs';
 import { createCimplifyClient } from './chunk-SQ7U3BWY.mjs';
 import { ELEMENT_TYPES, EVENT_TYPES } from './chunk-I4IXPQIX.mjs';
 import { formatPrice, parsePrice, getUnitPriceAtQuantity, isOnSale, getDiscountPercentage, getBasePrice, getPriceRange, formatPriceRange } from './chunk-TD3AY34U.mjs';
 import { isSupportedCurrency } from './chunk-AMZXALF6.mjs';
 import './chunk-3G6RQLXK.mjs';
-import React11, { createContext, useRef, useState, useCallback, useEffect, useContext, useMemo, useId, useSyncExternalStore } from 'react';
+import React12, { createContext, useRef, useState, useCallback, useEffect, useContext, useMemo, useId, useSyncExternalStore } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -14,7 +14,7 @@ import { NumberField } from '@base-ui/react/number-field';
 import { RadioGroup } from '@base-ui/react/radio-group';
 import { Radio } from '@base-ui/react/radio';
 import { Checkbox } from '@base-ui/react/checkbox';
-import { Button } from '@base-ui/react/button';
+import { Button as Button$1 } from '@base-ui/react/button';
 import { Popover } from '@base-ui/react/popover';
 import { DayPicker } from 'react-day-picker';
 import { format, parseISO, isValid } from 'date-fns';
@@ -1426,14 +1426,14 @@ function CimplifyCheckout({
   const resolvedCartRef = useRef(resolvedCart);
   resolvedCartRef.current = resolvedCart;
   const isDark = appearance?.theme === "dark";
-  const emitStatus = React11.useEffectEvent(
+  const emitStatus = React12.useEffectEvent(
     (nextStatus, context = {}) => {
       setStatus(nextStatus);
       setStatusText(context.display_text || "");
       onStatusChange?.(nextStatus, context);
     }
   );
-  const fireError = React11.useEffectEvent(
+  const fireError = React12.useEffectEvent(
     (error) => {
       onError?.(error);
     }
@@ -1529,7 +1529,7 @@ function CimplifyCheckout({
       activeCheckoutRef.current = null;
     };
   }, []);
-  const handleSubmit = React11.useEffectEvent(async () => {
+  const handleSubmit = React12.useEffectEvent(async () => {
     if (isSubmitting || isInitializing || !resolvedCartId) {
       if (!resolvedCartId && !isInitializing) {
         const message = "Your cart is empty. Add items before checkout.";
@@ -1750,6 +1750,944 @@ function CimplifyAccount({
     }
   );
 }
+var BUTTON_BASE = "inline-flex items-center justify-center gap-2 font-semibold leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:opacity-50 disabled:cursor-not-allowed [font-family:inherit] cursor-pointer rounded-[10px]";
+var BUTTON_VARIANTS = {
+  primary: "bg-foreground text-background hover:bg-foreground/90",
+  secondary: "bg-card text-foreground border border-border hover:bg-muted/40 hover:border-foreground/40",
+  ghost: "bg-transparent text-foreground/80 hover:bg-muted/40 hover:text-foreground",
+  danger: "bg-transparent text-destructive border border-border hover:bg-destructive/10 hover:border-destructive"
+};
+var BUTTON_SIZES = {
+  sm: "px-[13px] py-[7px] text-[12.5px]",
+  md: "px-[18px] py-[10px] text-[13.5px]"
+};
+var Button = React12.forwardRef(function Button2({ variant = "primary", size = "md", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: props.type ?? "button",
+      className: cn(BUTTON_BASE, BUTTON_VARIANTS[variant], BUTTON_SIZES[size], className),
+      "data-cimplify-account-button": true,
+      "data-variant": variant,
+      ...props,
+      children
+    }
+  );
+});
+var STATUS_COLOR = {
+  preparing: "text-amber-600",
+  active: "text-amber-600",
+  delivered: "text-emerald-600",
+  completed: "text-foreground/55",
+  cancelled: "text-destructive",
+  paused: "text-foreground/55"
+};
+var STATUS_WEIGHT = {
+  preparing: "font-semibold",
+  active: "font-semibold",
+  delivered: "font-medium",
+  completed: "font-medium",
+  cancelled: "font-medium",
+  paused: "font-medium"
+};
+var STATUS_DEFAULT_LABEL = {
+  preparing: "In progress",
+  active: "Active",
+  delivered: "Delivered",
+  completed: "Completed",
+  cancelled: "Cancelled",
+  paused: "Paused"
+};
+function Status({ status, className }) {
+  const label = status.label ?? STATUS_DEFAULT_LABEL[status.kind];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-cimplify-account-status": true,
+      "data-kind": status.kind,
+      className: cn(
+        "inline-flex items-center gap-[7px] text-[12.5px]",
+        STATUS_COLOR[status.kind],
+        STATUS_WEIGHT[status.kind],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "size-[7px] rounded-full bg-current", "aria-hidden": true }),
+        label
+      ]
+    }
+  );
+}
+function BackLink({ label = "Back", className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      "data-cimplify-account-back": true,
+      className: cn(
+        "inline-flex items-center gap-1.5 text-[13px] text-foreground/55 hover:text-primary",
+        "transition-colors mb-7",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2190" }),
+        props.children ?? label
+      ]
+    }
+  );
+}
+function FilterTabs({
+  items,
+  value,
+  onChange,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "data-cimplify-account-filter-tabs": true,
+      className: cn("flex gap-0 border-b border-border/60 mb-7 overflow-x-auto", className),
+      children: items.map((item) => {
+        const active = item.value === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            role: "tab",
+            "aria-selected": active,
+            type: "button",
+            onClick: () => onChange?.(item.value),
+            "data-active": active || void 0,
+            className: cn(
+              "inline-flex items-baseline gap-2 px-4 pt-3 pb-[13px] text-[13.5px]",
+              "border-b-2 -mb-px whitespace-nowrap transition-colors",
+              active ? "text-foreground border-foreground font-semibold" : "text-foreground/55 border-transparent hover:text-foreground font-medium"
+            ),
+            children: [
+              item.label,
+              item.count !== void 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-[11.5px] tabular-nums font-medium",
+                    active ? "text-foreground/70" : "text-foreground/55"
+                  ),
+                  children: item.count
+                }
+              )
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+function EmptyState({ glyph, title, description, action, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-account-empty": true,
+      className: cn(
+        "rounded-[16px] border border-dashed border-border bg-card",
+        "px-6 py-20 text-center",
+        className
+      ),
+      children: [
+        glyph && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-5 size-14 rounded-[12px] bg-muted/40 text-foreground/55 grid place-items-center", children: glyph }),
+        /* @__PURE__ */ jsx("h3", { className: "font-serif text-[22px] font-semibold tracking-[-0.02em] text-foreground mb-2", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mx-auto mb-6 max-w-[380px] text-sm leading-[1.55] text-foreground/70", children: description }),
+        action
+      ]
+    }
+  );
+}
+function ErrorState({
+  title = "Something went wrong",
+  message = "We couldn't load this right now. Try again in a moment.",
+  onRetry,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-account-error": true,
+      className: cn("rounded-[16px] border border-border bg-card px-6 py-8 text-center", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4 size-11 rounded-[12px] bg-destructive/10 text-destructive grid place-items-center", children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+          /* @__PURE__ */ jsx("path", { d: "M12 8v5M12 16v.5" })
+        ] }) }),
+        /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold mb-1.5 text-foreground", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-foreground/55 mb-4 leading-[1.5]", children: message }),
+        onRetry && /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: onRetry, children: "Try again" })
+      ]
+    }
+  );
+}
+function Skeleton({ className, variant = "block" }) {
+  if (variant === "row") {
+    return /* @__PURE__ */ jsxs("div", { "data-cimplify-account-skeleton": true, className: cn("grid grid-cols-[44px_1fr_60px] gap-3 items-center py-3", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "size-11 rounded-md bg-muted/50 animate-pulse" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted/50 rounded animate-pulse w-3/4" }),
+        /* @__PURE__ */ jsx("div", { className: "h-2.5 bg-muted/40 rounded animate-pulse w-1/2" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted/50 rounded animate-pulse" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { "data-cimplify-account-skeleton": true, className: cn("bg-muted/50 rounded-md animate-pulse", className) });
+}
+function Toast({ title, description, onUndo, onDismiss, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-account-toast": true,
+      role: "status",
+      "aria-live": "polite",
+      className: cn(
+        "relative grid grid-cols-[22px_1fr_auto_auto] gap-3 items-center mb-6",
+        "rounded-[10px] bg-foreground text-background px-4 py-3.5 pr-5 text-[13.5px]",
+        "shadow-[0_1px_0_rgba(0,0,0,0.04),0_8px_24px_rgba(0,0,0,0.12)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "size-[22px] rounded-full bg-emerald-500 grid place-items-center", children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "white", strokeWidth: "2.4", children: /* @__PURE__ */ jsx("path", { d: "M4 8.5l2.5 2.5L12 5.5" }) }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "font-semibold", children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: "text-[12px] opacity-75 mt-0.5", children: description })
+        ] }),
+        onUndo && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onUndo,
+            className: "rounded-[8px] border border-white/20 bg-transparent text-background px-3 py-1.5 text-[12.5px] font-semibold hover:bg-white/10",
+            children: "Undo"
+          }
+        ),
+        onDismiss && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            onClick: onDismiss,
+            className: "bg-transparent border-0 text-background/60 p-1 hover:text-background",
+            children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: /* @__PURE__ */ jsx("path", { d: "M3.5 3.5l7 7M10.5 3.5l-7 7" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function AccountShell({ sidebar, children, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-account-shell": true,
+      className: cn(
+        "grid min-h-[720px] bg-background",
+        "grid-cols-1 md:grid-cols-[280px_1fr]",
+        className
+      ),
+      children: [
+        sidebar,
+        /* @__PURE__ */ jsx("div", { className: "min-w-0", children })
+      ]
+    }
+  );
+}
+function AccountSidebar({ children, scopeNote, className }) {
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      "data-cimplify-account-sidebar": true,
+      className: cn(
+        "hidden md:flex flex-col bg-background border-r border-border/60",
+        "px-6 pt-9 pb-7",
+        className
+      ),
+      children: [
+        children,
+        scopeNote && /* @__PURE__ */ jsx("div", { className: "mt-auto pt-6 px-2 text-[11.5px] leading-[1.55] text-foreground/55", children: scopeNote })
+      ]
+    }
+  );
+}
+function avatarGradient(seed) {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i++) hash = (hash << 5) - hash + seed.charCodeAt(i) | 0;
+  const hue = (Math.abs(hash) % 60 + 20) % 360;
+  return `linear-gradient(135deg, oklch(0.78 0.10 ${hue}), oklch(0.55 0.16 ${hue - 8}))`;
+}
+function initials(name) {
+  return name.trim().split(/\s+/).map((p) => p[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+}
+function AccountIdentityStrip({
+  name,
+  email,
+  customerId,
+  className
+}) {
+  const seed = customerId ?? name;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-account-identity": true,
+      className: cn(
+        "grid grid-cols-[40px_1fr] gap-3 items-center",
+        "border-b border-border/60 px-2 pb-[22px] mb-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "size-10 rounded-full grid place-items-center text-white font-serif font-semibold text-[16px] tracking-[-0.01em]",
+            style: { background: avatarGradient(seed) },
+            children: initials(name)
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[14px] font-semibold text-foreground truncate", children: name }),
+          email && /* @__PURE__ */ jsx("div", { className: "text-[12px] text-foreground/55 truncate", children: email })
+        ] })
+      ]
+    }
+  );
+}
+var externIcon = /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4 8l4-4M5 4h3v3" }) });
+function AccountNav({ items, activeHref, className }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Account", "data-cimplify-account-nav": true, className: cn("pt-4", className), children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-px list-none p-0 m-0", children: items.map((item, idx) => {
+    if (item.divider) {
+      return /* @__PURE__ */ jsx("li", { "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: "h-px bg-border/60 mx-2 my-3" }) }, `d-${idx}`);
+    }
+    const active = item.href === activeHref;
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: item.href,
+        "aria-current": active ? "page" : void 0,
+        "data-active": active || void 0,
+        className: cn(
+          "grid grid-cols-[16px_1fr_auto] gap-3 items-center rounded-lg px-3 py-2",
+          "text-[13.5px] no-underline transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+          active ? "bg-card shadow-[0_0_0_1px_var(--color-border)] text-foreground font-semibold" : "text-foreground/70 font-medium hover:bg-muted/40 hover:text-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("size-4 grid place-items-center", active ? "text-primary opacity-100" : "opacity-70"), children: item.icon }),
+          /* @__PURE__ */ jsx("span", { children: item.label }),
+          item.external && /* @__PURE__ */ jsx("span", { className: "text-foreground/55 opacity-70", children: externIcon })
+        ]
+      }
+    ) }, item.href);
+  }) }) });
+}
+function AccountHero({ eyebrow = "Your account", title, subtitle, className }) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      "data-cimplify-account-hero": true,
+      className: cn("mb-11", className),
+      children: [
+        eyebrow && /* @__PURE__ */ jsx("div", { className: "text-[11px] font-semibold tracking-[0.16em] uppercase text-primary mb-2", children: eyebrow }),
+        /* @__PURE__ */ jsx("h1", { className: "font-serif text-[clamp(28px,3vw,40px)] font-semibold tracking-[-0.025em] leading-[1.05] text-foreground m-0", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "text-foreground/70 mt-3 text-[14.5px] m-0", children: subtitle })
+      ]
+    }
+  );
+}
+function AccountContent({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      "data-cimplify-account-content": true,
+      className: cn(
+        "bg-background min-w-0",
+        "px-6 sm:px-10 md:px-16 pt-14 pb-18",
+        className
+      ),
+      children
+    }
+  );
+}
+function Section({ title, meta, action, children, className }) {
+  return /* @__PURE__ */ jsxs("section", { "data-cimplify-account-section": true, className: cn("mt-11 first:mt-0", className), children: [
+    (title || meta || action) && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mb-3.5", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-[12px] font-semibold tracking-[0.1em] uppercase text-foreground/55 m-0", children: title }),
+      meta && /* @__PURE__ */ jsx("span", { className: "text-[12px] text-foreground/55 tabular-nums", children: meta }),
+      action
+    ] }),
+    children
+  ] });
+}
+function SectionMore({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "data-cimplify-account-section-more": true,
+      className: cn("text-[13px] font-medium text-primary no-underline hover:underline", className),
+      ...props,
+      children
+    }
+  );
+}
+function Pane({ pane, side }) {
+  const color = pane.variant === "live" ? "text-amber-600" : "text-emerald-600";
+  const haloAnim = pane.variant === "live" ? "cimplify-live-pulse" : "";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", side === "right" && "md:pl-8 md:border-l border-border/60"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-2 text-[11.5px] font-semibold tracking-[0.08em] uppercase", color), children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-cimplify-live-dot": pane.variant === "live" || void 0,
+            className: cn("size-1.5 rounded-full bg-current", haloAnim),
+            "aria-hidden": true
+          }
+        ),
+        pane.label
+      ] }),
+      /* @__PURE__ */ jsx("h3", { className: "font-serif text-[22px] font-semibold tracking-[-0.02em] leading-[1.2] text-foreground m-0", children: pane.title }),
+      /* @__PURE__ */ jsx("div", { className: "text-[13.5px] text-foreground/70", children: pane.when })
+    ] }),
+    pane.actions && /* @__PURE__ */ jsx("div", { className: "flex gap-2.5 mt-auto", children: pane.actions })
+  ] });
+}
+function HappeningCard({ left, right, className }) {
+  if (!left && !right) return null;
+  const dual = !!left && !!right;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes cimplify-live-pulse {
+          0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklch, currentColor 18%, transparent); }
+          50% { box-shadow: 0 0 0 8px color-mix(in oklch, currentColor 5%, transparent); }
+        }
+        .cimplify-live-pulse { animation: cimplify-live-pulse 1.8s ease-in-out infinite; }
+      ` }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-cimplify-happening-card": true,
+        "data-dual": dual || void 0,
+        className: cn(
+          "bg-card border border-border rounded-[16px] p-7",
+          "grid gap-4 md:gap-0 items-stretch",
+          dual ? "md:grid-cols-2" : "grid-cols-1",
+          className
+        ),
+        children: [
+          left && /* @__PURE__ */ jsx(Pane, { pane: left, side: "left" }),
+          right && /* @__PURE__ */ jsx(Pane, { pane: right, side: "right" })
+        ]
+      }
+    )
+  ] });
+}
+function ContinuityCard({ glyph, title, description, badge, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-continuity-card": true,
+      className: cn(
+        "grid grid-cols-[auto_1fr_auto] gap-3.5 items-center",
+        "rounded-[12px] px-5 py-3.5 mb-8 -mt-5",
+        "border bg-card text-foreground text-[13.5px]",
+        // soft primary-tinted gradient
+        "bg-[linear-gradient(135deg,color-mix(in_oklch,var(--color-primary)_8%,transparent),var(--color-background))]",
+        "border-[color-mix(in_oklch,var(--color-primary)_18%,transparent)]",
+        className
+      ),
+      children: [
+        glyph && /* @__PURE__ */ jsx("div", { className: "size-[26px] rounded-full bg-card border border-border grid place-items-center text-primary text-[13px]", children: glyph }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: "text-foreground/55 text-[12px] mt-0.5", children: description })
+        ] }),
+        badge && /* @__PURE__ */ jsx("span", { className: "text-[11.5px] text-primary font-semibold uppercase tracking-[0.06em] px-2.5 py-1 rounded-full bg-card border border-border", children: badge })
+      ]
+    }
+  );
+}
+function WelcomeCard({ title, description, action, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-welcome-card": true,
+      className: cn(
+        "rounded-[16px] border border-border bg-card",
+        "px-9 py-9 grid grid-cols-1 md:grid-cols-[1fr_auto] gap-8 items-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-serif text-[24px] font-semibold tracking-[-0.02em] text-foreground m-0 mb-2", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-foreground/70 text-sm leading-[1.55] max-w-[460px] m-0", children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { children: action })
+      ]
+    }
+  );
+}
+function summaryLine(s) {
+  if (!s) return "Addresses, payment, profile \xB7 syncs to every Cimplify shop";
+  const parts = [];
+  if (typeof s.addresses === "number")
+    parts.push(`${s.addresses} address${s.addresses === 1 ? "" : "es"}`);
+  if (typeof s.paymentMethods === "number")
+    parts.push(`${s.paymentMethods} payment method${s.paymentMethods === 1 ? "" : "s"}`);
+  if (typeof s.shops === "number")
+    parts.push(`${s.shops} shop${s.shops === 1 ? "" : "s"}`);
+  if (parts.length === 0) return "Addresses, payment, profile \xB7 syncs to every Cimplify shop";
+  return parts.join(" \xB7 ");
+}
+function IdentityOfframp({
+  title = "Cimplify identity",
+  summary,
+  href = "https://link.cimplify.io",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      "data-cimplify-identity-offramp": true,
+      href,
+      target: href.startsWith("http") ? "_blank" : void 0,
+      rel: href.startsWith("http") ? "noopener noreferrer" : void 0,
+      className: cn(
+        "grid grid-cols-[40px_1fr_auto] gap-4 items-center",
+        "rounded-[16px] border border-border bg-card px-5 py-4",
+        "no-underline text-foreground transition-colors",
+        "hover:bg-muted/40 hover:border-foreground/40",
+        "group",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "size-10 rounded-md bg-foreground text-background grid place-items-center font-serif font-bold text-[18px]", children: "C" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[14px] font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "text-[12.5px] text-foreground/55 mt-0.5 tabular-nums", children: summaryLine(summary) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 14 14",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.6",
+            className: "text-foreground/55 transition-transform group-hover:text-primary group-hover:translate-x-0.5",
+            children: /* @__PURE__ */ jsx("path", { d: "M5 3l4 4-4 4" })
+          }
+        )
+      ]
+    }
+  );
+}
+var THUMB_GRADIENTS = [
+  "linear-gradient(135deg, oklch(0.86 0.06 60), oklch(0.74 0.11 35))",
+  "linear-gradient(135deg, oklch(0.92 0.04 80), oklch(0.84 0.08 60))",
+  "linear-gradient(135deg, oklch(0.94 0.05 25), oklch(0.82 0.10 30))",
+  "linear-gradient(135deg, oklch(0.74 0.10 45), oklch(0.58 0.13 30))"
+];
+function deterministicGradient(seed, idx) {
+  let hash = idx;
+  for (let i = 0; i < seed.length; i++) hash = (hash << 5) - hash + seed.charCodeAt(i) | 0;
+  return THUMB_GRADIENTS[Math.abs(hash) % THUMB_GRADIENTS.length];
+}
+function Thumbs({ thumbnails, seed = "" }) {
+  const list = thumbnails && thumbnails.length > 0 ? thumbnails : [`${seed}-a`, `${seed}-b`, `${seed}-c`];
+  const solo = list.length === 1;
+  return /* @__PURE__ */ jsx("div", { className: "relative size-14", "aria-hidden": true, children: list.slice(0, 3).map((src, i) => {
+    const isImg = src.startsWith("http") || src.startsWith("/");
+    const sizes = solo ? "size-14 left-0 top-0 z-30" : [
+      "size-11 left-0 top-0 z-30",
+      "size-[38px] left-[14px] top-1 z-20",
+      "size-8 left-6 top-2 z-10"
+    ][i];
+    const style = isImg ? { backgroundImage: `url(${src})`, backgroundSize: "cover", backgroundPosition: "center" } : { background: deterministicGradient(src, i) };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute rounded-md shadow-[0_0_0_2px_var(--color-card)]",
+          sizes
+        ),
+        style
+      },
+      i
+    );
+  }) });
+}
+function OrderRow({ order, onSelect, className }) {
+  const Element = order.href ? "a" : "button";
+  return /* @__PURE__ */ jsxs(
+    Element,
+    {
+      "data-cimplify-order-row": true,
+      href: order.href,
+      type: order.href ? void 0 : "button",
+      onClick: () => onSelect?.(order.id),
+      className: cn(
+        "grid grid-cols-[56px_1fr_auto_auto] gap-5 items-center px-[22px] py-[18px]",
+        "border-b border-border/60 last:border-b-0",
+        "text-left no-underline w-full bg-transparent",
+        "transition-colors hover:bg-muted/40",
+        "group cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Thumbs, { thumbnails: order.thumbnails, seed: order.id }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[14px] font-semibold text-foreground leading-[1.4] truncate", children: order.summary }),
+          /* @__PURE__ */ jsxs("div", { className: "text-[12.5px] text-foreground/55 flex gap-2 items-center tabular-nums", children: [
+            /* @__PURE__ */ jsx("span", { children: order.meta }),
+            /* @__PURE__ */ jsx("span", { className: "text-border", children: "\xB7" }),
+            /* @__PURE__ */ jsxs("span", { className: "font-mono text-[11px]", children: [
+              "#",
+              order.id
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Status, { status: order.status }),
+        /* @__PURE__ */ jsx("div", { className: "text-[14.5px] font-semibold text-foreground tabular-nums", children: order.total })
+      ]
+    }
+  );
+}
+function OrderList({ orders, onSelect, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-cimplify-order-list": true,
+      className: cn("bg-card border border-border rounded-[16px] overflow-hidden", className),
+      children: orders.map((order) => /* @__PURE__ */ jsx(OrderRow, { order, onSelect }, order.id))
+    }
+  );
+}
+function OrderDetailHeader({ title, meta, className }) {
+  return /* @__PURE__ */ jsxs("header", { "data-cimplify-order-detail-header": true, className: cn("mb-9", className), children: [
+    /* @__PURE__ */ jsx("h1", { className: "font-serif font-semibold text-[clamp(26px,2.8vw,34px)] tracking-[-0.025em] leading-[1.1] text-foreground m-0 mb-2.5", children: title }),
+    meta && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-wrap text-[13px] text-foreground/55", children: meta })
+  ] });
+}
+function OrderDetailMetaPipe() {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-border", children: "\xB7" });
+}
+function OrderTimeline({ steps, className }) {
+  const doneCount = steps.filter((s) => s.state === "done").length;
+  const currentIdx = steps.findIndex((s) => s.state === "current");
+  const filledRatio = currentIdx >= 0 ? (doneCount + (currentIdx >= doneCount ? 0.5 : 0)) / (steps.length - 1) : doneCount / Math.max(1, steps.length - 1);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-order-timeline": true,
+      className: cn("bg-card border border-border rounded-[16px] px-7 py-8 mb-6 relative", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-[18px] h-0.5 bg-border z-[1]",
+            style: {
+              left: `calc(${100 / steps.length / 2}% + 18px)`,
+              right: `calc(${100 / steps.length / 2}% + 18px)`
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-primary",
+                style: { width: `${Math.min(100, filledRatio * 100)}%` }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid relative",
+            style: { gridTemplateColumns: `repeat(${steps.length}, 1fr)` },
+            children: steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "text-center px-1 relative", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "size-9 rounded-full border-2 grid place-items-center mx-auto mb-3 relative z-[2]",
+                    step.state === "current" && "bg-primary text-white border-primary shadow-[0_0_0_6px_color-mix(in_oklch,var(--color-primary)_18%,transparent)]",
+                    step.state === "done" && "bg-foreground text-white border-foreground",
+                    step.state === "pending" && "bg-muted/40 text-foreground/55 border-border"
+                  ),
+                  children: step.icon
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-[12.5px] font-semibold",
+                    step.state === "current" ? "text-foreground" : "text-foreground/70"
+                  ),
+                  children: step.label
+                }
+              ),
+              step.time && /* @__PURE__ */ jsx("div", { className: "text-[11.5px] text-foreground/55 mt-0.5", children: step.time })
+            ] }, i))
+          }
+        )
+      ]
+    }
+  );
+}
+function ItemsCard({ title, rightLabel, items, totals, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-items-card": true,
+      className: cn("bg-card border border-border rounded-[16px] overflow-hidden", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-[22px] py-4 border-b border-border/60", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-[13.5px] font-semibold text-foreground m-0", children: title }),
+          rightLabel && /* @__PURE__ */ jsx("span", { className: "text-[12.5px] text-foreground/55", children: rightLabel })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "list-none p-0 m-0", children: items.map((item, idx) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "grid grid-cols-[48px_1fr_auto_auto] gap-4 items-center px-[22px] py-3.5 border-b border-border/60 last:border-b-0",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "size-12 rounded",
+                  style: {
+                    background: item.thumbnail ? `url(${item.thumbnail}) center/cover` : deterministicGradient(item.id, idx)
+                  },
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "text-[14px] font-semibold text-foreground", children: item.name }),
+                item.meta && /* @__PURE__ */ jsx("div", { className: "text-[12px] text-foreground/55 mt-0.5", children: item.meta })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "text-[12.5px] text-foreground/55 tabular-nums", children: [
+                "\xD7 ",
+                item.qty
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "text-[14px] font-semibold text-foreground tabular-nums", children: item.price })
+            ]
+          },
+          item.id
+        )) }),
+        totals && /* @__PURE__ */ jsx(OrderTotals, { data: totals })
+      ]
+    }
+  );
+}
+function OrderTotals({ data, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-order-totals": true,
+      className: cn("px-[22px] py-4 bg-muted/30 border-t border-border/60", className),
+      children: [
+        data.rows.map((row) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between py-1 text-[13.5px]", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-foreground/70", children: row.label }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums text-foreground", children: row.value })
+        ] }, row.label)),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between pt-3 mt-2 border-t border-border font-bold text-[15px]", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-foreground", children: data.grandLabel }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums text-foreground", children: data.grandValue })
+        ] })
+      ]
+    }
+  );
+}
+function ContextCard({ rows, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-cimplify-context-card": true,
+      className: cn("bg-card border border-border rounded-[16px] overflow-hidden", className),
+      children: rows.map((row) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "grid grid-cols-[130px_1fr_auto] gap-5 px-[22px] py-4 border-b border-border/60 last:border-b-0 items-center",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[12.5px] text-foreground/55 font-medium", children: row.label }),
+            /* @__PURE__ */ jsx("div", { className: "text-[13.5px] text-foreground leading-[1.5]", children: row.value }),
+            row.manageHref && /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: row.manageHref,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "text-[12px] text-foreground/55 no-underline hover:text-primary inline-flex items-center gap-1 transition-colors",
+                children: [
+                  row.manageLabel ?? "Manage",
+                  " ",
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2197" })
+                ]
+              }
+            )
+          ]
+        },
+        row.label
+      ))
+    }
+  );
+}
+function SubscriptionRow({
+  subscription,
+  onSelect,
+  iconTile,
+  className
+}) {
+  const Element = subscription.href ? "a" : "button";
+  const muted = subscription.cancelled;
+  return /* @__PURE__ */ jsxs(
+    Element,
+    {
+      "data-cimplify-subscription-row": true,
+      href: subscription.href,
+      type: subscription.href ? void 0 : "button",
+      onClick: () => onSelect?.(subscription.id),
+      className: cn(
+        "grid grid-cols-[56px_1fr_auto_auto] gap-5 items-center px-[22px] py-5",
+        "border-b border-border/60 last:border-b-0",
+        "text-left no-underline w-full bg-transparent",
+        "transition-colors hover:bg-muted/40 cursor-pointer",
+        muted && "opacity-60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "size-14 rounded-[12px] grid place-items-center",
+              subscription.paused || muted ? "bg-muted/40 text-foreground/55" : "text-amber-700 bg-[linear-gradient(135deg,oklch(0.92_0.05_80),oklch(0.84_0.10_60))]"
+            ),
+            children: iconTile ?? /* @__PURE__ */ jsxs("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+              /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[14.5px] font-semibold text-foreground", children: subscription.title }),
+          /* @__PURE__ */ jsx("div", { className: "text-[12.5px] text-foreground/55 mt-0.5", children: subscription.meta })
+        ] }),
+        /* @__PURE__ */ jsx(Status, { status: subscription.status }),
+        /* @__PURE__ */ jsxs("div", { className: "text-right tabular-nums", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-[14.5px] font-semibold",
+                muted ? "text-foreground/55" : "text-foreground"
+              ),
+              children: subscription.price
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "block text-[11px] text-foreground/55 mt-0.5", children: subscription.unit })
+        ] })
+      ]
+    }
+  );
+}
+function SubscriptionList({
+  subscriptions,
+  onSelect,
+  renderIcon,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-cimplify-subscription-list": true,
+      className: cn("bg-card border border-border rounded-[16px] overflow-hidden", className),
+      children: subscriptions.map((s) => /* @__PURE__ */ jsx(
+        SubscriptionRow,
+        {
+          subscription: s,
+          onSelect,
+          iconTile: renderIcon?.(s)
+        },
+        s.id
+      ))
+    }
+  );
+}
+function NextDeliveryCard({
+  label,
+  date,
+  meta,
+  actions,
+  footnote,
+  rightFootnote,
+  paused,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-next-delivery": true,
+      "data-paused": paused || void 0,
+      className: cn(
+        "bg-card border border-border rounded-[16px] mb-6 overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "px-8 py-7 grid grid-cols-1 md:grid-cols-[1fr_auto] gap-6 items-center",
+              paused && "opacity-85"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex items-center gap-2 text-[11.5px] font-semibold tracking-[0.08em] uppercase",
+                      paused ? "text-foreground/55" : "text-emerald-600"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current", "aria-hidden": true }),
+                      label
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "font-serif font-semibold text-[30px] tracking-[-0.025em] leading-[1.05]",
+                      paused ? "text-foreground/55" : "text-foreground"
+                    ),
+                    children: date
+                  }
+                ),
+                meta && /* @__PURE__ */ jsx("div", { className: "text-[14px] text-foreground/70 mt-0.5", children: meta })
+              ] }),
+              actions && /* @__PURE__ */ jsx("div", { className: "flex gap-2.5", children: actions })
+            ]
+          }
+        ),
+        (footnote || rightFootnote) && /* @__PURE__ */ jsxs("div", { className: "px-8 py-3.5 border-t border-dashed border-border bg-muted/30 flex justify-between items-center text-[12px] text-foreground/55", children: [
+          footnote && /* @__PURE__ */ jsx("span", { children: footnote }),
+          rightFootnote && /* @__PURE__ */ jsx("span", { children: rightFootnote })
+        ] })
+      ]
+    }
+  );
+}
 var BASE_CLASSES = "inline-flex items-center justify-center gap-2 font-medium text-sm rounded-md transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed";
 var VARIANT_CLASSES = {
   primary: "bg-emerald-600 text-white hover:bg-emerald-700 px-4 py-2.5 border border-transparent",
@@ -1801,6 +2739,586 @@ function CimplifySignInButton({
     }
   );
 }
+function AccountSignedOutPrompt({
+  eyebrow = "Sign in",
+  title = "Sign in to see your account",
+  description = "Your orders and subscriptions, all in one place.",
+  clientId,
+  redirectUri,
+  lastEmail,
+  onSuccess,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-cimplify-signed-out": true,
+      className: cn(
+        "min-h-[480px] px-6 pt-24 pb-32",
+        "bg-[radial-gradient(900px_480px_at_50%_0%,color-mix(in_oklch,var(--color-primary)_8%,transparent),transparent_70%),var(--color-background)]",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "max-w-[420px] mx-auto p-10 bg-card border border-border rounded-[16px] text-center shadow-[0_1px_0_rgba(0,0,0,0.04),0_16px_48px_rgba(0,0,0,0.08)]", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[11px] font-semibold tracking-[0.16em] uppercase text-primary mb-2.5", children: eyebrow }),
+        /* @__PURE__ */ jsx("h2", { className: "font-serif text-[28px] font-semibold tracking-[-0.025em] leading-[1.15] m-0 mb-3 text-foreground", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-foreground/70 text-sm leading-[1.55] m-0 mb-7", children: description }),
+        /* @__PURE__ */ jsx(
+          CimplifySignInButton,
+          {
+            clientId,
+            redirectUri,
+            fullWidth: true,
+            onSuccess
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1.5 mt-5 text-[11.5px] text-foreground/55", children: [
+          /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+            /* @__PURE__ */ jsx("rect", { x: "3", y: "7", width: "10", height: "7", rx: "1" }),
+            /* @__PURE__ */ jsx("path", { d: "M5.5 7V5a2.5 2.5 0 0 1 5 0v2" })
+          ] }),
+          "One identity for every Cimplify shop"
+        ] }),
+        lastEmail && /* @__PURE__ */ jsxs("div", { className: "text-[12.5px] text-foreground/55 mt-4 pt-4 border-t border-border/60", children: [
+          "Returning? Last signed in as ",
+          /* @__PURE__ */ jsx("strong", { className: "text-foreground font-semibold", children: lastEmail })
+        ] })
+      ] })
+    }
+  );
+}
+function MobileAccountShell({
+  storeName,
+  leading,
+  trailing,
+  tabBar,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-mobile-shell": true,
+      className: cn(
+        "md:hidden flex flex-col min-h-screen bg-background",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between px-[18px] py-3.5 border-b border-border/60 flex-shrink-0", children: [
+          leading ?? /* @__PURE__ */ jsx("div", { className: "w-9" }),
+          /* @__PURE__ */ jsx("div", { className: "font-serif font-semibold text-[17px] tracking-[-0.015em]", children: storeName }),
+          trailing ?? /* @__PURE__ */ jsx("div", { className: "w-9" })
+        ] }),
+        /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto px-[18px] py-6", children }),
+        tabBar
+      ]
+    }
+  );
+}
+function MobileTabBar({ items, activeHref, className }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-cimplify-mobile-tabbar": true,
+      "aria-label": "Account",
+      className: cn("grid grid-cols-3 border-t border-border bg-background flex-shrink-0", className),
+      children: items.map((item) => {
+        const active = item.href === activeHref;
+        return /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: item.href,
+            "aria-current": active ? "page" : void 0,
+            className: cn(
+              "flex flex-col items-center gap-1 py-3 pb-3.5 no-underline text-[10.5px] font-medium",
+              active ? "text-primary" : "text-foreground/55"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "size-5", children: item.icon }),
+              item.label
+            ]
+          },
+          item.href
+        );
+      })
+    }
+  );
+}
+function MobileBackButton({ href, label = "Back" }) {
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      className: "inline-flex items-center gap-1 text-foreground/70 text-[13.5px] font-medium no-underline",
+      children: [
+        /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: /* @__PURE__ */ jsx("path", { d: "M7.5 2L3.5 6l4 4" }) }),
+        label
+      ]
+    }
+  );
+}
+function MobileMoreButton({ onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": "Menu",
+      className: "size-9 rounded-[12px] bg-card border border-border grid place-items-center text-foreground/70",
+      children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "4", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "12", r: "1" })
+      ] })
+    }
+  );
+}
+var I = (props) => /* @__PURE__ */ jsx("svg", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 16 16", ...props });
+var I20 = (props) => /* @__PURE__ */ jsx("svg", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 20 20", ...props });
+var DashboardIcon = () => /* @__PURE__ */ jsxs(I, { children: [
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "5", height: "5", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "9", y: "2", width: "5", height: "5", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "9", width: "5", height: "5", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "5", height: "5", rx: "1" })
+] });
+var OrdersIcon = () => /* @__PURE__ */ jsxs(I, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 4l5-2 5 2v8l-5 2-5-2V4z" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 4l5 2 5-2M8 6v8" })
+] });
+var SubscriptionsIcon = () => /* @__PURE__ */ jsxs(I, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M13 6a5 5 0 1 0-1.5 3.5L13 11" }),
+  /* @__PURE__ */ jsx("path", { d: "M13 4v3h-3" })
+] });
+var IdentityIcon = () => /* @__PURE__ */ jsxs(I, { children: [
+  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "6", r: "2.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M3.5 13.5a4.5 4.5 0 0 1 9 0" })
+] });
+var SignOutIcon = () => /* @__PURE__ */ jsxs(I, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M6.5 3.5h-3v9h3" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 5l3 3-3 3" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 8H6" })
+] });
+var DashboardIcon20 = () => /* @__PURE__ */ jsxs(I20, { children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "6", height: "6", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "11", y: "3", width: "6", height: "6", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "6", height: "6", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "11", y: "11", width: "6", height: "6", rx: "1" })
+] });
+var OrdersIcon20 = () => /* @__PURE__ */ jsxs(I20, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 5l6-2 6 2v10l-6 2-6-2V5z" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 5l6 2 6-2M10 7v10" })
+] });
+var SubscriptionsIcon20 = () => /* @__PURE__ */ jsx(I20, { children: /* @__PURE__ */ jsx("path", { d: "M16 8a6 6 0 1 0-1.5 4M16 5v3h-3" }) });
+var CheckIcon = () => /* @__PURE__ */ jsx(I, { children: /* @__PURE__ */ jsx("path", { strokeWidth: "2", d: "M3 8l3.5 3.5L13 5" }) });
+var OvenIcon = () => /* @__PURE__ */ jsx(I, { children: /* @__PURE__ */ jsx("path", { strokeWidth: "2", d: "M3 11h10M3 8l1.5-4.5h7L13 8M5 11v2M11 11v2" }) });
+var DeliveryTruckIcon = () => /* @__PURE__ */ jsx(I, { children: /* @__PURE__ */ jsx("path", { strokeWidth: "2", d: "M2 6h9v6H2zM11 9h2l1 2v1h-3M5 14v-1M11 14v-1" }) });
+var PackageIcon = () => /* @__PURE__ */ jsxs(I, { children: [
+  /* @__PURE__ */ jsx("path", { strokeWidth: "2", d: "M3 6l5-3 5 3v6l-5 3-5-3V6z" }),
+  /* @__PURE__ */ jsx("path", { strokeWidth: "2", d: "M3 6l5 3 5-3M8 9v6" })
+] });
+var BoxIcon24 = () => /* @__PURE__ */ jsxs("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+  /* @__PURE__ */ jsx("path", { d: "M5 6l7-3 7 3v10l-7 3-7-3V6z" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 6l7 3 7-3M12 9v10" })
+] });
+function defaultNavItems(opts) {
+  const items = [
+    { label: "Dashboard", href: "/account", icon: /* @__PURE__ */ jsx(DashboardIcon, {}) },
+    { label: opts.ordersLabel ?? "Orders", href: "/account/orders", icon: /* @__PURE__ */ jsx(OrdersIcon, {}) }
+  ];
+  if (opts.showSubscriptions !== false) {
+    items.push({
+      label: opts.subscriptionsLabel ?? "Subscriptions",
+      href: "/account/subscriptions",
+      icon: /* @__PURE__ */ jsx(SubscriptionsIcon, {})
+    });
+  }
+  items.push({ label: "Cimplify identity", href: "https://link.cimplify.io", icon: /* @__PURE__ */ jsx(IdentityIcon, {}), external: true });
+  items.push({ label: "Sign out", href: "/auth/signout", icon: /* @__PURE__ */ jsx(SignOutIcon, {}) });
+  return items;
+}
+function timeOfDayGreeting(name) {
+  if (typeof window === "undefined") return `Hi, ${name}`;
+  const h = (/* @__PURE__ */ new Date()).getHours();
+  if (h < 5) return `Up late, ${name}`;
+  if (h < 12) return `Good morning, ${name}`;
+  if (h < 17) return `Good afternoon, ${name}`;
+  return `Good evening, ${name}`;
+}
+function AccountDashboardPage({
+  customerName,
+  customerEmail,
+  customerId,
+  merchantName,
+  nav,
+  activeHref = "/account",
+  scopeNote,
+  greeting,
+  activePane,
+  upcomingPane,
+  continuity,
+  recentOrders,
+  identitySummary,
+  welcomeCta
+}) {
+  const navItems = nav ?? defaultNavItems({});
+  const hasHero = !!activePane || !!upcomingPane;
+  const hasOrders = !!recentOrders && recentOrders.length > 0;
+  const isNewCustomer = !hasHero && !hasOrders;
+  return /* @__PURE__ */ jsx(
+    AccountShell,
+    {
+      sidebar: /* @__PURE__ */ jsxs(
+        AccountSidebar,
+        {
+          scopeNote: scopeNote ?? /* @__PURE__ */ jsxs("span", { children: [
+            "Your orders and subscriptions with ",
+            /* @__PURE__ */ jsx("strong", { className: "text-foreground font-semibold", children: merchantName }),
+            "."
+          ] }),
+          children: [
+            /* @__PURE__ */ jsx(AccountIdentityStrip, { name: customerName, email: customerEmail, customerId }),
+            /* @__PURE__ */ jsx(AccountNav, { items: navItems, activeHref })
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsxs(AccountContent, { children: [
+        /* @__PURE__ */ jsx(AccountHero, { title: greeting ?? timeOfDayGreeting(customerName.split(" ")[0] ?? customerName) }),
+        continuity && /* @__PURE__ */ jsx(
+          ContinuityCard,
+          {
+            glyph: continuity.glyph,
+            title: continuity.title,
+            description: continuity.description,
+            badge: continuity.badge
+          }
+        ),
+        isNewCustomer ? /* @__PURE__ */ jsx(
+          WelcomeCard,
+          {
+            title: `Welcome to ${merchantName}`,
+            description: "Your orders and subscriptions will appear here. Start with something fresh?",
+            action: welcomeCta ?? /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Browse" })
+          }
+        ) : hasHero && /* @__PURE__ */ jsx(
+          HappeningCard,
+          {
+            left: activePane ? { ...activePane, variant: "live" } : void 0,
+            right: upcomingPane ? { ...upcomingPane, variant: "next" } : void 0
+          }
+        ),
+        hasOrders && /* @__PURE__ */ jsx(
+          Section,
+          {
+            title: "Recent orders",
+            action: /* @__PURE__ */ jsx(SectionMore, { href: "/account/orders", children: "View all \u2192" }),
+            children: /* @__PURE__ */ jsx(OrderList, { orders: recentOrders })
+          }
+        ),
+        /* @__PURE__ */ jsx(Section, { title: "Identity", children: /* @__PURE__ */ jsx(IdentityOfframp, { summary: identitySummary }) })
+      ] })
+    }
+  );
+}
+function AccountOrdersPage({
+  customerName,
+  customerEmail,
+  customerId,
+  merchantName,
+  nav,
+  activeHref = "/account/orders",
+  scopeNote,
+  title = "Orders",
+  description,
+  orders,
+  filterTabs,
+  loadMore,
+  emptyAction,
+  emptyTitle = "No orders yet",
+  emptyDescription
+}) {
+  const navItems = nav ?? defaultNavItems({});
+  return /* @__PURE__ */ jsx(
+    AccountShell,
+    {
+      sidebar: /* @__PURE__ */ jsxs(
+        AccountSidebar,
+        {
+          scopeNote: scopeNote ?? /* @__PURE__ */ jsxs("span", { children: [
+            "Your activity with ",
+            /* @__PURE__ */ jsx("strong", { className: "text-foreground font-semibold", children: merchantName }),
+            "."
+          ] }),
+          children: [
+            /* @__PURE__ */ jsx(AccountIdentityStrip, { name: customerName, email: customerEmail, customerId }),
+            /* @__PURE__ */ jsx(AccountNav, { items: navItems, activeHref })
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsxs(AccountContent, { children: [
+        /* @__PURE__ */ jsx(
+          AccountHero,
+          {
+            title,
+            subtitle: description ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+              orders.length,
+              " orders with ",
+              /* @__PURE__ */ jsx("strong", { children: merchantName }),
+              "."
+            ] })
+          }
+        ),
+        orders.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          filterTabs,
+          /* @__PURE__ */ jsx(OrderList, { orders }),
+          loadMore && /* @__PURE__ */ jsx("div", { className: "text-center mt-8", children: loadMore })
+        ] }) : /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            glyph: /* @__PURE__ */ jsx(BoxIcon24, {}),
+            title: emptyTitle,
+            description: emptyDescription ?? `Your first order from ${merchantName} will show up here.`,
+            action: emptyAction
+          }
+        )
+      ] })
+    }
+  );
+}
+function AccountOrderDetailPage({
+  customerName,
+  customerEmail,
+  customerId,
+  merchantName,
+  nav,
+  activeHref = "/account/orders",
+  scopeNote,
+  title,
+  metaText,
+  orderId,
+  status,
+  timelineSteps,
+  itemsTitle = "Items",
+  itemsRightLabel,
+  items,
+  totals,
+  contextRows,
+  primaryAction,
+  secondaryAction,
+  continuity
+}) {
+  const navItems = nav ?? defaultNavItems({});
+  return /* @__PURE__ */ jsx(
+    AccountShell,
+    {
+      sidebar: /* @__PURE__ */ jsxs(
+        AccountSidebar,
+        {
+          scopeNote: scopeNote ?? /* @__PURE__ */ jsxs("span", { children: [
+            "Your activity with ",
+            /* @__PURE__ */ jsx("strong", { className: "text-foreground font-semibold", children: merchantName }),
+            "."
+          ] }),
+          children: [
+            /* @__PURE__ */ jsx(AccountIdentityStrip, { name: customerName, email: customerEmail, customerId }),
+            /* @__PURE__ */ jsx(AccountNav, { items: navItems, activeHref })
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsxs(AccountContent, { children: [
+        /* @__PURE__ */ jsx("a", { href: "/account/orders", className: "text-foreground/55 text-[13px] no-underline hover:text-primary inline-block mb-7", children: "\u2190 All orders" }),
+        /* @__PURE__ */ jsx(
+          OrderDetailHeader,
+          {
+            title,
+            meta: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { children: metaText }),
+              /* @__PURE__ */ jsx(OrderDetailMetaPipe, {}),
+              /* @__PURE__ */ jsxs("span", { className: "font-mono text-[11.5px]", children: [
+                "#",
+                orderId
+              ] }),
+              /* @__PURE__ */ jsx(OrderDetailMetaPipe, {}),
+              /* @__PURE__ */ jsx(Status, { status })
+            ] })
+          }
+        ),
+        continuity && /* @__PURE__ */ jsx(
+          ContinuityCard,
+          {
+            glyph: continuity.glyph,
+            title: continuity.title,
+            description: continuity.description,
+            className: "mt-0 mb-6"
+          }
+        ),
+        /* @__PURE__ */ jsx(OrderTimeline, { steps: timelineSteps }),
+        /* @__PURE__ */ jsx(ItemsCard, { title: itemsTitle, rightLabel: itemsRightLabel, items, totals, className: "mb-4" }),
+        contextRows && contextRows.length > 0 && /* @__PURE__ */ jsx(
+          ContextCard,
+          {
+            rows: contextRows.map((r) => ({
+              label: r.label,
+              value: r.value,
+              manageHref: r.manageHref,
+              manageLabel: "Manage"
+            }))
+          }
+        ),
+        (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mt-8", children: [
+          primaryAction,
+          secondaryAction
+        ] })
+      ] })
+    }
+  );
+}
+function AccountSubscriptionsPage({
+  customerName,
+  customerEmail,
+  customerId,
+  merchantName,
+  nav,
+  activeHref = "/account/subscriptions",
+  scopeNote,
+  active,
+  paused,
+  past,
+  emptyAction,
+  emptyTitle = "No subscriptions yet",
+  emptyDescription
+}) {
+  const navItems = nav ?? defaultNavItems({});
+  const isEmpty = (!active || active.length === 0) && (!paused || paused.length === 0) && (!past || past.length === 0);
+  return /* @__PURE__ */ jsx(
+    AccountShell,
+    {
+      sidebar: /* @__PURE__ */ jsxs(
+        AccountSidebar,
+        {
+          scopeNote: scopeNote ?? /* @__PURE__ */ jsxs("span", { children: [
+            "Your activity with ",
+            /* @__PURE__ */ jsx("strong", { className: "text-foreground font-semibold", children: merchantName }),
+            "."
+          ] }),
+          children: [
+            /* @__PURE__ */ jsx(AccountIdentityStrip, { name: customerName, email: customerEmail, customerId }),
+            /* @__PURE__ */ jsx(AccountNav, { items: navItems, activeHref })
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsxs(AccountContent, { children: [
+        /* @__PURE__ */ jsx(
+          AccountHero,
+          {
+            title: "Subscriptions",
+            subtitle: /* @__PURE__ */ jsxs(Fragment, { children: [
+              "Recurring orders from ",
+              /* @__PURE__ */ jsx("strong", { children: merchantName }),
+              "."
+            ] })
+          }
+        ),
+        isEmpty ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            title: emptyTitle,
+            description: emptyDescription ?? `Set up a recurring delivery from ${merchantName} and it'll show up here.`,
+            action: emptyAction
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          active && active.length > 0 && /* @__PURE__ */ jsx(Section, { title: "Active", meta: `${active.length}`, children: /* @__PURE__ */ jsx(SubscriptionList, { subscriptions: active }) }),
+          paused && paused.length > 0 && /* @__PURE__ */ jsx(Section, { title: "Paused", meta: `${paused.length}`, children: /* @__PURE__ */ jsx(SubscriptionList, { subscriptions: paused }) }),
+          past && past.length > 0 && /* @__PURE__ */ jsx(Section, { title: "Past", meta: `${past.length}`, children: /* @__PURE__ */ jsx(SubscriptionList, { subscriptions: past }) })
+        ] })
+      ] })
+    }
+  );
+}
+function AccountSubscriptionDetailPage({
+  customerName,
+  customerEmail,
+  customerId,
+  merchantName,
+  nav,
+  activeHref = "/account/subscriptions",
+  scopeNote,
+  title,
+  metaText,
+  status,
+  paused,
+  nextDeliveryLabel,
+  nextDeliveryDate,
+  nextDeliveryMeta,
+  nextDeliveryActions,
+  nextDeliveryFootnote,
+  nextDeliveryRightFootnote,
+  itemsTitle = "What's in each delivery",
+  items,
+  totals,
+  contextRows,
+  toast,
+  cancelAction
+}) {
+  const navItems = nav ?? defaultNavItems({});
+  return /* @__PURE__ */ jsx(
+    AccountShell,
+    {
+      sidebar: /* @__PURE__ */ jsxs(
+        AccountSidebar,
+        {
+          scopeNote: scopeNote ?? /* @__PURE__ */ jsxs("span", { children: [
+            "Your activity with ",
+            /* @__PURE__ */ jsx("strong", { className: "text-foreground font-semibold", children: merchantName }),
+            "."
+          ] }),
+          children: [
+            /* @__PURE__ */ jsx(AccountIdentityStrip, { name: customerName, email: customerEmail, customerId }),
+            /* @__PURE__ */ jsx(AccountNav, { items: navItems, activeHref })
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsxs(AccountContent, { children: [
+        /* @__PURE__ */ jsx("a", { href: "/account/subscriptions", className: "text-foreground/55 text-[13px] no-underline hover:text-primary inline-block mb-7", children: "\u2190 All subscriptions" }),
+        /* @__PURE__ */ jsx(
+          OrderDetailHeader,
+          {
+            title,
+            meta: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { children: metaText }),
+              /* @__PURE__ */ jsx(OrderDetailMetaPipe, {}),
+              /* @__PURE__ */ jsx(Status, { status })
+            ] })
+          }
+        ),
+        toast,
+        /* @__PURE__ */ jsx(
+          NextDeliveryCard,
+          {
+            label: nextDeliveryLabel,
+            date: nextDeliveryDate,
+            meta: nextDeliveryMeta,
+            actions: nextDeliveryActions,
+            footnote: nextDeliveryFootnote,
+            rightFootnote: nextDeliveryRightFootnote,
+            paused
+          }
+        ),
+        /* @__PURE__ */ jsx(ItemsCard, { title: itemsTitle, items, totals, className: "mb-4" }),
+        contextRows && contextRows.length > 0 && /* @__PURE__ */ jsx(
+          ContextCard,
+          {
+            rows: contextRows.map((r) => ({
+              label: r.label,
+              value: r.value,
+              manageHref: r.manageHref,
+              manageLabel: "Manage"
+            }))
+          }
+        ),
+        cancelAction && /* @__PURE__ */ jsx("div", { className: "mt-9 pt-7 border-t border-border", children: cancelAction })
+      ] })
+    }
+  );
+}
 function useCimplifySession(options) {
   const sessionUri = options?.sessionUri ?? "/auth/session";
   const [session, setSession] = useState(null);
@@ -5684,7 +7202,7 @@ function FileUploadInput({
   onFileUpload,
   classNames
 }) {
-  const [isUploading, setIsUploading] = React11.useState(false);
+  const [isUploading, setIsUploading] = React12.useState(false);
   const fileUrl = typeof value === "string" ? value : void 0;
   const acceptedFormats = field.validation?.accepted_formats;
   const accept = acceptedFormats ? acceptedFormats.map((f) => `.${f}`).join(",") : field.field_type === INPUT_FIELD_TYPE.Image ? "image/*" : void 0;
@@ -5834,22 +7352,22 @@ function AddressInput({
 }) {
   const clientContext = useOptionalCimplifyClient();
   const addr = value && typeof value === "object" ? value : null;
-  const [inputText, setInputText] = React11.useState(addr?.formatted_address ?? "");
-  const [suggestions, setSuggestions] = React11.useState([]);
-  const [isOpen, setIsOpen] = React11.useState(false);
-  const [highlightedIndex, setHighlightedIndex] = React11.useState(-1);
-  const debounceRef = React11.useRef(null);
-  const seqRef = React11.useRef(0);
-  const sessionTokenRef = React11.useRef(createSessionToken());
-  const blurTimeoutRef = React11.useRef(null);
-  React11.useEffect(() => {
+  const [inputText, setInputText] = React12.useState(addr?.formatted_address ?? "");
+  const [suggestions, setSuggestions] = React12.useState([]);
+  const [isOpen, setIsOpen] = React12.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React12.useState(-1);
+  const debounceRef = React12.useRef(null);
+  const seqRef = React12.useRef(0);
+  const sessionTokenRef = React12.useRef(createSessionToken());
+  const blurTimeoutRef = React12.useRef(null);
+  React12.useEffect(() => {
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
       if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
       seqRef.current += 1;
     };
   }, []);
-  const fetchSuggestions = React11.useCallback(async (query) => {
+  const fetchSuggestions = React12.useCallback(async (query) => {
     const client = clientContext?.client;
     if (!client || query.length < 3) {
       setSuggestions([]);
@@ -5873,7 +7391,7 @@ function AddressInput({
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);
   };
-  const selectSuggestion = React11.useCallback(async (suggestion) => {
+  const selectSuggestion = React12.useCallback(async (suggestion) => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
     const fallback = suggestion.description.split(",")[0]?.trim() || suggestion.description;
@@ -5976,22 +7494,22 @@ function LocationInput({
 }) {
   const clientContext = useOptionalCimplifyClient();
   const loc = value && typeof value === "object" ? value : null;
-  const [inputText, setInputText] = React11.useState(loc?.label ?? "");
-  const [suggestions, setSuggestions] = React11.useState([]);
-  const [isOpen, setIsOpen] = React11.useState(false);
-  const [highlightedIndex, setHighlightedIndex] = React11.useState(-1);
-  const debounceRef = React11.useRef(null);
-  const seqRef = React11.useRef(0);
-  const sessionTokenRef = React11.useRef(createSessionToken());
-  const blurTimeoutRef = React11.useRef(null);
-  React11.useEffect(() => {
+  const [inputText, setInputText] = React12.useState(loc?.label ?? "");
+  const [suggestions, setSuggestions] = React12.useState([]);
+  const [isOpen, setIsOpen] = React12.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React12.useState(-1);
+  const debounceRef = React12.useRef(null);
+  const seqRef = React12.useRef(0);
+  const sessionTokenRef = React12.useRef(createSessionToken());
+  const blurTimeoutRef = React12.useRef(null);
+  React12.useEffect(() => {
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
       if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
       seqRef.current += 1;
     };
   }, []);
-  const fetchSuggestions = React11.useCallback(async (query) => {
+  const fetchSuggestions = React12.useCallback(async (query) => {
     const client = clientContext?.client;
     if (!client || query.length < 3) {
       setSuggestions([]);
@@ -6015,7 +7533,7 @@ function LocationInput({
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);
   };
-  const selectSuggestion = React11.useCallback(async (suggestion) => {
+  const selectSuggestion = React12.useCallback(async (suggestion) => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
     const label = suggestion.description.split(",")[0]?.trim() || suggestion.description;
@@ -6104,8 +7622,8 @@ function PhoneInput({
   inputClass
 }) {
   const phone = value && typeof value === "object" ? value : null;
-  const [code, setCode] = React11.useState(phone?.country_code ?? "+1");
-  const [number, setNumber] = React11.useState(phone?.number ?? "");
+  const [code, setCode] = React12.useState(phone?.country_code ?? "+1");
+  const [number, setNumber] = React12.useState(phone?.number ?? "");
   const update = (nextCode, nextNumber) => {
     setCode(nextCode);
     setNumber(nextNumber);
@@ -6150,8 +7668,8 @@ function SignatureInput({
   classNames
 }) {
   const sig = value && typeof value === "object" ? value : null;
-  const canvasRef = React11.useRef(null);
-  const isDrawing = React11.useRef(false);
+  const canvasRef = React12.useRef(null);
+  const isDrawing = React12.useRef(false);
   const getCtx = () => canvasRef.current?.getContext("2d") ?? null;
   const startDraw = (e) => {
     const ctx = getCtx();
@@ -6948,7 +8466,7 @@ function ProductCustomizer({
               " ea."
             ] }),
             /* @__PURE__ */ jsx(
-              Button,
+              Button$1,
               {
                 onClick: handleAddToCart,
                 disabled: isAdded || isSubmitting || !quoteEnabled,
@@ -7183,7 +8701,7 @@ function ProductModel3D({
       "data-cimplify-product-model-3d": true,
       className,
       style: { position: "relative", overflow: "hidden", ...ASPECT_STYLES3[aspectRatio] },
-      children: ready ? React11.createElement("model-viewer", {
+      children: ready ? React12.createElement("model-viewer", {
         src,
         "ios-src": iosSrc,
         alt,
@@ -7194,12 +8712,12 @@ function ProductModel3D({
         "auto-rotate": autoRotate || void 0,
         "shadow-intensity": "1",
         style: { width: "100%", height: "100%", backgroundColor: "transparent" }
-      }) : poster ? React11.createElement("img", {
+      }) : poster ? React12.createElement("img", {
         src: poster,
         alt: alt ?? "",
         "data-cimplify-product-model-3d-loading": true,
         style: { width: "100%", height: "100%", objectFit: "cover" }
-      }) : React11.createElement("div", {
+      }) : React12.createElement("div", {
         "data-cimplify-product-model-3d-loading": true,
         style: { width: "100%", height: "100%", backgroundColor: "var(--muted, #f3f4f6)" }
       })
@@ -8960,13 +10478,13 @@ function ProductGrid({
   className,
   classNames
 }) {
-  const rawId = React11.useId();
+  const rawId = React12.useId();
   const gridId = `cimplify-grid-${rawId.replace(/:/g, "")}`;
   const sm = columns?.sm ?? 1;
   const md = columns?.md ?? 2;
   const lg = columns?.lg ?? 3;
   const xl = columns?.xl ?? 4;
-  const css = React11.useMemo(
+  const css = React12.useMemo(
     () => [
       `#${gridId}{display:grid;grid-template-columns:repeat(${sm},1fr);gap:1rem}`,
       `@media(min-width:768px){#${gridId}{grid-template-columns:repeat(${md},1fr)}}`,
@@ -9327,7 +10845,7 @@ function CategoryGrid({
     enabled: categoriesProp === void 0
   });
   const categories = categoriesProp ?? fetched;
-  const rawId = React11.useId();
+  const rawId = React12.useId();
   const gridId = `cimplify-cat-grid-${rawId.replace(/:/g, "")}`;
   const sm = columns?.sm ?? 2;
   const md = columns?.md ?? 3;
@@ -9553,7 +11071,7 @@ function OrderSummary({
       /* @__PURE__ */ jsx("p", { children: order.delivery_address })
     ] }),
     /* @__PURE__ */ jsx("div", { "data-cimplify-order-items": true, className: classNames?.items, children: order.items.map(
-      (item) => renderLineItem ? /* @__PURE__ */ jsx(React11.Fragment, { children: renderLineItem(item) }, item.id) : /* @__PURE__ */ jsxs("div", { "data-cimplify-order-line-item": true, className: classNames?.lineItem, children: [
+      (item) => renderLineItem ? /* @__PURE__ */ jsx(React12.Fragment, { children: renderLineItem(item) }, item.id) : /* @__PURE__ */ jsxs("div", { "data-cimplify-order-line-item": true, className: classNames?.lineItem, children: [
         /* @__PURE__ */ jsxs("div", { "data-cimplify-order-line-info": true, children: [
           /* @__PURE__ */ jsxs("span", { "data-cimplify-order-line-qty": true, children: [
             item.quantity,
@@ -10713,7 +12231,7 @@ function DefaultCatalogueLayout({
           /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: "No products found" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try adjusting your filters" })
         ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: products.map(
-          (product) => renderCard ? /* @__PURE__ */ jsx(React11.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+          (product) => renderCard ? /* @__PURE__ */ jsx(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
             ProductCard,
             {
               product,
@@ -10820,7 +12338,7 @@ function CompactCatalogueLayout({
       /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: "No items found" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try a different category or search" })
     ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-5", children: products.map(
-      (product) => renderCard ? /* @__PURE__ */ jsx(React11.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+      (product) => renderCard ? /* @__PURE__ */ jsx(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
         ProductCard,
         {
           product,
@@ -10843,8 +12361,8 @@ var BUILT_IN_LAYOUTS = {
   ["compact" /* Compact */]: CompactCatalogueLayout
 };
 function useDebounce(value, delay) {
-  const [debounced, setDebounced] = React11.useState(value);
-  React11.useEffect(() => {
+  const [debounced, setDebounced] = React12.useState(value);
+  React12.useEffect(() => {
     const timer = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(timer);
   }, [value, delay]);
@@ -11100,7 +12618,8 @@ function DefaultProductLayout({
   showRelated = true,
   className
 }) {
-  const images = product.images || (product.image_url ? [product.image_url] : []);
+  const [selectedVariantId, setSelectedVariantId] = React12.useState();
+  const images = resolveGallery(product, selectedVariantId);
   const hasRange = product.quantity_pricing && product.quantity_pricing.length > 1 || product.variants && product.variants.length > 1;
   const onSale = isOnSale(product);
   const hasPhysicalDetails = product.sku || product.vendor || product.material;
@@ -11165,7 +12684,8 @@ function DefaultProductLayout({
             ProductCustomizer,
             {
               product,
-              onAddToCart
+              onAddToCart,
+              onVariantChange: (variantId) => setSelectedVariantId(variantId)
             }
           )
         ] })
@@ -12171,7 +13691,7 @@ function CartDrawer({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6", children: cart.isEmpty ? /* @__PURE__ */ jsx(EmptyState, { onShop: handleShop }) : /* @__PURE__ */ jsx(CartSummary, { showTotals: false, showCheckoutButton: false }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6", children: cart.isEmpty ? /* @__PURE__ */ jsx(EmptyState2, { onShop: handleShop }) : /* @__PURE__ */ jsx(CartSummary, { showTotals: false, showCheckoutButton: false }) }),
               !cart.isEmpty && /* @__PURE__ */ jsxs("footer", { className: "border-t border-border px-6 py-5 shrink-0 space-y-3 bg-background", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
                   /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Subtotal" }),
@@ -12211,7 +13731,7 @@ function CartDrawer({
     }
   );
 }
-function EmptyState({ onShop }) {
+function EmptyState2({ onShop }) {
   return /* @__PURE__ */ jsx("div", { "data-cimplify-cart-empty": true, className: "h-full grid place-items-center text-center py-16", children: /* @__PURE__ */ jsxs("div", { className: "space-y-5 max-w-[260px]", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative w-20 h-20 mx-auto", children: [
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-muted" }),
@@ -12364,7 +13884,7 @@ function DefaultCollectionLayout({
       ] })
     ] }),
     filtered.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: filtered.map(
-      (product) => renderCard ? /* @__PURE__ */ jsx(React11.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+      (product) => renderCard ? /* @__PURE__ */ jsx(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
         ProductCard,
         {
           product,
@@ -12417,7 +13937,7 @@ function FeaturedCollectionLayout({
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: products.map(
-      (product) => renderCard ? /* @__PURE__ */ jsx(React11.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+      (product) => renderCard ? /* @__PURE__ */ jsx(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
         ProductCard,
         {
           product,
@@ -12541,7 +14061,7 @@ function CatalogueCollectionLayout({
       ] })
     ] }),
     filtered.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: filtered.map(
-      (product) => renderCard ? /* @__PURE__ */ jsx(React11.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+      (product) => renderCard ? /* @__PURE__ */ jsx(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
         ProductCard,
         {
           product,
@@ -12921,7 +14441,7 @@ function DefaultSearchLayout({
         /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try a different search term" }),
         /* @__PURE__ */ jsx("button", { onClick: clear, className: "text-sm font-medium text-primary mt-4 hover:underline", children: "Clear search" })
       ] }) : results.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: results.map(
-        (product) => renderCard ? /* @__PURE__ */ jsx(React11.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+        (product) => renderCard ? /* @__PURE__ */ jsx(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
           ProductCard,
           {
             product,
@@ -13023,7 +14543,7 @@ function CompactSearchLayout({
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try a different search term" }),
       /* @__PURE__ */ jsx("button", { onClick: clear, className: "text-sm font-medium text-primary mt-4 hover:underline", children: "Clear search" })
     ] }) : results.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-5", children: results.map(
-      (product) => renderCard ? /* @__PURE__ */ jsx(React11.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+      (product) => renderCard ? /* @__PURE__ */ jsx(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
         ProductCard,
         {
           product,
@@ -13977,4 +15497,4 @@ function SparkleIcon({ className }) {
   );
 }
 
-export { AccommodationCard, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BundleProductCard, BundleProductLayout, BundleSelector, CardImage, CardShell, CardVariant, CartDrawer, CartDrawerProvider, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, ChatWidget, CheckoutPage, CimplifyAccount, CimplifyCheckout, CimplifyProvider, CimplifySignInButton, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, CurrencySelector, CustomAttributesTable, CustomerInputFields, DatePicker, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, FeaturedCollectionLayout, FoodProductCard, FoodProductLayout, InventoryBadge, LeaseServiceCard, LocationPicker, MediaGallery, MetadataStringList, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderSummary, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductModel3D, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, ServiceProductLayout, SessionMessageBanner, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, StoreNav, StoreVideo, SubscriptionCard, TagPills, TimePicker, TwoColumnGrid, VariantSelector, VolumePricing, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, AccountContent, AccountDashboardPage, AccountHero, AccountIdentityStrip, AccountNav, AccountOrderDetailPage, AccountOrdersPage, AccountShell, AccountSidebar, AccountSignedOutPrompt, AccountSubscriptionDetailPage, AccountSubscriptionsPage, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BackLink, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, Button, CardImage, CardShell, CardVariant, CartDrawer, CartDrawerProvider, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, ChatWidget, CheckIcon, CheckoutPage, CimplifyAccount, CimplifyCheckout, CimplifyProvider, CimplifySignInButton, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, ContextCard, ContinuityCard, CurrencySelector, CustomAttributesTable, CustomerInputFields, DashboardIcon, DashboardIcon20, DatePicker, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, EmptyState, ErrorState, FeaturedCollectionLayout, FilterTabs, FoodProductCard, FoodProductLayout, HappeningCard, IdentityIcon, IdentityOfframp, InventoryBadge, ItemsCard, LeaseServiceCard, LocationPicker, MediaGallery, MetadataStringList, MobileAccountShell, MobileBackButton, MobileMoreButton, MobileTabBar, NextDeliveryCard, OrderDetailHeader, OrderDetailMetaPipe, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderList, OrderRow, OrderSummary, OrderTimeline, OrderTotals, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductModel3D, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, Section, SectionMore, ServiceProductLayout, SessionMessageBanner, SignOutIcon, Skeleton, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, Status, StoreNav, StoreVideo, SubscriptionCard, SubscriptionList, SubscriptionRow, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, Toast, TwoColumnGrid, VariantSelector, VolumePricing, WelcomeCard, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };