@cimplify/sdk 0.68.0 → 0.69.0

package/dist/react.mjs

@@ -6,7 +6,7 @@ import { ELEMENT_TYPES, EVENT_TYPES, startSignIn } from './chunk-SOV4H6PQ.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 React12, { createContext, useRef, useState, useCallback, useEffect, useContext, useMemo, useId, useSyncExternalStore } from 'react';
+import React14, { 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';
@@ -1427,14 +1427,14 @@ function CimplifyCheckout({
   const resolvedCartRef = useRef(resolvedCart);
   resolvedCartRef.current = resolvedCart;
   const isDark = appearance?.theme === "dark";
-  const emitStatus = React12.useEffectEvent(
+  const emitStatus = React14.useEffectEvent(
     (nextStatus, context = {}) => {
       setStatus(nextStatus);
       setStatusText(context.display_text || "");
       onStatusChange?.(nextStatus, context);
     }
   );
-  const fireError = React12.useEffectEvent(
+  const fireError = React14.useEffectEvent(
     (error) => {
       onError?.(error);
     }
@@ -1530,7 +1530,7 @@ function CimplifyCheckout({
       activeCheckoutRef.current = null;
     };
   }, []);
-  const handleSubmit = React12.useEffectEvent(async () => {
+  const handleSubmit = React14.useEffectEvent(async () => {
     if (isSubmitting || isInitializing || !resolvedCartId) {
       if (!resolvedCartId && !isInitializing) {
         const message = "Your cart is empty. Add items before checkout.";
@@ -1668,7 +1668,7 @@ 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) {
+var Button = React14.forwardRef(function Button2({ variant = "primary", size = "md", className, children, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -2449,6 +2449,560 @@ function ContextCard({ rows, className }) {
     }
   );
 }
+function RiderAvatar({ rider, size }) {
+  if (rider.photoUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: rider.photoUrl,
+        alt: "",
+        className: "rounded-full object-cover",
+        style: { width: size, height: size }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "grid place-items-center rounded-full font-serif font-semibold text-white",
+      style: { width: size, height: size, fontSize: size * 0.38, background: avatarGradient(rider.name) },
+      children: initials(rider.name)
+    }
+  );
+}
+function RiderMeta({ rider }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: rider.name }),
+      rider.rating !== void 0 && /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs font-semibold text-amber-500", children: [
+        "\u2605 ",
+        rider.rating.toFixed(1)
+      ] })
+    ] }),
+    rider.vehicle && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-foreground/55", children: rider.vehicle })
+  ] });
+}
+function DotStep({ steps }) {
+  const current = steps.find((s) => s.state === "current") ?? [...steps].reverse().find((s) => s.state === "done");
+  return /* @__PURE__ */ jsxs("div", { className: "mt-3.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: steps.map((step, i) => /* @__PURE__ */ jsxs(React14.Fragment, { children: [
+      i > 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "h-0.5 flex-1 rounded-full",
+            steps[i - 1].state === "done" ? "bg-primary" : "bg-border"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "block size-[7px] shrink-0 rounded-full",
+            step.state === "done" && "bg-primary",
+            step.state === "current" && "bg-primary ring-4 ring-primary/15",
+            step.state === "pending" && "bg-border"
+          )
+        }
+      )
+    ] }, step.label)) }),
+    current && /* @__PURE__ */ jsx("div", { className: "mt-2 truncate text-center text-[11.5px] font-semibold text-primary", children: current.label })
+  ] });
+}
+function DeliveryTracker({
+  steps,
+  statusLabel,
+  etaLabel,
+  rider,
+  live,
+  onTrackLive,
+  onContactRider,
+  variant = "card",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-cimplify-delivery-tracker": true,
+      "data-mode": live ? "live" : "steps",
+      className: cn(
+        "overflow-hidden",
+        variant === "card" && "rounded-[var(--radius,12px)] border border-border/60 bg-card",
+        className
+      ),
+      children: live ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative h-[216px] w-full overflow-hidden bg-muted", children: [
+          live.map,
+          /* @__PURE__ */ jsxs("div", { className: "absolute left-3 top-3 inline-flex items-center gap-1.5 rounded-full border border-border/40 bg-background/90 px-2.5 py-1 text-xs font-semibold shadow-sm backdrop-blur", children: [
+            /* @__PURE__ */ jsx("span", { className: "relative size-[7px] rounded-full bg-emerald-500", children: /* @__PURE__ */ jsx("span", { className: "absolute inset-0 animate-ping rounded-full bg-emerald-500" }) }),
+            "Live"
+          ] }),
+          (live.etaLabel ?? etaLabel) && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-3 rounded-full bg-foreground px-3 py-1.5 text-xs font-semibold text-background shadow-lg", children: live.etaLabel ?? etaLabel })
+        ] }),
+        rider && /* @__PURE__ */ jsxs("div", { className: "relative z-[2] -mt-6 mx-3.5 mb-3.5 rounded-2xl border border-border/60 bg-card p-3.5 shadow-[0_10px_30px_-16px_rgba(16,24,40,0.32)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ jsx(RiderAvatar, { rider, size: 46 }),
+              /* @__PURE__ */ jsx("span", { className: "absolute -bottom-px -right-px size-3 rounded-full border-[2.5px] border-card bg-emerald-500" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(RiderMeta, { rider }) }),
+            (rider.etaLabel || rider.distanceLabel) && /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+              rider.etaLabel && /* @__PURE__ */ jsx("div", { className: "text-[15px] font-semibold tabular-nums text-foreground", children: rider.etaLabel }),
+              rider.distanceLabel && /* @__PURE__ */ jsx("div", { className: "text-[11.5px] text-foreground/55", children: rider.distanceLabel })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onTrackLive,
+                className: "h-10 flex-1 rounded-xl bg-primary text-sm font-semibold text-[var(--color-primary-foreground,#fff)] hover:brightness-105",
+                children: "Track live"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onContactRider,
+                "aria-label": `Contact ${rider.name}`,
+                className: "grid size-10 place-items-center rounded-xl border border-border bg-card text-foreground hover:bg-muted/50",
+                children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: /* @__PURE__ */ jsx("path", { d: "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(DotStep, { steps })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: variant === "card" ? "p-4 sm:p-5" : "", children: [
+        (statusLabel || etaLabel) && /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+          statusLabel && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-amber-500/10 px-2.5 py-1 text-xs font-semibold text-amber-600", children: [
+            /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current" }),
+            statusLabel
+          ] }),
+          etaLabel && /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold tabular-nums text-foreground", children: etaLabel })
+        ] }),
+        /* @__PURE__ */ jsx("ol", { className: "relative ml-[9px] border-l-2 border-border", children: steps.map((step) => /* @__PURE__ */ jsxs("li", { className: "relative pb-4 pl-6 last:pb-0", children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "absolute -left-[9px] top-px grid size-[18px] place-items-center rounded-full border-2 bg-card",
+                step.state === "done" && "border-primary bg-primary",
+                step.state === "current" && "border-primary ring-4 ring-primary/15",
+                step.state === "pending" && "border-border"
+              ),
+              children: [
+                step.state === "done" && /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "3.5", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }),
+                step.state === "current" && /* @__PURE__ */ jsx("span", { className: "size-[7px] rounded-full bg-primary" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "text-[13px] font-semibold",
+                step.state === "pending" ? "text-foreground/45" : "text-foreground"
+              ),
+              children: step.label
+            }
+          ),
+          step.time && /* @__PURE__ */ jsx("div", { className: "text-xs text-foreground/55", children: step.time })
+        ] }, step.label)) }),
+        rider && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-3 border-t border-border/60 pt-4", children: [
+          /* @__PURE__ */ jsx(RiderAvatar, { rider, size: 42 }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(RiderMeta, { rider }) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onContactRider,
+              className: "h-9 rounded-[10px] border border-border bg-card px-4 text-[13px] font-semibold text-foreground hover:bg-muted/50",
+              children: "Contact"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+var STATE_TONE = {
+  preparing: "text-amber-600",
+  ready: "text-emerald-600",
+  delivered: "text-emerald-600",
+  booked: "text-primary",
+  cancelled: "text-destructive",
+  default: "text-foreground/55"
+};
+function StateDot({ label, tone = "default" }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-1.5 text-xs font-medium", STATE_TONE[tone]), children: [
+    /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current" }),
+    label
+  ] });
+}
+var TYPE_GLYPH = {
+  product: null,
+  bundle: null,
+  composite: null,
+  service: /* @__PURE__ */ jsxs("svg", { width: "19", height: "19", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "17", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 9h18M8 2v4M16 2v4" })
+  ] }),
+  digital: /* @__PURE__ */ jsxs("svg", { width: "19", height: "19", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 4h11l5 5v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 4v5h5" })
+  ] })
+};
+function Thumb({ item }) {
+  const glyph = item.lineType ? TYPE_GLYPH[item.lineType] : null;
+  return /* @__PURE__ */ jsx("div", { className: "mt-px size-[46px] shrink-0 overflow-hidden rounded-[10px] bg-muted/50", children: item.imageUrl ? /* @__PURE__ */ jsx("img", { src: item.imageUrl, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "grid size-full place-items-center text-foreground/35", children: glyph }) });
+}
+function AccountLineItem({ item, className }) {
+  const [open, setOpen] = useState(false);
+  const subtitle = item.subtitle ?? ([item.variant, item.addOns?.length ? `+ ${item.addOns.map((a) => a.name).join(", ")}` : null].filter(Boolean).join(" \xB7 ") || void 0);
+  const hasDetail = !!item.customerInputs?.length || !!item.includes?.length || !!item.customisations?.length;
+  return /* @__PURE__ */ jsx("div", { "data-cimplify-line-item": true, "data-type": item.lineType, className: cn("py-[15px]", className), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[46px_minmax(0,1fr)_auto] items-start gap-x-[13px]", children: [
+    /* @__PURE__ */ jsx(Thumb, { item }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold leading-tight tracking-[-0.01em] text-foreground", children: item.name }),
+      subtitle && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[12.5px] text-foreground/55", children: subtitle }),
+      item.scheduling && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 text-[12.5px] text-foreground/55", children: [
+        item.scheduling.whenLabel,
+        item.scheduling.staffName && ` \xB7 with ${item.scheduling.staffName}`
+      ] }),
+      (item.stateLabel || item.scheduling?.confirmationCode || hasDetail || item.digital) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5", children: [
+        item.stateLabel && /* @__PURE__ */ jsx(StateDot, { label: item.stateLabel, tone: item.stateTone }),
+        item.scheduling?.confirmationCode && /* @__PURE__ */ jsxs("span", { className: "text-xs text-foreground/45", children: [
+          "#",
+          item.scheduling.confirmationCode
+        ] }),
+        item.digital && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            StateDot,
+            {
+              label: item.digital.statusLabel,
+              tone: item.digital.tone === "revoked" ? "cancelled" : "ready"
+            }
+          ),
+          item.digital.usageSummary && /* @__PURE__ */ jsx("span", { className: "text-[11.5px] text-foreground/55", children: item.digital.usageSummary }),
+          item.digital.onDownload && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: item.digital.onDownload,
+              className: "inline-flex items-center gap-1.5 text-xs font-semibold text-primary hover:underline",
+              children: [
+                /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" }) }),
+                "Download"
+              ]
+            }
+          )
+        ] }),
+        hasDetail && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen((v) => !v),
+            "aria-expanded": open,
+            className: "inline-flex items-center gap-1.5 text-[12.5px] font-semibold text-foreground/55 hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "13",
+                  height: "13",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  className: cn("transition-transform", open && "rotate-90"),
+                  children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+                }
+              ),
+              item.customisations?.length || item.customerInputs?.length ? "Customisations & details" : "What's included"
+            ]
+          }
+        )
+      ] }),
+      open && hasDetail && /* @__PURE__ */ jsx(LineItemDetails, { item, className: "ml-[1px] mt-2.5" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold tabular-nums text-foreground", children: item.priceLabel })
+  ] }) });
+}
+function ChildRow({ sel }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 py-1.5 [&:not(:first-child)]:border-t [&:not(:first-child)]:border-border/50", children: [
+    /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[11px] font-semibold tabular-nums text-foreground/55", children: [
+      sel.quantity ?? 1,
+      "\xD7"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[12.5px] font-medium text-foreground", children: sel.name }),
+      sel.variantName && /* @__PURE__ */ jsx("div", { className: "text-[11px] text-foreground/55", children: sel.variantName })
+    ] }),
+    sel.priceLabel && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11.5px] tabular-nums text-foreground/55", children: sel.priceLabel })
+  ] });
+}
+function LineItemDetails({
+  item,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    item.includes && item.includes.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-bold uppercase tracking-wider text-foreground/45", children: "Bundle includes" }),
+      item.includes.map((sel, i) => /* @__PURE__ */ jsx(ChildRow, { sel }, i))
+    ] }),
+    item.customisations && item.customisations.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-bold uppercase tracking-wider text-foreground/45", children: "Customisations" }),
+      item.customisations.map((sel, i) => /* @__PURE__ */ jsx(ChildRow, { sel }, i))
+    ] }),
+    item.customerInputs && item.customerInputs.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[84px_minmax(0,1fr)] items-start gap-x-2.5 gap-y-1 text-xs sm:grid-cols-[104px_minmax(0,1fr)]", children: item.customerInputs.map((input) => /* @__PURE__ */ jsxs(React14.Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "capitalize text-foreground/55", children: input.fieldName }),
+      /* @__PURE__ */ jsx(CustomerInputValue, { input })
+    ] }, input.fieldId)) })
+  ] });
+}
+function asObject(v) {
+  return v && typeof v === "object" && !Array.isArray(v) ? v : null;
+}
+function CustomerInputValue({ input }) {
+  const v = input.value;
+  const obj = asObject(v);
+  if (input.semanticKind === "allergen" || input.semanticKind === "sensitivity") {
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 font-medium text-amber-600", children: [
+      /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }) }),
+      String(v ?? "")
+    ] });
+  }
+  switch (input.fieldType) {
+    case "textarea":
+      return /* @__PURE__ */ jsx("span", { className: "block whitespace-pre-wrap rounded-md bg-muted/40 px-2.5 py-1.5 leading-relaxed text-foreground/90", children: String(v ?? "") });
+    case "number":
+      return /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums text-foreground", children: String(v ?? "") });
+    case "select":
+    case "radio":
+      return /* @__PURE__ */ jsx("span", { className: "inline-flex w-fit items-center rounded-full border border-primary/20 bg-primary/[0.12] px-2 py-0.5 text-[11.5px] font-medium text-primary", children: String(v ?? "") });
+    case "multi_select":
+    case "checkbox": {
+      if (typeof v === "boolean") return /* @__PURE__ */ jsx(BooleanBadge, { value: v });
+      const list = Array.isArray(v) ? v.map(String) : [String(v ?? "")];
+      return /* @__PURE__ */ jsx("span", { className: "flex flex-wrap gap-1", children: list.filter(Boolean).map((label, i) => /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full border border-border bg-muted/40 px-2 py-0.5 text-[11px] font-medium", children: label }, i)) });
+    }
+    case "color": {
+      const hex = String(v ?? "");
+      const label = obj?.label ? String(obj.label) : hex;
+      return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 font-medium text-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "inline-block size-3.5 rounded-full border border-black/10", style: { background: hex } }),
+        label,
+        hex && hex !== label && /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px] text-foreground/55", children: hex })
+      ] });
+    }
+    case "date":
+    case "date_time":
+    case "time":
+      return /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums text-foreground", children: String(v ?? "") });
+    case "date_range": {
+      return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 font-medium tabular-nums text-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: String(obj?.start ?? "") }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground/55", children: "\u2192" }),
+        /* @__PURE__ */ jsx("span", { children: String(obj?.end ?? "") })
+      ] });
+    }
+    case "file": {
+      const url = String(v ?? "");
+      const filename = url.split("/").pop() || "Attachment";
+      return /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex w-fit max-w-full items-center gap-1.5 rounded-md border border-border bg-muted/40 px-2 py-1 text-foreground hover:border-primary hover:text-primary",
+          children: [
+            /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: /* @__PURE__ */ jsx("path", { d: "M14 3v5h5M15 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z" }) }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-[11.5px] font-medium", children: filename })
+          ]
+        }
+      );
+    }
+    case "image": {
+      const url = typeof v === "string" ? v : "";
+      if (!url) return /* @__PURE__ */ jsx("span", { className: "italic text-foreground/55", children: "No image" });
+      return /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "block size-14 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx("img", { src: url, alt: input.fieldName, className: "size-full object-cover" }) });
+    }
+    case "url": {
+      const url = String(v ?? "");
+      return /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "inline-flex max-w-full items-center gap-1 truncate text-primary hover:underline", children: url.replace(/^https?:\/\//, "").replace(/\/$/, "") });
+    }
+    case "email":
+      return /* @__PURE__ */ jsx("a", { href: `mailto:${String(v ?? "")}`, className: "text-primary hover:underline", children: String(v ?? "") });
+    case "phone": {
+      const display = obj?.formatted ? String(obj.formatted) : String(v ?? "");
+      return /* @__PURE__ */ jsx("a", { href: `tel:${display}`, className: "tabular-nums text-primary hover:underline", children: display });
+    }
+    case "address": {
+      const formatted = obj?.formatted_address ? String(obj.formatted_address) : String(v ?? "");
+      return /* @__PURE__ */ jsx("span", { className: "block whitespace-pre-line rounded-md bg-muted/40 px-2.5 py-1.5 text-[11.5px] leading-relaxed", children: formatted });
+    }
+    case "location": {
+      const label = obj?.label ? String(obj.label) : null;
+      const lat = obj?.latitude;
+      const lng = obj?.longitude;
+      return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 font-medium text-foreground", children: [
+        /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "text-destructive", children: [
+          /* @__PURE__ */ jsx("path", { d: "M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11Z" }),
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "2.5" })
+        ] }),
+        label ?? `${lat ?? "?"}, ${lng ?? "?"}`
+      ] });
+    }
+    case "signature": {
+      const signer = obj?.signer_name ? String(obj.signer_name) : null;
+      return /* @__PURE__ */ jsxs("span", { className: "inline-flex w-fit items-center gap-1 rounded-full border border-emerald-500/20 bg-emerald-500/[0.12] px-2 py-0.5 text-[11px] font-semibold text-emerald-600", children: [
+        /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }),
+        signer ? `Signed by ${signer}` : "Signed"
+      ] });
+    }
+    case "text":
+    default:
+      return /* @__PURE__ */ jsxs("span", { className: "italic text-foreground/90", children: [
+        "\u201C",
+        String(v ?? ""),
+        "\u201D"
+      ] });
+  }
+}
+function BooleanBadge({ value }) {
+  return value ? /* @__PURE__ */ jsxs("span", { className: "inline-flex w-fit items-center gap-1 rounded-full border border-emerald-500/20 bg-emerald-500/[0.12] px-2 py-0.5 text-[11px] font-semibold text-emerald-600", children: [
+    /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }),
+    "Yes"
+  ] }) : /* @__PURE__ */ jsx("span", { className: "inline-flex w-fit items-center rounded-full bg-muted/40 px-2 py-0.5 text-[11px] font-medium text-foreground/55", children: "No" });
+}
+function AccountLineItems({ items, className }) {
+  return /* @__PURE__ */ jsx("div", { "data-cimplify-line-items": true, className: cn("divide-y divide-border/60", className), children: items.map((item) => /* @__PURE__ */ jsx(AccountLineItem, { item }, item.id)) });
+}
+var STATUS_TONE = {
+  progress: "bg-amber-500/10 text-amber-600",
+  positive: "bg-emerald-500/10 text-emerald-600",
+  muted: "bg-muted/60 text-foreground/60"
+};
+function SectionLabel({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "text-[10px] font-bold uppercase tracking-wider text-foreground/45", children });
+}
+function AccountOrderView({
+  orderNumber,
+  placedLabel,
+  statusLabel,
+  statusTone = "progress",
+  items,
+  itemsLabel = "Items",
+  delivery,
+  payment,
+  shipTo,
+  actions,
+  onBack,
+  backLabel = "Back to orders",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-order-view": true, className: cn("min-w-0", className), children: [
+    onBack && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        className: "mb-5 inline-flex items-center gap-1.5 text-[13px] font-medium text-foreground/55 hover:text-foreground",
+        children: [
+          /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) }),
+          backLabel
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mb-5 flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("h1", { className: "font-serif text-2xl font-semibold tracking-[-0.02em] tabular-nums text-foreground", children: [
+          "Order #",
+          orderNumber
+        ] }),
+        placedLabel && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[13px] text-foreground/55", children: placedLabel })
+      ] }),
+      statusLabel && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold",
+            STATUS_TONE[statusTone]
+          ),
+          children: statusLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_300px] lg:gap-14", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("section", { children: [
+          /* @__PURE__ */ jsx(SectionLabel, { children: itemsLabel }),
+          /* @__PURE__ */ jsx(AccountLineItems, { items, className: "mt-2.5" })
+        ] }),
+        delivery && /* @__PURE__ */ jsxs("section", { className: "mt-6 border-t border-border/60 pt-6", children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-1 flex items-center justify-between", children: /* @__PURE__ */ jsx(SectionLabel, { children: delivery.label ?? "Delivery" }) }),
+          delivery.note && /* @__PURE__ */ jsx("p", { className: "mb-4 text-[11.5px] text-foreground/55", children: delivery.note }),
+          /* @__PURE__ */ jsx(
+            DeliveryTracker,
+            {
+              variant: "plain",
+              steps: delivery.steps,
+              statusLabel: delivery.statusLabel,
+              etaLabel: delivery.etaLabel,
+              rider: delivery.rider,
+              live: delivery.live,
+              onTrackLive: delivery.onTrackLive,
+              onContactRider: delivery.onContactRider
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "rounded-[var(--radius,12px)] bg-muted/40 p-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx(SectionLabel, { children: "Payment" }),
+            payment.stateLabel && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "rounded-full px-2 py-0.5 text-[11.5px] font-semibold",
+                  payment.stateTone === "warning" ? "bg-amber-500/10 text-amber-600" : payment.stateTone === "muted" ? "bg-muted/70 text-foreground/60" : "bg-emerald-500/10 text-emerald-600"
+                ),
+                children: payment.stateLabel
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-[13px]", children: [
+            payment.rows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-foreground/55", children: row.label }),
+              /* @__PURE__ */ jsx("span", { className: cn("tabular-nums", row.tone === "positive" && "text-emerald-600"), children: row.value })
+            ] }, i)),
+            /* @__PURE__ */ jsx("div", { className: "my-2 h-px bg-border" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[15px] font-semibold", children: [
+              /* @__PURE__ */ jsx("span", { children: payment.total.label }),
+              /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: payment.total.value })
+            ] })
+          ] }),
+          payment.method && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "my-3 h-px bg-border" }),
+            /* @__PURE__ */ jsx("div", { className: "text-[12.5px] text-foreground", children: payment.method })
+          ] })
+        ] }),
+        shipTo && /* @__PURE__ */ jsxs("div", { className: "mt-7", children: [
+          /* @__PURE__ */ jsx(SectionLabel, { children: shipTo.heading ?? "Delivering to" }),
+          shipTo.name && /* @__PURE__ */ jsx("div", { className: "mt-2 text-[13px] font-semibold text-foreground", children: shipTo.name }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1 text-[12.5px] leading-relaxed text-foreground/55", children: shipTo.lines })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "mt-7 space-y-2.5", children: actions })
+      ] })
+    ] })
+  ] });
+}
 function SubscriptionRow({
   subscription,
   onSelect,
@@ -3264,27 +3818,11 @@ var DEFAULT_LINKS = [
     ] })
   },
   {
-    label: "Addresses",
-    href: "/account/addresses",
-    icon: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx("path", { d: "M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11Z" }),
-      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "2.5" })
-    ] })
-  },
-  {
-    label: "Payment methods",
-    href: "/account/payment",
-    icon: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" }),
-      /* @__PURE__ */ jsx("path", { d: "M2 10h20" })
-    ] })
-  },
-  {
-    label: "Account",
-    href: "/account",
+    label: "Subscriptions",
+    href: "/account/subscriptions",
     icon: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
-      /* @__PURE__ */ jsx("path", { d: "M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" })
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M3 9h18M8 2v4M16 2v4" })
     ] })
   }
 ];
