@alfadocs/ui-kit-debug 0.16.0 → 0.17.1

package/dist/_chunks/benefit-card-DXmrAyfn.js

@@ -0,0 +1,219 @@
+import { jsxs as v, jsx as r } from "react/jsx-runtime";
+import { forwardRef as _, useContext as w, Children as k, createContext as y } from "react";
+import { c as s } from "./index-D2ZczOXr.js";
+const b = [
+  "violet",
+  "purple",
+  "magenta",
+  "blue",
+  "green",
+  "red"
+], m = y(null), C = s("ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-lg)]", {
+  variants: {
+    columns: {
+      1: "ds:md:grid-cols-1",
+      2: "ds:md:grid-cols-2",
+      3: "ds:md:grid-cols-3",
+      4: "ds:md:grid-cols-4"
+    }
+  },
+  defaultVariants: { columns: 3 }
+}), N = s(
+  [
+    "ds:relative ds:rounded-[var(--radius-lg)] ds:overflow-hidden",
+    "ds:flex ds:flex-col ds:h-full",
+    "ds:bg-[var(--card)] ds:text-[var(--card-foreground)]",
+    // Hover lift — the transform is gated through `motion-safe:` so users
+    // with `prefers-reduced-motion: reduce` see only the shadow change.
+    // `--animation-duration` is pinned to 0ms in the accessible theme,
+    // which collapses the transition without dropping the rule entirely.
+    "ds:transition-[transform,box-shadow] ds:duration-[var(--animation-duration)]",
+    "ds:motion-reduce:transition-none",
+    "ds:motion-safe:hover:-translate-y-1"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        elevated: "ds:shadow-[var(--shadow-card)]",
+        outlined: "ds:border ds:border-[color:var(--card-border)]"
+      }
+    },
+    defaultVariants: { variant: "elevated" }
+  }
+), V = s(
+  "ds:absolute ds:inset-inline-0 ds:top-0 ds:h-[4px] ds:pointer-events-none",
+  {
+    variants: {
+      accent: {
+        primary: "ds:bg-linear-to-r ds:from-[var(--primary)] ds:to-[var(--accent)]",
+        accent: "ds:bg-linear-to-r ds:from-[var(--accent)] ds:to-[var(--primary)]",
+        info: "ds:bg-linear-to-r ds:from-[var(--info)] ds:to-[var(--info)]",
+        success: "ds:bg-linear-to-r ds:from-[var(--success)] ds:to-[var(--success)]",
+        warning: "ds:bg-linear-to-r ds:from-[var(--warning)] ds:to-[var(--warning)]",
+        violet: "ds:bg-linear-to-r ds:from-[var(--color-violet-500)] ds:to-[var(--color-purple-500)]",
+        purple: "ds:bg-linear-to-r ds:from-[var(--color-purple-500)] ds:to-[var(--color-magenta-500)]",
+        magenta: "ds:bg-linear-to-r ds:from-[var(--color-magenta-500)] ds:to-[var(--color-violet-500)]",
+        blue: "ds:bg-linear-to-r ds:from-[var(--color-blue-500)] ds:to-[var(--color-green-500)]",
+        green: "ds:bg-linear-to-r ds:from-[var(--color-green-500)] ds:to-[var(--color-red-500)]",
+        red: "ds:bg-linear-to-r ds:from-[var(--color-red-500)] ds:to-[var(--color-blue-500)]"
+      }
+    },
+    defaultVariants: { accent: "primary" }
+  }
+), j = s("", {
+  variants: {
+    accent: {
+      primary: "ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--primary)_18%,transparent)]",
+      accent: "ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--accent)_18%,transparent)]",
+      info: "ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--info)_18%,transparent)]",
+      success: "ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--success)_18%,transparent)]",
+      warning: "ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--warning)_18%,transparent)]",
+      violet: "ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--color-violet-500)_18%,transparent)]",
+      purple: "ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--color-purple-500)_18%,transparent)]",
+      magenta: "ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--color-magenta-500)_18%,transparent)]",
+      blue: "ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--color-blue-500)_18%,transparent)]",
+      green: "ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--color-green-500)_18%,transparent)]",
+      red: "ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--color-red-500)_18%,transparent)]"
+    }
+  },
+  defaultVariants: { accent: "primary" }
+}), B = s(
+  [
+    "ds:inline-flex ds:items-center ds:justify-center",
+    "ds:size-14 ds:rounded-[var(--radius-md)] ds:shrink-0",
+    "ds:[&>svg]:size-7",
+    "ds:shadow-[inset_0_1px_0_color-mix(in_srgb,white_40%,transparent)]"
+  ].join(" "),
+  {
+    variants: {
+      accent: {
+        primary: "ds:text-[color:var(--primary)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--primary)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--accent)_8%,var(--background))]",
+        accent: "ds:text-[color:var(--accent)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--accent)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--primary)_8%,var(--background))]",
+        info: "ds:text-[color:var(--info)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--info)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--info)_8%,var(--background))]",
+        success: "ds:text-[color:var(--success)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--success)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--success)_8%,var(--background))]",
+        warning: "ds:text-[color:var(--warning)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--warning)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--warning)_8%,var(--background))]",
+        violet: "ds:text-[color:var(--color-violet-500)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--color-violet-500)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--color-purple-500)_8%,var(--background))]",
+        purple: "ds:text-[color:var(--color-purple-500)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--color-purple-500)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--color-magenta-500)_8%,var(--background))]",
+        magenta: "ds:text-[color:var(--color-magenta-500)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--color-magenta-500)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--color-violet-500)_8%,var(--background))]",
+        blue: "ds:text-[color:var(--color-blue-500)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--color-blue-500)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--color-green-500)_8%,var(--background))]",
+        green: "ds:text-[color:var(--color-green-500)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--color-green-500)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--color-red-500)_8%,var(--background))]",
+        red: "ds:text-[color:var(--color-red-500)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--color-red-500)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--color-blue-500)_8%,var(--background))]"
+      }
+    },
+    defaultVariants: { accent: "primary" }
+  }
+), R = s(
+  [
+    "type-eyebrow",
+    "ds:rounded-[var(--radius-full)]",
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)]"
+  ].join(" "),
+  {
+    variants: {
+      accent: {
+        primary: "ds:text-[color:var(--color-violet-700)] ds:bg-[color-mix(in_srgb,var(--primary)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--primary)_30%,transparent)]",
+        accent: "ds:text-[color:var(--color-magenta-700)] ds:bg-[color-mix(in_srgb,var(--accent)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--accent)_30%,transparent)]",
+        info: "ds:text-[color:var(--color-blue-700)] ds:bg-[color-mix(in_srgb,var(--info)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--info)_30%,transparent)]",
+        success: "ds:text-[color:var(--color-green-700)] ds:bg-[color-mix(in_srgb,var(--success)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--success)_30%,transparent)]",
+        warning: "ds:text-[color:var(--color-red-700)] ds:bg-[color-mix(in_srgb,var(--warning)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--warning)_30%,transparent)]",
+        violet: "ds:text-[color:var(--color-violet-700)] ds:bg-[color-mix(in_srgb,var(--color-violet-500)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--color-violet-500)_30%,transparent)]",
+        purple: "ds:text-[color:var(--color-purple-700)] ds:bg-[color-mix(in_srgb,var(--color-purple-500)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--color-purple-500)_30%,transparent)]",
+        magenta: "ds:text-[color:var(--color-magenta-700)] ds:bg-[color-mix(in_srgb,var(--color-magenta-500)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--color-magenta-500)_30%,transparent)]",
+        blue: "ds:text-[color:var(--color-blue-700)] ds:bg-[color-mix(in_srgb,var(--color-blue-500)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--color-blue-500)_30%,transparent)]",
+        green: "ds:text-[color:var(--color-green-700)] ds:bg-[color-mix(in_srgb,var(--color-green-500)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--color-green-500)_30%,transparent)]",
+        red: "ds:text-[color:var(--color-red-700)] ds:bg-[color-mix(in_srgb,var(--color-red-500)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--color-red-500)_30%,transparent)]"
+      }
+    },
+    defaultVariants: { accent: "primary" }
+  }
+);
+function S(a, o) {
+  return a !== "auto" ? a : o ? b[o.index % b.length] : "primary";
+}
+const p = _(
+  ({ columns: a = 3, children: o, className: i, ...n }, c) => {
+    const l = k.toArray(o);
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: c,
+        "data-component": "benefit-card-row",
+        className: C({ columns: a, className: i }),
+        ...n,
+        children: l.map((d, t) => /* @__PURE__ */ r(m.Provider, { value: { index: t }, children: d }, t))
+      }
+    );
+  }
+);
+p.displayName = "BenefitCard.Row";
+const x = _(
+  ({
+    step: a,
+    icon: o,
+    title: i,
+    cta: n,
+    variant: c = "elevated",
+    accent: l = "auto",
+    children: d,
+    className: t,
+    ...u
+  }, f) => {
+    const h = w(m), e = S(l, h), g = typeof a == "number";
+    return /* @__PURE__ */ v(
+      "article",
+      {
+        ref: f,
+        "data-component": "benefit-card",
+        "data-accent": e,
+        className: [
+          N({ variant: c }),
+          j({ accent: e }),
+          t
+        ].filter(Boolean).join(" "),
+        ...u,
+        children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-part": "accent-strip",
+              className: V({ accent: e })
+            }
+          ),
+          /* @__PURE__ */ v("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-lg)] ds:flex-1", children: [
+            (o || g) && /* @__PURE__ */ v("div", { className: "ds:flex ds:items-start ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+              o ? /* @__PURE__ */ r(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: B({ accent: e }),
+                  children: o
+                }
+              ) : /* @__PURE__ */ r("span", { "aria-hidden": "true" }),
+              g ? /* @__PURE__ */ r(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-part": "step",
+                  className: R({ accent: e }),
+                  children: String(a).padStart(2, "0")
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ r("h3", { className: "type-title-card ds:text-[var(--foreground)]", children: i }),
+            d ? /* @__PURE__ */ r("div", { className: "type-body ds:text-[var(--muted-foreground)] ds:flex-1", children: d }) : null,
+            n ? /* @__PURE__ */ r("div", { className: "ds:mt-[var(--spacing-xs)]", children: n }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+x.displayName = "BenefitCard";
+const H = Object.assign(x, {
+  Row: p
+});
+export {
+  H as B
+};
+//# sourceMappingURL=benefit-card-DXmrAyfn.js.map

package/dist/_chunks/benefit-card-DXmrAyfn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"benefit-card-DXmrAyfn.js","sources":["../../src/components/benefit-card/benefit-card.tsx"],"sourcesContent":["/* ------------------------------------------------------------------ */\n/* BenefitCard — marketing-surface card for \"benefit row\" / \"how it    */\n/* works\" / \"why choose us\" sections.                                  */\n/*                                                                     */\n/* Visually distinguished from <Card> by:                              */\n/*   1. A 4px accent strip across the top (logical block-start).       */\n/*   2. A tinted icon chip inside the body using `color-mix(in srgb,   */\n/*      var(--accent-token) 12%, var(--background))`.                  */\n/*   3. An optional zero-padded step chip (\"01\", \"02\", ...) in the     */\n/*      top-end corner.                                                */\n/*   4. A hover lift (translateY -2px + --shadow-hover), gated through */\n/*      `--animation-duration` so the accessible theme freezes it.     */\n/*                                                                     */\n/* Compound API:                                                       */\n/*   <BenefitCard.Row columns={3}>                                     */\n/*     <BenefitCard step={1} icon={…} title=\"…\">…</BenefitCard>        */\n/*     ...                                                             */\n/*   </BenefitCard.Row>                                                */\n/*                                                                     */\n/* `accent=\"auto\"` rotates through the brand palette by row index      */\n/* (violet → purple → magenta → blue → green → red, then wraps).       */\n/* Outside a Row, `auto` falls back to `primary`.                      */\n/* ------------------------------------------------------------------ */\n\nimport {\n  Children,\n  createContext,\n  forwardRef,\n  useContext,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva } from 'class-variance-authority';\n\n/* ------------------------------------------------------------------ */\n/* Accent wheel — used by `accent=\"auto\"` inside a Row.                */\n/* ------------------------------------------------------------------ */\n\nconst ACCENT_WHEEL = [\n  'violet',\n  'purple',\n  'magenta',\n  'blue',\n  'green',\n  'red',\n] as const;\n\ntype WheelAccent = (typeof ACCENT_WHEEL)[number];\ntype SemanticAccent = 'primary' | 'accent' | 'info' | 'success' | 'warning';\ntype ResolvedAccent = SemanticAccent | WheelAccent;\ntype AccentProp = SemanticAccent | WheelAccent | 'auto';\n\n/* ------------------------------------------------------------------ */\n/* Row context                                                          */\n/* ------------------------------------------------------------------ */\n\ninterface RowContextValue {\n  index: number;\n}\n\nconst RowContext = createContext<RowContextValue | null>(null);\n\n/* ------------------------------------------------------------------ */\n/* CVA — Row grid                                                       */\n/* ------------------------------------------------------------------ */\n\nconst rowVariants = cva('ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-lg)]', {\n  variants: {\n    columns: {\n      1: 'ds:md:grid-cols-1',\n      2: 'ds:md:grid-cols-2',\n      3: 'ds:md:grid-cols-3',\n      4: 'ds:md:grid-cols-4',\n    },\n  },\n  defaultVariants: { columns: 3 },\n});\n\n/* ------------------------------------------------------------------ */\n/* CVA — BenefitCard root                                               */\n/*                                                                      */\n/* The top 4px accent strip uses `border-block-start` (logical) so it   */\n/* sits at the inline-start-block-start corner regardless of writing    */\n/* direction. Border colour is set per-accent in the `accent` variant.  */\n/* ------------------------------------------------------------------ */\n\n// Card chrome — no per-accent variant; the gradient top strip is rendered\n// as a separate sibling element so it can use a linear-gradient. The\n// hover shadow's tint comes from `hoverShadowVariants` on the same root.\nconst cardVariants = cva(\n  [\n    'ds:relative ds:rounded-[var(--radius-lg)] ds:overflow-hidden',\n    'ds:flex ds:flex-col ds:h-full',\n    'ds:bg-[var(--card)] ds:text-[var(--card-foreground)]',\n    // Hover lift — the transform is gated through `motion-safe:` so users\n    // with `prefers-reduced-motion: reduce` see only the shadow change.\n    // `--animation-duration` is pinned to 0ms in the accessible theme,\n    // which collapses the transition without dropping the rule entirely.\n    'ds:transition-[transform,box-shadow] ds:duration-[var(--animation-duration)]',\n    'ds:motion-reduce:transition-none',\n    'ds:motion-safe:hover:-translate-y-1',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        elevated: 'ds:shadow-[var(--shadow-card)]',\n        outlined: 'ds:border ds:border-[color:var(--card-border)]',\n      },\n    },\n    defaultVariants: { variant: 'elevated' },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Gradient top strip — Treatment B (Vivid).                            */\n/*                                                                      */\n/* The strip is an absolutely-positioned `<span>` so its background can */\n/* be a `linear-gradient`. For brand-wheel accents (violet → purple →   */\n/* magenta → blue → green → red) the gradient pairs with the next       */\n/* wheel token. For semantic accents the gradient is a solid pair        */\n/* (start=end) — same visual weight, less colour drama.                 */\n/* ------------------------------------------------------------------ */\n\nconst topStripVariants = cva(\n  'ds:absolute ds:inset-inline-0 ds:top-0 ds:h-[4px] ds:pointer-events-none',\n  {\n    variants: {\n      accent: {\n        primary:\n          'ds:bg-linear-to-r ds:from-[var(--primary)] ds:to-[var(--accent)]',\n        accent:\n          'ds:bg-linear-to-r ds:from-[var(--accent)] ds:to-[var(--primary)]',\n        info: 'ds:bg-linear-to-r ds:from-[var(--info)] ds:to-[var(--info)]',\n        success:\n          'ds:bg-linear-to-r ds:from-[var(--success)] ds:to-[var(--success)]',\n        warning:\n          'ds:bg-linear-to-r ds:from-[var(--warning)] ds:to-[var(--warning)]',\n        violet:\n          'ds:bg-linear-to-r ds:from-[var(--color-violet-500)] ds:to-[var(--color-purple-500)]',\n        purple:\n          'ds:bg-linear-to-r ds:from-[var(--color-purple-500)] ds:to-[var(--color-magenta-500)]',\n        magenta:\n          'ds:bg-linear-to-r ds:from-[var(--color-magenta-500)] ds:to-[var(--color-violet-500)]',\n        blue: 'ds:bg-linear-to-r ds:from-[var(--color-blue-500)] ds:to-[var(--color-green-500)]',\n        green:\n          'ds:bg-linear-to-r ds:from-[var(--color-green-500)] ds:to-[var(--color-red-500)]',\n        red: 'ds:bg-linear-to-r ds:from-[var(--color-red-500)] ds:to-[var(--color-blue-500)]',\n      },\n    },\n    defaultVariants: { accent: 'primary' },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Hover shadow — coloured halo on hover, tinted by accent.             */\n/* ------------------------------------------------------------------ */\n\nconst hoverShadowVariants = cva('', {\n  variants: {\n    accent: {\n      primary:\n        'ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--primary)_18%,transparent)]',\n      accent:\n        'ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--accent)_18%,transparent)]',\n      info: 'ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--info)_18%,transparent)]',\n      success:\n        'ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--success)_18%,transparent)]',\n      warning:\n        'ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--warning)_18%,transparent)]',\n      violet:\n        'ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--color-violet-500)_18%,transparent)]',\n      purple:\n        'ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--color-purple-500)_18%,transparent)]',\n      magenta:\n        'ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--color-magenta-500)_18%,transparent)]',\n      blue: 'ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--color-blue-500)_18%,transparent)]',\n      green:\n        'ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--color-green-500)_18%,transparent)]',\n      red: 'ds:hover:shadow-[0_20px_40px_color-mix(in_srgb,var(--color-red-500)_18%,transparent)]',\n    },\n  },\n  defaultVariants: { accent: 'primary' },\n});\n\n/* ------------------------------------------------------------------ */\n/* CVA — icon chip                                                      */\n/*                                                                      */\n/* The chip background uses `color-mix(in srgb, <token> 12%,            */\n/* var(--background))` so it stays legible across themes. The Tailwind  */\n/* JIT requires underscores in arbitrary-value classes wherever         */\n/* whitespace would otherwise terminate the class.                      */\n/* ------------------------------------------------------------------ */\n\n// Icon chip — gradient tint (Treatment B). The chip pairs the resolved\n// accent with the \"next\" wheel/semantic token so the bg reads as a soft\n// diagonal blend instead of a flat tint, picking up the energy of the\n// gradient top strip. An inset highlight (`inset 0 1px 0` half-white)\n// adds a subtle glass edge.\nconst iconChipVariants = cva(\n  [\n    'ds:inline-flex ds:items-center ds:justify-center',\n    'ds:size-14 ds:rounded-[var(--radius-md)] ds:shrink-0',\n    'ds:[&>svg]:size-7',\n    'ds:shadow-[inset_0_1px_0_color-mix(in_srgb,white_40%,transparent)]',\n  ].join(' '),\n  {\n    variants: {\n      accent: {\n        primary:\n          'ds:text-[color:var(--primary)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--primary)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--accent)_8%,var(--background))]',\n        accent:\n          'ds:text-[color:var(--accent)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--accent)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--primary)_8%,var(--background))]',\n        info: 'ds:text-[color:var(--info)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--info)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--info)_8%,var(--background))]',\n        success:\n          'ds:text-[color:var(--success)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--success)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--success)_8%,var(--background))]',\n        warning:\n          'ds:text-[color:var(--warning)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--warning)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--warning)_8%,var(--background))]',\n        violet:\n          'ds:text-[color:var(--color-violet-500)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--color-violet-500)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--color-purple-500)_8%,var(--background))]',\n        purple:\n          'ds:text-[color:var(--color-purple-500)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--color-purple-500)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--color-magenta-500)_8%,var(--background))]',\n        magenta:\n          'ds:text-[color:var(--color-magenta-500)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--color-magenta-500)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--color-violet-500)_8%,var(--background))]',\n        blue: 'ds:text-[color:var(--color-blue-500)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--color-blue-500)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--color-green-500)_8%,var(--background))]',\n        green:\n          'ds:text-[color:var(--color-green-500)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--color-green-500)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--color-red-500)_8%,var(--background))]',\n        red: 'ds:text-[color:var(--color-red-500)] ds:bg-linear-to-br ds:from-[color-mix(in_srgb,var(--color-red-500)_22%,var(--background))] ds:to-[color-mix(in_srgb,var(--color-blue-500)_8%,var(--background))]',\n      },\n    },\n    defaultVariants: { accent: 'primary' },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Step chip — brand-tinted with a thin matching border.                */\n/* ------------------------------------------------------------------ */\n\n// Text colour uses the -700 ramp step rather than -500 so the chip's\n// small `01` label clears WCAG AA (≥4.5:1) against its 12 %-tinted bg.\n// The brand -500 fails on the tinted surface (~4.07:1). For the\n// semantic accents we pin to the same brand-700 the kit resolves them\n// to (primary→violet-700, accent→magenta-700, etc.) so each variant\n// reads AA in light theme. In dark theme the tokens auto-invert and\n// the dark-bg-against-light-tint relationship stays comfortably AA.\nconst stepChipVariants = cva(\n  [\n    'type-eyebrow',\n    'ds:rounded-[var(--radius-full)]',\n    'ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)]',\n  ].join(' '),\n  {\n    variants: {\n      accent: {\n        primary:\n          'ds:text-[color:var(--color-violet-700)] ds:bg-[color-mix(in_srgb,var(--primary)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--primary)_30%,transparent)]',\n        accent:\n          'ds:text-[color:var(--color-magenta-700)] ds:bg-[color-mix(in_srgb,var(--accent)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--accent)_30%,transparent)]',\n        info: 'ds:text-[color:var(--color-blue-700)] ds:bg-[color-mix(in_srgb,var(--info)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--info)_30%,transparent)]',\n        success:\n          'ds:text-[color:var(--color-green-700)] ds:bg-[color-mix(in_srgb,var(--success)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--success)_30%,transparent)]',\n        warning:\n          'ds:text-[color:var(--color-red-700)] ds:bg-[color-mix(in_srgb,var(--warning)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--warning)_30%,transparent)]',\n        violet:\n          'ds:text-[color:var(--color-violet-700)] ds:bg-[color-mix(in_srgb,var(--color-violet-500)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--color-violet-500)_30%,transparent)]',\n        purple:\n          'ds:text-[color:var(--color-purple-700)] ds:bg-[color-mix(in_srgb,var(--color-purple-500)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--color-purple-500)_30%,transparent)]',\n        magenta:\n          'ds:text-[color:var(--color-magenta-700)] ds:bg-[color-mix(in_srgb,var(--color-magenta-500)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--color-magenta-500)_30%,transparent)]',\n        blue: 'ds:text-[color:var(--color-blue-700)] ds:bg-[color-mix(in_srgb,var(--color-blue-500)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--color-blue-500)_30%,transparent)]',\n        green:\n          'ds:text-[color:var(--color-green-700)] ds:bg-[color-mix(in_srgb,var(--color-green-500)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--color-green-500)_30%,transparent)]',\n        red: 'ds:text-[color:var(--color-red-700)] ds:bg-[color-mix(in_srgb,var(--color-red-500)_12%,var(--background))] ds:[border:1px_solid_color-mix(in_srgb,var(--color-red-500)_30%,transparent)]',\n      },\n    },\n    defaultVariants: { accent: 'primary' },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Types                                                                */\n/* ------------------------------------------------------------------ */\n\nexport interface BenefitCardProps extends Omit<\n  HTMLAttributes<HTMLElement>,\n  'title'\n> {\n  /** Step number; rendered as a zero-padded chip (\"01\", \"02\", …). Omit to hide. */\n  step?: number;\n  /** Icon node — usually an `<svg>` 24-32px. Rendered inside a tinted square chip. */\n  icon?: ReactNode;\n  /** Card heading. Always rendered inside an `<h3>` — pass only inline / phrasing content. */\n  title: ReactNode;\n  /** Optional CTA — usually a `<Button intent=\"link\">` or kit `<Link>`. Rendered at the block-end. */\n  cta?: ReactNode;\n  /** Surface treatment. */\n  variant?: 'elevated' | 'outlined';\n  /**\n   * Accent colour. `auto` (default inside a `<BenefitCard.Row>`) rotates through the brand\n   * palette by row index: violet → purple → magenta → blue → green → red, then wraps.\n   * Outside a Row, `auto` falls back to `primary`.\n   */\n  accent?: AccentProp;\n  /** Body content (description / list / inline copy). */\n  children?: ReactNode;\n}\n\nexport interface BenefitCardRowProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Number of columns at md+; defaults to 3. Collapses to 1 at < md. */\n  columns?: 1 | 2 | 3 | 4;\n  children?: ReactNode;\n}\n\n/* ------------------------------------------------------------------ */\n/* Accent resolution                                                    */\n/* ------------------------------------------------------------------ */\n\nfunction resolveAccent(\n  accent: AccentProp,\n  rowCtx: RowContextValue | null,\n): ResolvedAccent {\n  if (accent !== 'auto') return accent;\n  if (rowCtx) return ACCENT_WHEEL[rowCtx.index % ACCENT_WHEEL.length];\n  return 'primary';\n}\n\n/* ------------------------------------------------------------------ */\n/* Row                                                                  */\n/*                                                                      */\n/* Wraps every child in a `RowContext.Provider` so the child can look   */\n/* up its index and pick a wheel colour when `accent=\"auto\"`.           */\n/* ------------------------------------------------------------------ */\n\nconst BenefitCardRow = forwardRef<HTMLDivElement, BenefitCardRowProps>(\n  ({ columns = 3, children, className, ...rest }, ref) => {\n    const items = Children.toArray(children);\n    return (\n      <div\n        ref={ref}\n        data-component=\"benefit-card-row\"\n        className={rowVariants({ columns, className })}\n        {...rest}\n      >\n        {items.map((child, index) => (\n          <RowContext.Provider key={index} value={{ index }}>\n            {child}\n          </RowContext.Provider>\n        ))}\n      </div>\n    );\n  },\n);\nBenefitCardRow.displayName = 'BenefitCard.Row';\n\n/* ------------------------------------------------------------------ */\n/* Root                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst BenefitCardRoot = forwardRef<HTMLElement, BenefitCardProps>(\n  (\n    {\n      step,\n      icon,\n      title,\n      cta,\n      variant = 'elevated',\n      accent = 'auto',\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const rowCtx = useContext(RowContext);\n    const resolved = resolveAccent(accent, rowCtx);\n    const hasStep = typeof step === 'number';\n\n    return (\n      <article\n        ref={ref}\n        data-component=\"benefit-card\"\n        data-accent={resolved}\n        className={[\n          cardVariants({ variant }),\n          hoverShadowVariants({ accent: resolved }),\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...rest}\n      >\n        {/* Gradient top strip — Treatment B visual signature. Sits above\n            the card body via absolute positioning. */}\n        <span\n          aria-hidden=\"true\"\n          data-part=\"accent-strip\"\n          className={topStripVariants({ accent: resolved })}\n        />\n        <div className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-lg)] ds:flex-1\">\n          {(icon || hasStep) && (\n            <div className=\"ds:flex ds:items-start ds:justify-between ds:gap-[var(--spacing-sm)]\">\n              {icon ? (\n                <span\n                  aria-hidden=\"true\"\n                  className={iconChipVariants({ accent: resolved })}\n                >\n                  {icon}\n                </span>\n              ) : (\n                <span aria-hidden=\"true\" />\n              )}\n              {hasStep ? (\n                <span\n                  aria-hidden=\"true\"\n                  data-part=\"step\"\n                  className={stepChipVariants({ accent: resolved })}\n                >\n                  {String(step).padStart(2, '0')}\n                </span>\n              ) : null}\n            </div>\n          )}\n          <h3 className=\"type-title-card ds:text-[var(--foreground)]\">\n            {title}\n          </h3>\n          {children ? (\n            <div className=\"type-body ds:text-[var(--muted-foreground)] ds:flex-1\">\n              {children}\n            </div>\n          ) : null}\n          {cta ? <div className=\"ds:mt-[var(--spacing-xs)]\">{cta}</div> : null}\n        </div>\n      </article>\n    );\n  },\n);\nBenefitCardRoot.displayName = 'BenefitCard';\n\n/* ------------------------------------------------------------------ */\n/* Compound export                                                      */\n/* ------------------------------------------------------------------ */\n\nexport const BenefitCard = Object.assign(BenefitCardRoot, {\n  Row: BenefitCardRow,\n});\n"],"names":["ACCENT_WHEEL","RowContext","createContext","rowVariants","cva","cardVariants","topStripVariants","hoverShadowVariants","iconChipVariants","stepChipVariants","resolveAccent","accent","rowCtx","BenefitCardRow","forwardRef","columns","children","className","rest","ref","items","Children","jsx","child","index","BenefitCardRoot","step","icon","title","cta","variant","useContext","resolved","hasStep","jsxs","BenefitCard"],"mappings":"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"}

package/dist/_chunks/{carousel.agent-OTn-kMQg.js → carousel.agent-Xuw9LPZN.js}

@@ -1440,15 +1440,22 @@ const ae = xt(
             i,
             n && U > 1 ? /* @__PURE__ */ V(dn, {}) : null
           ] }) }) : null,
-          /* @__PURE__ */ V("div", { ref: f, className: "ds:overflow-hidden", children: /* @__PURE__ */ V(
+          /* @__PURE__ */ V(
             "div",
             {
-              id: d,
-              role: "presentation",
-              className: "ds:flex ds:gap-[var(--spacing-md)]",
-              children: te.map(K, (k, O) => ee(k) ? /* @__PURE__ */ V(fn, { index: O, total: U, children: k }) : k)
+              ref: f,
+              className: "ds:overflow-hidden ds:py-[var(--spacing-xs)] ds:-my-[var(--spacing-xs)]",
+              children: /* @__PURE__ */ V(
+                "div",
+                {
+                  id: d,
+                  role: "presentation",
+                  className: "ds:flex ds:gap-[var(--spacing-md)]",
+                  children: te.map(K, (k, O) => ee(k) ? /* @__PURE__ */ V(fn, { index: O, total: U, children: k }) : k)
+                }
+              )
             }
-          ) }),
+          ),
           Q ? /* @__PURE__ */ V(pn, {}) : null,
           /* @__PURE__ */ V(
             "div",
@@ -1666,4 +1673,4 @@ export {
   yn as C,
   In as c
 };
-//# sourceMappingURL=carousel.agent-OTn-kMQg.js.map
+//# sourceMappingURL=carousel.agent-Xuw9LPZN.js.map