impact-nova 2.6.2 → 3.0.0-alpha.0

package/dist/components/forms/choice-card/choice-card.js

@@ -1,268 +1,749 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as i from "react";
-import * as x from "@radix-ui/react-radio-group";
-import { useControllableState as y } from "@radix-ui/react-use-controllable-state";
-import { Check as M } from "impact-nova-icons";
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import * as n from "react";
+import * as L from "@radix-ui/react-checkbox";
+import * as G from "@radix-ui/react-radio-group";
+import { Slot as T } from "@radix-ui/react-slot";
+import { useControllableState as M } from "@radix-ui/react-use-controllable-state";
+import { Checkmark as V } from "impact-nova-icons";
+import { Badge as F } from "../../data-display/badge/badge.js";
 import { createComponent as p } from "../../../lib/primitives/create-component.js";
-import { cn as h } from "../../../lib/utils.js";
-const v = i.createContext(null), g = i.createContext({
+import { useComposedRefs as _ } from "../../../lib/compose-refs.js";
+import { cn as l } from "../../../lib/utils.js";
+import { choiceCardCheckboxIndicatorClassName as H, choiceCardRadioIndicatorClassName as $ } from "./choice-card-indicator.variants.js";
+import { ChoiceCardFeaturedBackdrop as K } from "./choice-card-featured-backdrop.js";
+import { choiceCardVariants as W } from "./choice-card.variants.js";
+const y = n.createContext(null), x = n.createContext({
+  value: "",
   selected: !1,
-  type: "single"
-}), k = () => {
-  const e = i.useContext(v);
+  type: "single",
+  size: "md",
+  variant: "default",
+  labelIsExplicit: !1,
+  setAccessibleName: () => {
+  }
+}), v = n.createContext({
+  inCompare: !1,
+  rows: 0,
+  fit: "scroll"
+}), B = () => {
+  const e = n.useContext(y);
   if (!e)
     throw new Error("ChoiceCard components must be used within ChoiceCardGroup");
   return e;
 };
-function T() {
-  const { value: e, type: o, setValue: t, isSelected: r } = k();
-  return i.useMemo(
+function Ce() {
+  const { value: e, type: a, setValue: t, isSelected: r } = B();
+  return n.useMemo(
     () => ({
       value: e,
-      type: o,
+      type: a,
       setValue: t,
       isSelected: r
     }),
-    [e, o, t, r]
+    [e, a, t, r]
+  );
+}
+function pe() {
+  return n.useContext(x);
+}
+function Z({
+  selected: e,
+  disabled: a,
+  mode: t,
+  size: r,
+  variant: c,
+  className: i
+}) {
+  return l(
+    W({
+      variant: c,
+      size: r,
+      selected: e,
+      mode: t,
+      disabled: !!a
+    }),
+    i
   );
 }
-const w = (e, o, t) => h(
-  "relative flex flex-col items-start gap-3 p-3 rounded-xl",
-  "border-t border-r border-b-2 border-l-4",
-  "cursor-pointer select-none transition-[border-color,background-color] duration-150",
-  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring",
-  e ? "border-brand bg-brand-tint hover:bg-brand-tint-hover" : "border-stroke-subtle bg-canvas-elevated hover:border-brand hover:bg-canvas-muted",
-  o && "cursor-not-allowed opacity-60",
-  t
-), S = ({
+const q = ({
   value: e,
-  defaultValue: o = "",
+  defaultValue: a = "",
   onValueChange: t,
   disabled: r,
-  orientation: m = "horizontal",
-  wrap: u = !1,
-  className: s,
-  children: l
+  orientation: c = "horizontal",
+  wrap: i = !1,
+  className: m,
+  children: h
 }) => {
-  const [c, n] = y({
+  const [C, s] = M({
     prop: e,
-    defaultProp: o,
+    defaultProp: a,
     onChange: t
-  }), d = i.useCallback(
-    (C) => c === C,
-    [c]
-  ), f = i.useMemo(
+  }), u = n.useCallback(
+    (d) => C === d,
+    [C]
+  ), f = n.useMemo(
     () => ({
       type: "single",
       disabled: r,
-      value: c,
-      setValue: (C) => n(C),
-      isSelected: d,
-      toggle: (C) => n(C)
+      value: C,
+      setValue: (d) => s(d),
+      isSelected: u,
+      toggle: (d) => s(d)
     }),
-    [r, c, n, d]
+    [r, C, s, u]
   );
-  return /* @__PURE__ */ a(v.Provider, { value: f, children: /* @__PURE__ */ a(
-    x.Root,
+  return /* @__PURE__ */ o(y.Provider, { value: f, children: /* @__PURE__ */ o(
+    G.Root,
     {
-      value: c,
-      onValueChange: n,
+      value: C,
+      onValueChange: s,
       disabled: r,
-      className: s,
+      className: m,
       "data-component": "choice-card-group",
       "data-type": "single",
-      "data-layout": u ? "wrap" : m === "vertical" ? "column" : "row",
-      children: l
+      "data-layout": i ? "wrap" : c === "vertical" ? "column" : "row",
+      children: h
     }
   ) });
-}, P = ({
+}, J = ({
   value: e,
-  defaultValue: o = [],
+  defaultValue: a = [],
   onValueChange: t,
   disabled: r,
-  orientation: m = "horizontal",
-  wrap: u = !1,
-  className: s,
-  children: l
+  orientation: c = "horizontal",
+  wrap: i = !1,
+  className: m,
+  children: h
 }) => {
-  const [c, n] = y({
+  const [C, s] = M({
     prop: e,
-    defaultProp: o,
+    defaultProp: a,
     onChange: t
-  }), d = i.useMemo(() => c ?? [], [c]), f = i.useCallback(
-    (b) => d.includes(b),
-    [d]
-  ), C = i.useCallback(
+  }), u = n.useMemo(() => C ?? [], [C]), f = n.useCallback(
+    (b) => u.includes(b),
+    [u]
+  ), d = n.useCallback(
     (b) => {
-      if (d.includes(b)) {
-        n(d.filter((N) => N !== b));
+      if (u.includes(b)) {
+        s(u.filter((N) => N !== b));
         return;
       }
-      n([...d, b]);
+      s([...u, b]);
     },
-    [d, n]
-  ), G = i.useMemo(
+    [u, s]
+  ), k = n.useMemo(
     () => ({
       type: "multiple",
       disabled: r,
-      value: d,
-      setValue: (b) => n(b),
+      value: u,
+      setValue: (b) => s(b),
       isSelected: f,
-      toggle: C
+      toggle: d
     }),
-    [r, d, n, f, C]
+    [r, u, s, f, d]
   );
-  return /* @__PURE__ */ a(v.Provider, { value: G, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(y.Provider, { value: k, children: /* @__PURE__ */ o(
     "div",
     {
       role: "group",
-      className: s,
+      className: m,
       "data-component": "choice-card-group",
       "data-type": "multiple",
-      "data-layout": u ? "wrap" : m === "vertical" ? "column" : "row",
-      children: l
+      "data-layout": i ? "wrap" : c === "vertical" ? "column" : "row",
+      children: h
     }
   ) });
-}, V = (e) => e.type === "multiple" ? /* @__PURE__ */ a(P, { ...e }) : /* @__PURE__ */ a(S, { ...e });
-V.displayName = "ChoiceCardGroup";
-const j = p("ChoiceCardSurface", ({ className: e, selected: o, disabled: t, children: r, ...m }, u) => /* @__PURE__ */ a(
-  "div",
-  {
-    ref: u,
-    className: w(o, t, e),
-    "data-component": "choice-card",
-    "data-selected": o || void 0,
-    ...m,
-    children: r
+}, O = (e) => e.type === "multiple" ? /* @__PURE__ */ o(J, { ...e }) : /* @__PURE__ */ o(q, { ...e });
+O.displayName = "ChoiceCardGroup";
+function E(e, a, t) {
+  if (e) {
+    a.preventDefault(), a.stopPropagation();
+    return;
   }
-)), E = p(
+  t?.(a);
+}
+function Q(e) {
+  return e instanceof Element && !!e.closest(
+    'a, button, input, textarea, select, [role="button"], [data-slot="choice-card-control"]'
+  );
+}
+const U = p(
+  "ChoiceCardSurface",
+  ({
+    className: e,
+    selected: a,
+    disabled: t = !1,
+    mode: r,
+    size: c,
+    variant: i,
+    children: m,
+    onClick: h,
+    onPointerDown: C,
+    onKeyDown: s,
+    ...u
+  }, f) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: f,
+      className: Z({
+        selected: a,
+        disabled: t,
+        mode: r,
+        size: c,
+        variant: i,
+        className: e
+      }),
+      "data-component": "choice-card",
+      "data-selected": a || void 0,
+      "data-disabled": t || void 0,
+      "data-size": c,
+      "data-variant": i,
+      "aria-disabled": t || void 0,
+      onClick: (d) => E(t, d, h),
+      onPointerDown: (d) => E(t, d, C),
+      onKeyDown: (d) => {
+        if (t && (d.key === " " || d.key === "Enter")) {
+          d.preventDefault(), d.stopPropagation();
+          return;
+        }
+        s?.(d);
+      },
+      ...u,
+      children: m
+    }
+  )
+), he = p(
   "ChoiceCard",
-  ({ value: e, className: o, children: t, disabled: r, ...m }, u) => {
-    const s = k(), l = r || s.disabled, c = s.isSelected(e), n = i.useMemo(
+  ({
+    value: e,
+    className: a,
+    children: t,
+    disabled: r,
+    size: c = "md",
+    variant: i = "default",
+    "aria-label": m,
+    ...h
+  }, C) => {
+    const s = B(), u = n.useContext(v), f = r || s.disabled, d = s.isSelected(e), [k, b] = n.useState(""), N = n.useCallback((w) => {
+      b((P) => P === w ? P : w);
+    }, []), S = !!m, j = n.useMemo(
       () => ({
-        selected: c,
-        disabled: l,
-        type: s.type
+        value: e,
+        selected: d,
+        disabled: f,
+        type: s.type,
+        size: c,
+        variant: i,
+        labelIsExplicit: S,
+        setAccessibleName: N
       }),
-      [c, l, s.type]
-    );
-    return s.type === "single" ? /* @__PURE__ */ a(g.Provider, { value: n, children: /* @__PURE__ */ a(x.Item, { value: e, asChild: !0, disabled: l, children: /* @__PURE__ */ a(
-      j,
+      [e, d, f, s.type, c, i, S, N]
+    ), z = m ?? (k || e), R = () => {
+      f || s.toggle(e);
+    }, A = (w) => {
+      Q(w.target) || R(), h.onClick?.(w);
+    }, I = l(
+      "pointer-events-none absolute inset-0 z-0 opacity-0 outline-none",
+      u.inCompare && "[grid-column:1] [grid-row:1/-1]"
+    ), D = s.type === "single" ? /* @__PURE__ */ o(
+      G.Item,
       {
-        ref: u,
-        selected: c,
-        disabled: l,
-        className: o,
-        ...m,
-        children: t
+        value: e,
+        disabled: f,
+        className: I,
+        "data-slot": "choice-card-control",
+        "aria-label": z
       }
-    ) }) }) : /* @__PURE__ */ a(g.Provider, { value: n, children: /* @__PURE__ */ a(
-      "button",
+    ) : /* @__PURE__ */ o(
+      L.Root,
       {
-        ref: u,
-        type: "button",
-        role: "checkbox",
-        "aria-checked": c,
-        disabled: l,
-        className: w(c, l, o),
-        "data-component": "choice-card",
-        "data-selected": c || void 0,
-        onClick: () => s.toggle(e),
-        children: t
+        checked: d,
+        disabled: f,
+        onCheckedChange: R,
+        className: I,
+        "data-slot": "choice-card-control",
+        "aria-label": z
+      }
+    );
+    return /* @__PURE__ */ o(x.Provider, { value: j, children: /* @__PURE__ */ g(
+      U,
+      {
+        ref: C,
+        selected: d,
+        disabled: f,
+        mode: s.type,
+        size: c,
+        variant: i,
+        className: l(
+          a,
+          u.inCompare && l(
+            "isolate grid w-full grid-rows-subgrid [grid-row:1/-1] gap-0",
+            u.fit === "auto" ? "min-w-0 max-w-[420px]" : "min-w-[411px]"
+          )
+        ),
+        ...h,
+        onClick: A,
+        children: [
+          D,
+          i === "featured" ? /* @__PURE__ */ o(K, {}) : null,
+          t
+        ]
       }
     ) });
   }
-), q = p(
+), fe = p(
   "ChoiceCardIndicator",
-  ({ className: e }, o) => {
-    const { selected: t, type: r } = i.useContext(g);
-    return r === "multiple" ? /* @__PURE__ */ a(
-      "div",
+  ({ className: e }, a) => {
+    const { selected: t, type: r, disabled: c } = n.useContext(x);
+    return r === "multiple" ? /* @__PURE__ */ o(
+      "span",
       {
-        ref: o,
-        className: h(
-          "w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors",
-          t ? "border-brand bg-brand text-brand-foreground" : "border-stroke-field bg-transparent",
+        ref: a,
+        className: l(
+          H,
+          t && "border-brand bg-accent text-brand",
+          c && "border-stroke bg-disabled-surface text-disabled-foreground data-[state=checked]:border-stroke data-[state=checked]:bg-disabled-surface",
           e
         ),
+        "data-slot": "choice-card-indicator",
+        "data-state": t ? "checked" : "unchecked",
         "aria-hidden": "true",
-        children: t && /* @__PURE__ */ a(M, { size: 12 })
+        children: t ? /* @__PURE__ */ o(V, { className: "h-3.5 w-3.5" }) : null
       }
-    ) : /* @__PURE__ */ a(
-      "div",
+    ) : /* @__PURE__ */ o(
+      "span",
       {
-        ref: o,
-        className: h(
-          "w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
-          t ? "border-brand" : "border-stroke-field",
+        ref: a,
+        className: l(
+          $,
+          t && "ring-brand",
+          c && "bg-disabled-surface ring-stroke",
           e
         ),
+        "data-slot": "choice-card-indicator",
         "aria-hidden": "true",
-        children: t && /* @__PURE__ */ a("div", { className: "w-2.5 h-2.5 rounded-full bg-brand" })
+        children: t ? /* @__PURE__ */ o("span", { className: "absolute inset-[3px] rounded-full bg-current" }) : null
       }
     );
   }
-), A = p(
-  "ChoiceCardContent",
-  ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
+), be = p(
+  "ChoiceCardBackground",
+  ({ className: e, children: a, ...t }, r) => /* @__PURE__ */ o(
     "div",
     {
       ref: r,
-      className: h("flex flex-col items-start gap-2 w-full", e),
-      "data-slot": "choice-card-content",
+      className: l("pointer-events-none absolute inset-0 overflow-hidden", e),
+      "data-slot": "choice-card-background",
+      "aria-hidden": "true",
       ...t,
-      children: o
+      children: a
     }
   )
-), B = p("ChoiceCardMedia", ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
+);
+function X({ className: e }) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      width: 28,
+      height: 32,
+      viewBox: "0 0 28 32",
+      className: l("relative z-0 block h-8 w-7 shrink-0", e),
+      "data-slot": "choice-card-ribbon-wedge",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ o(
+        "path",
+        {
+          d: "M11 16 0 0h28v32H0l11-16Z",
+          fill: "var(--color-choice-card-ribbon-wedge)"
+        }
+      )
+    }
+  );
+}
+const ge = p(
+  "ChoiceCardRibbon",
+  ({ className: e, children: a, ...t }, r) => /* @__PURE__ */ g(
+    "div",
+    {
+      ref: r,
+      className: l("pointer-events-none absolute bottom-0 right-0 flex h-8 items-stretch", e),
+      "data-slot": "choice-card-ribbon",
+      ...t,
+      children: [
+        /* @__PURE__ */ o(X, {}),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: l(
+              // Start fill at the chevron tip (28 − 11) so no empty purple band sits before the label
+              "relative z-[1] -ms-[17px] flex h-8 items-center rounded-br-xl pe-2 ps-1",
+              "bg-[linear-gradient(90deg,var(--color-choice-card-ribbon-from)_0%,var(--color-choice-card-ribbon-to)_100%)]"
+            ),
+            "data-slot": "choice-card-ribbon-fill",
+            children: /* @__PURE__ */ o("span", { className: "text-xs font-bold leading-5 text-content capitalize whitespace-nowrap", children: a })
+          }
+        )
+      ]
+    }
+  )
+), xe = p(
+  "ChoiceCardFooter",
+  ({ className: e, children: a, ...t }, r) => {
+    const c = n.useContext(v);
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: r,
+        className: l(
+          "flex flex-wrap items-start gap-2",
+          c.inCompare && "[grid-row:-1] self-end pt-4",
+          e
+        ),
+        "data-slot": "choice-card-footer",
+        ...t,
+        children: a
+      }
+    );
+  }
+), we = p(
+  "ChoiceCardContent",
+  ({ className: e, children: a, ...t }, r) => {
+    const { variant: c } = n.useContext(x);
+    return n.useContext(v).inCompare ? /* @__PURE__ */ o(
+      "div",
+      {
+        ref: r,
+        className: l("contents", e),
+        "data-slot": "choice-card-content",
+        ...t,
+        children: a
+      }
+    ) : /* @__PURE__ */ o(
+      "div",
+      {
+        ref: r,
+        className: l(
+          "relative z-[1] flex min-w-0 flex-1 flex-col items-start gap-1",
+          c === "featured" && "w-full flex-none gap-2 p-3",
+          c === "compare" && "w-full flex-none gap-4",
+          e
+        ),
+        "data-slot": "choice-card-content",
+        ...t,
+        children: a
+      }
+    );
+  }
+), ve = p("ChoiceCardMedia", ({ className: e, children: a, ...t }, r) => /* @__PURE__ */ o(
   "div",
   {
     ref: r,
-    className: h("flex items-center justify-center shrink-0", e),
+    className: l("flex shrink-0 items-center justify-center", e),
     "data-slot": "choice-card-media",
     ...t,
-    children: o
+    children: a
   }
-)), F = p("ChoiceCardTitle", ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
-  "h3",
-  {
-    ref: r,
-    className: h(
-      "text-base font-medium leading-tight text-content capitalize",
-      e
-    ),
-    ...t,
-    children: o
-  }
-)), J = p(
+)), Ne = p("ChoiceCardTitle", ({ className: e, children: a, ...t }, r) => {
+  const { selected: c, disabled: i, size: m, variant: h, labelIsExplicit: C, setAccessibleName: s } = n.useContext(x), u = n.useRef(null), f = _(r, u);
+  return n.useLayoutEffect(() => {
+    if (C) return;
+    const d = u.current?.textContent?.trim();
+    d && s(d);
+  }, [a, C, s]), /* @__PURE__ */ o(
+    "h3",
+    {
+      ref: f,
+      className: l(
+        "capitalize text-content",
+        m === "sm" ? "text-sm font-semibold leading-6" : "text-base font-bold leading-6",
+        (h === "featured" || h === "compare") && "text-base font-semibold leading-6",
+        i && !c && "text-content-secondary",
+        e
+      ),
+      ...t,
+      children: a
+    }
+  );
+}), ke = p(
   "ChoiceCardHeader",
-  ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
+  ({ className: e, children: a, ...t }, r) => {
+    const c = n.useContext(v);
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: r,
+        className: l(
+          "flex w-full items-center gap-2",
+          c.inCompare && "[grid-row:1] min-w-0 overflow-hidden",
+          e
+        ),
+        "data-slot": "choice-card-header",
+        ...t,
+        children: a
+      }
+    );
+  }
+), ye = p("ChoiceCardDescription", ({ className: e, children: a, ...t }, r) => {
+  const { selected: c, disabled: i, variant: m } = n.useContext(x);
+  return /* @__PURE__ */ o(
+    "p",
+    {
+      ref: r,
+      className: l(
+        "text-xs font-medium leading-4 text-content-secondary",
+        m === "featured" && "leading-[18px]",
+        m === "compare" && "capitalize font-bold leading-5 text-content-icon",
+        i && !c && m !== "featured" && "text-content-muted",
+        e
+      ),
+      ...t,
+      children: a
+    }
+  );
+}), Se = p(
+  "ChoiceCardStatus",
+  ({
+    className: e,
+    asChild: a = !1,
+    placement: t = "start",
+    icon: r,
+    children: c = "Selected",
+    ...i
+  }, m) => {
+    const { selected: h } = n.useContext(x);
+    return h ? /* @__PURE__ */ o(
+      a ? T : "div",
+      {
+        ref: m,
+        "data-slot": "choice-card-status",
+        "data-placement": t,
+        className: l(
+          "pointer-events-none absolute z-10 -top-4",
+          t === "center" ? "left-1/2 -translate-x-1/2" : "start-3",
+          e
+        ),
+        ...i,
+        children: a ? c : /* @__PURE__ */ o(F, { variant: "solid", color: "success", size: "md", icon: r ?? /* @__PURE__ */ o(V, { className: "size-4" }), children: c })
+      }
+    ) : null;
+  }
+), ze = p(
+  "ChoiceCardIndex",
+  ({ className: e, children: a, ...t }, r) => /* @__PURE__ */ o(
+    "span",
+    {
+      ref: r,
+      "data-slot": "choice-card-index",
+      className: l(
+        "inline-flex size-[22px] shrink-0 items-center justify-center rounded-md bg-content-icon text-[12px] font-bold leading-none tracking-[-0.12px] text-brand-foreground group-data-[selected]:bg-success",
+        e
+      ),
+      ...t,
+      children: a
+    }
+  )
+), Re = p(
+  "ChoiceCardStats",
+  ({ className: e, children: a, ...t }, r) => {
+    const c = n.Children.toArray(a);
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: r,
+        "data-slot": "choice-card-stats",
+        className: l(
+          "flex h-[46px] w-full items-center rounded-lg bg-canvas-muted",
+          e
+        ),
+        ...t,
+        children: c.map((i, m) => /* @__PURE__ */ g(n.Fragment, { children: [
+          m > 0 ? /* @__PURE__ */ o("div", { className: "h-3 w-px shrink-0 bg-stroke-field", "aria-hidden": "true" }) : null,
+          i
+        ] }, m))
+      }
+    );
+  }
+), Ie = p(
+  "ChoiceCardStat",
+  ({ className: e, value: a, label: t, ...r }, c) => /* @__PURE__ */ g(
+    "div",
+    {
+      ref: c,
+      "data-slot": "choice-card-stat",
+      className: l(
+        "flex min-w-0 flex-1 flex-col items-center gap-0.5 p-1",
+        e
+      ),
+      ...r,
+      children: [
+        /* @__PURE__ */ o("p", { className: "text-sm font-medium leading-5 text-content-secondary", children: a }),
+        /* @__PURE__ */ o("p", { className: "text-xs font-medium leading-4 text-content-heading capitalize", children: t })
+      ]
+    }
+  )
+);
+function Y(e, a) {
+  if (e <= 0) return "max-content";
+  const t = a === "auto" ? "minmax(0, 420px)" : "minmax(411px, 1fr)";
+  return `max-content ${Array.from(
+    { length: e },
+    (c, i) => i === 0 ? t : `1rem ${t}`
+  ).join(" ")}`;
+}
+function ee({ rows: e }) {
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      "data-slot": "choice-card-compare-gutter",
+      className: "grid w-4 grid-rows-subgrid [grid-row:1/-1]",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ o("span", { className: "[grid-row:1]" }),
+        /* @__PURE__ */ o("span", { className: "[grid-row:2]" }),
+        Array.from({ length: e }, (a, t) => /* @__PURE__ */ o(
+          "span",
+          {
+            className: "w-full self-center border-t border-dashed border-canvas-accordion"
+          },
+          t
+        )),
+        /* @__PURE__ */ o("span", { className: "[grid-row:-1]" })
+      ]
+    }
+  );
+}
+const te = p(
+  "ChoiceCardCompareLabels",
+  ({ className: e, children: a, ...t }, r) => /* @__PURE__ */ g(
     "div",
     {
       ref: r,
-      className: h("flex items-center gap-1 w-full", e),
-      "data-slot": "choice-card-header",
+      "data-slot": "choice-card-compare-labels",
+      className: l(
+        "sticky start-0 z-20 grid grid-rows-subgrid items-center justify-items-end bg-canvas [grid-row:1/-1]",
+        e
+      ),
       ...t,
-      children: o
+      children: [
+        /* @__PURE__ */ o("span", { className: "[grid-row:1]", "aria-hidden": "true" }),
+        /* @__PURE__ */ o("span", { className: "[grid-row:2]", "aria-hidden": "true" }),
+        a,
+        /* @__PURE__ */ o("span", { className: "[grid-row:-1]", "aria-hidden": "true" })
+      ]
     }
   )
-), K = p("ChoiceCardDescription", ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
-  "p",
-  {
-    ref: r,
-    className: h("text-xs font-medium leading-4 text-content-secondary", e),
-    ...t,
-    children: o
+), Pe = p(
+  "ChoiceCardCompareLabel",
+  ({ className: e, children: a, ...t }, r) => /* @__PURE__ */ g(
+    "div",
+    {
+      ref: r,
+      "data-slot": "choice-card-compare-label",
+      className: l("flex items-center self-center", e),
+      ...t,
+      children: [
+        /* @__PURE__ */ o("span", { className: "rounded-full border border-canvas-accordion bg-accent px-2 py-1 text-sm font-medium leading-[21px] text-accent-foreground capitalize whitespace-nowrap", children: a }),
+        /* @__PURE__ */ o(
+          "span",
+          {
+            className: "w-[18px] shrink-0 border-t border-dashed border-canvas-accordion",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  )
+), Ee = p(
+  "ChoiceCardCompareLead",
+  ({ className: e, ...a }, t) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: t,
+      "data-slot": "choice-card-compare-lead",
+      className: l("[grid-row:2] min-h-4 min-w-0", e),
+      ...a
+    }
+  )
+), Ge = p(
+  "ChoiceCardCompareRow",
+  ({ className: e, ...a }, t) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: t,
+      "data-slot": "choice-card-compare-row",
+      className: l("flex w-full min-w-0 items-center justify-center self-stretch", e),
+      ...a
+    }
+  )
+), Me = p(
+  "ChoiceCardCompare",
+  ({ className: e, children: a, fit: t = "scroll", ...r }, c) => {
+    const i = n.Children.toArray(a), m = i.find(
+      (s) => n.isValidElement(s) && s.type === te
+    ), h = i.filter((s) => s !== m), C = n.isValidElement(m) && m.props ? n.Children.count(
+      m.props.children
+    ) : 0;
+    return /* @__PURE__ */ o(v.Provider, { value: { inCompare: !0, rows: C, fit: t }, children: /* @__PURE__ */ o(
+      "div",
+      {
+        ref: c,
+        "data-slot": "choice-card-compare",
+        "data-fit": t,
+        className: l(
+          "w-full min-w-0 overscroll-x-contain pt-5 pb-2",
+          t === "auto" ? "overflow-x-auto" : "overflow-x-scroll",
+          "[scrollbar-width:thin] [scrollbar-color:var(--color-stroke)_transparent]",
+          "[&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-stroke",
+          e
+        ),
+        ...r,
+        children: /* @__PURE__ */ g(
+          "div",
+          {
+            className: l(
+              "grid w-full grid-flow-col items-stretch",
+              t === "auto" ? "min-w-0" : "min-w-max"
+            ),
+            style: {
+              gridTemplateColumns: Y(h.length, t),
+              gridTemplateRows: `auto auto repeat(${Math.max(C, 1)}, minmax(3.5rem, auto)) auto`
+            },
+            children: [
+              m,
+              h.map((s, u) => /* @__PURE__ */ g(n.Fragment, { children: [
+                u > 0 && C > 0 ? /* @__PURE__ */ o(ee, { rows: C }) : null,
+                s
+              ] }, u))
+            ]
+          }
+        )
+      }
+    ) });
   }
-));
+);
 export {
-  E as ChoiceCard,
-  A as ChoiceCardContent,
-  K as ChoiceCardDescription,
-  V as ChoiceCardGroup,
-  J as ChoiceCardHeader,
-  q as ChoiceCardIndicator,
-  B as ChoiceCardMedia,
-  F as ChoiceCardTitle,
-  T as useChoiceCardGroup
+  he as ChoiceCard,
+  be as ChoiceCardBackground,
+  Me as ChoiceCardCompare,
+  Pe as ChoiceCardCompareLabel,
+  te as ChoiceCardCompareLabels,
+  Ee as ChoiceCardCompareLead,
+  Ge as ChoiceCardCompareRow,
+  we as ChoiceCardContent,
+  ye as ChoiceCardDescription,
+  K as ChoiceCardFeaturedBackdrop,
+  xe as ChoiceCardFooter,
+  O as ChoiceCardGroup,
+  ke as ChoiceCardHeader,
+  ze as ChoiceCardIndex,
+  fe as ChoiceCardIndicator,
+  ve as ChoiceCardMedia,
+  ge as ChoiceCardRibbon,
+  Ie as ChoiceCardStat,
+  Re as ChoiceCardStats,
+  Se as ChoiceCardStatus,
+  Ne as ChoiceCardTitle,
+  Ce as useChoiceCardGroup,
+  pe as useChoiceCardItem
 };