@@ -3401,7 +3939,7 @@ function CimplifyUserButton({
         id: menuId,
         role: "menu",
         className: cn(
-          "absolute top-[calc(100%+8px)] z-50 w-[280px] overflow-hidden",
+          "absolute top-[calc(100%+8px)] z-50 w-[280px] max-w-[calc(100vw-1.5rem)] overflow-hidden",
           "rounded-[14px] border border-border bg-card",
           "shadow-[0_1px_2px_rgba(16,24,40,0.04),0_16px_40px_-16px_rgba(16,24,40,0.24)]",
           align === "end" ? "right-0" : "left-0"
@@ -7327,7 +7865,7 @@ function FileUploadInput({
   onFileUpload,
   classNames
 }) {
-  const [isUploading, setIsUploading] = React12.useState(false);
+  const [isUploading, setIsUploading] = React14.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;
@@ -7477,22 +8015,22 @@ function AddressInput({
 }) {
   const clientContext = useOptionalCimplifyClient();
   const addr = value && typeof value === "object" ? value : null;
-  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(() => {
+  const [inputText, setInputText] = React14.useState(addr?.formatted_address ?? "");
+  const [suggestions, setSuggestions] = React14.useState([]);
+  const [isOpen, setIsOpen] = React14.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React14.useState(-1);
+  const debounceRef = React14.useRef(null);
+  const seqRef = React14.useRef(0);
+  const sessionTokenRef = React14.useRef(createSessionToken());
+  const blurTimeoutRef = React14.useRef(null);
+  React14.useEffect(() => {
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
       if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
       seqRef.current += 1;
     };
   }, []);
-  const fetchSuggestions = React12.useCallback(async (query) => {
+  const fetchSuggestions = React14.useCallback(async (query) => {
     const client = clientContext?.client;
     if (!client || query.length < 3) {
       setSuggestions([]);
@@ -7516,7 +8054,7 @@ function AddressInput({
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);
   };
-  const selectSuggestion = React12.useCallback(async (suggestion) => {
+  const selectSuggestion = React14.useCallback(async (suggestion) => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
     const fallback = suggestion.description.split(",")[0]?.trim() || suggestion.description;
@@ -7619,22 +8157,22 @@ function LocationInput({
 }) {
   const clientContext = useOptionalCimplifyClient();
   const loc = value && typeof value === "object" ? value : null;
-  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(() => {
+  const [inputText, setInputText] = React14.useState(loc?.label ?? "");
+  const [suggestions, setSuggestions] = React14.useState([]);
+  const [isOpen, setIsOpen] = React14.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React14.useState(-1);
+  const debounceRef = React14.useRef(null);
+  const seqRef = React14.useRef(0);
+  const sessionTokenRef = React14.useRef(createSessionToken());
+  const blurTimeoutRef = React14.useRef(null);
+  React14.useEffect(() => {
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
       if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
       seqRef.current += 1;
     };
   }, []);
-  const fetchSuggestions = React12.useCallback(async (query) => {
+  const fetchSuggestions = React14.useCallback(async (query) => {
     const client = clientContext?.client;
     if (!client || query.length < 3) {
       setSuggestions([]);
@@ -7658,7 +8196,7 @@ function LocationInput({
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);
   };
-  const selectSuggestion = React12.useCallback(async (suggestion) => {
+  const selectSuggestion = React14.useCallback(async (suggestion) => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
     const label = suggestion.description.split(",")[0]?.trim() || suggestion.description;
@@ -7747,8 +8285,8 @@ function PhoneInput({
   inputClass
 }) {
   const phone = value && typeof value === "object" ? value : null;
-  const [code, setCode] = React12.useState(phone?.country_code ?? "+1");
-  const [number, setNumber] = React12.useState(phone?.number ?? "");
+  const [code, setCode] = React14.useState(phone?.country_code ?? "+1");
+  const [number, setNumber] = React14.useState(phone?.number ?? "");
   const update = (nextCode, nextNumber) => {
     setCode(nextCode);
     setNumber(nextNumber);
@@ -7793,8 +8331,8 @@ function SignatureInput({
   classNames
 }) {
   const sig = value && typeof value === "object" ? value : null;
-  const canvasRef = React12.useRef(null);
-  const isDrawing = React12.useRef(false);
+  const canvasRef = React14.useRef(null);
+  const isDrawing = React14.useRef(false);
   const getCtx = () => canvasRef.current?.getContext("2d") ?? null;
   const startDraw = (e) => {
     const ctx = getCtx();
@@ -8826,7 +9364,7 @@ function ProductModel3D({
       "data-cimplify-product-model-3d": true,
       className,
       style: { position: "relative", overflow: "hidden", ...ASPECT_STYLES3[aspectRatio] },
-      children: ready ? React12.createElement("model-viewer", {
+      children: ready ? React14.createElement("model-viewer", {
         src,
         "ios-src": iosSrc,
         alt,
@@ -8837,12 +9375,12 @@ function ProductModel3D({
         "auto-rotate": autoRotate || void 0,
         "shadow-intensity": "1",
         style: { width: "100%", height: "100%", backgroundColor: "transparent" }
-      }) : poster ? React12.createElement("img", {
+      }) : poster ? React14.createElement("img", {
         src: poster,
         alt: alt ?? "",
         "data-cimplify-product-model-3d-loading": true,
         style: { width: "100%", height: "100%", objectFit: "cover" }
-      }) : React12.createElement("div", {
+      }) : React14.createElement("div", {
         "data-cimplify-product-model-3d-loading": true,
         style: { width: "100%", height: "100%", backgroundColor: "var(--muted, #f3f4f6)" }
       })
@@ -10769,13 +11307,13 @@ function ProductGrid({
   className,
   classNames
 }) {
-  const rawId = React12.useId();
+  const rawId = React14.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 = React12.useMemo(
+  const css = React14.useMemo(
     () => [
       `#${gridId}{display:grid;grid-template-columns:repeat(${sm},1fr);gap:1rem}`,
       `@media(min-width:768px){#${gridId}{grid-template-columns:repeat(${md},1fr)}}`,
@@ -11136,7 +11674,7 @@ function CategoryGrid({
     enabled: categoriesProp === void 0
   });
   const categories = categoriesProp ?? fetched;
-  const rawId = React12.useId();
+  const rawId = React14.useId();
   const gridId = `cimplify-cat-grid-${rawId.replace(/:/g, "")}`;
   const sm = columns?.sm ?? 2;
   const md = columns?.md ?? 3;
@@ -11362,7 +11900,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(React12.Fragment, { children: renderLineItem(item) }, item.id) : /* @__PURE__ */ jsxs("div", { "data-cimplify-order-line-item": true, className: classNames?.lineItem, children: [
+      (item) => renderLineItem ? /* @__PURE__ */ jsx(React14.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,
@@ -12522,7 +13060,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(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+          (product) => renderCard ? /* @__PURE__ */ jsx(React14.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
             ProductCard,
             {
               product,
@@ -12629,7 +13167,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(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+      (product) => renderCard ? /* @__PURE__ */ jsx(React14.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
         ProductCard,
         {
           product,
@@ -12652,8 +13190,8 @@ var BUILT_IN_LAYOUTS = {
   ["compact" /* Compact */]: CompactCatalogueLayout
 };
 function useDebounce(value, delay) {
-  const [debounced, setDebounced] = React12.useState(value);
-  React12.useEffect(() => {
+  const [debounced, setDebounced] = React14.useState(value);
+  React14.useEffect(() => {
     const timer = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(timer);
   }, [value, delay]);
@@ -12909,7 +13447,7 @@ function DefaultProductLayout({
   showRelated = true,
   className
 }) {
-  const [selectedVariantId, setSelectedVariantId] = React12.useState();
+  const [selectedVariantId, setSelectedVariantId] = React14.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);
@@ -14175,7 +14713,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(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+      (product) => renderCard ? /* @__PURE__ */ jsx(React14.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
         ProductCard,
         {
           product,
@@ -14228,7 +14766,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(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+      (product) => renderCard ? /* @__PURE__ */ jsx(React14.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
         ProductCard,
         {
           product,
@@ -14352,7 +14890,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(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+      (product) => renderCard ? /* @__PURE__ */ jsx(React14.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
         ProductCard,
         {
           product,
@@ -14732,7 +15270,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(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+        (product) => renderCard ? /* @__PURE__ */ jsx(React14.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
           ProductCard,
           {
             product,
@@ -14834,7 +15372,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(React12.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
+      (product) => renderCard ? /* @__PURE__ */ jsx(React14.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsx(
         ProductCard,
         {
           product,
@@ -15788,4 +16326,4 @@ function SparkleIcon({ className }) {
   );
 }
 
-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, CimplifyCheckout, CimplifyProvider, CimplifySignInButton, CimplifyUserButton, 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, RichText, 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, sanitizeRichTextHtml, stripHtmlToText, 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, AccountLineItem, AccountLineItems, AccountNav, AccountOrderDetailPage, AccountOrderView, 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, CimplifyCheckout, CimplifyProvider, CimplifySignInButton, CimplifyUserButton, 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, DeliveryTracker, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, EmptyState, ErrorState, FeaturedCollectionLayout, FilterTabs, FoodProductCard, FoodProductLayout, HappeningCard, IdentityIcon, IdentityOfframp, InventoryBadge, ItemsCard, LeaseServiceCard, LineItemDetails, 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, RichText, 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, sanitizeRichTextHtml, stripHtmlToText, 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 };