@alfadocs/ui-kit-debug 0.31.4 → 0.31.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfadocs/ui-kit-debug",
-  "version": "0.31.4",
+  "version": "0.31.6",
   "type": "module",
   "description": "AlfaDocs shared design system — tokens, components, patterns, and translations for platform, booking, and alfascribe. (debug build — identical runtime to @alfadocs/ui-kit, ships source maps for symbolication).",
   "license": "BUSL-1.1",
@@ -295,6 +295,10 @@
       "types": "./dist/components/number-input/index.d.ts",
       "import": "./dist/components/number-input/index.js"
     },
+    "./operator-hero": {
+      "types": "./dist/components/operator-hero/index.d.ts",
+      "import": "./dist/components/operator-hero/index.js"
+    },
     "./otp-input": {
       "types": "./dist/components/otp-input/index.d.ts",
       "import": "./dist/components/otp-input/index.js"
@@ -311,6 +315,10 @@
       "types": "./dist/components/patient-search/index.d.ts",
       "import": "./dist/components/patient-search/index.js"
     },
+    "./practice-profile-card": {
+      "types": "./dist/components/practice-profile-card/index.d.ts",
+      "import": "./dist/components/practice-profile-card/index.js"
+    },
     "./practice-results": {
       "types": "./dist/components/practice-results/index.d.ts",
       "import": "./dist/components/practice-results/index.js"

package/dist/_chunks/badge-CptERaHx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge-CptERaHx.js","sources":["../../src/components/badge/badge.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Tooltip } from '../tooltip';\n\n/* ------------------------------------------------------------------ */\n/* CVA — badge root                                                     */\n/* ------------------------------------------------------------------ */\n\nconst badgeVariants = cva(\n  [\n    'ds:inline-flex ds:items-center ds:gap-1',\n    // Typography comes from the eyebrow role: Medium 500 + uppercase + expanded tracking.\n    // CVA size variants below override just `--type-eyebrow-size` so weight/transform/\n    // tracking/line-height stay role-owned — same chip-family pattern as Tag.\n    'type-eyebrow',\n    'ds:whitespace-nowrap',\n    'ds:focus-visible:outline-none',\n    'ds:focus-visible:ring-[length:var(--focus-ring-width)]',\n    'ds:focus-visible:ring-[color:var(--ring)]',\n    'ds:focus-visible:ring-offset-[length:var(--focus-ring-offset)]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        neutral: 'ds:bg-muted/20 ds:text-muted-foreground',\n        info: 'ds:bg-info/15 ds:text-[var(--info-foreground)]',\n        success: 'ds:bg-success/15 ds:text-[var(--success-foreground)]',\n        warning: 'ds:bg-warning/15 ds:text-[var(--warning-foreground)]',\n        error: 'ds:bg-destructive/15 ds:text-[var(--error-foreground)]',\n      },\n      size: {\n        sm: 'ds:h-4 ds:ps-1 ds:pe-1 ds:[--type-eyebrow-size:var(--font-size-2xs)]',\n        md: 'ds:h-5 ds:ps-1.5 ds:pe-1.5 ds:[--type-eyebrow-size:var(--font-size-2xs)]',\n        lg: 'ds:h-6 ds:ps-2 ds:pe-2 ds:[--type-eyebrow-size:var(--font-size-xs)]',\n      },\n      shape: {\n        pill: 'ds:rounded-[var(--radius-full)]',\n        rectangular: 'ds:rounded-[var(--radius-sm)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'md',\n      shape: 'pill',\n    },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* CVA — leading dot                                                    */\n/* ------------------------------------------------------------------ */\n\nconst dotVariants = cva(\n  'ds:text-[length:var(--font-size-dot)] ds:leading-none ds:shrink-0',\n  {\n    variants: {\n      variant: {\n        neutral: 'ds:text-muted-foreground',\n        info: 'ds:text-info',\n        success: 'ds:text-success',\n        warning: 'ds:text-warning',\n        error: 'ds:text-destructive',\n      },\n    },\n    defaultVariants: { variant: 'neutral' },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* CVA — leading icon wrapper                                           */\n/* ------------------------------------------------------------------ */\n\nconst iconWrapperVariants = cva('ds:shrink-0 ds:[&>svg]:block', {\n  variants: {\n    size: {\n      // Icons shrink with the compact Badge scale: sm badge is 16 px tall, so\n      // a 10 px glyph leaves room for the 1 px internal padding.\n      sm: 'ds:[&>svg]:size-2.5',\n      md: 'ds:[&>svg]:size-3',\n      lg: 'ds:[&>svg]:size-3.5',\n    },\n  },\n  defaultVariants: { size: 'md' },\n});\n\n/* ------------------------------------------------------------------ */\n/* BadgeProps                                                           */\n/* ------------------------------------------------------------------ */\n\nexport interface BadgeProps\n  extends\n    React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {\n  /** Leading icon — renders before the label */\n  leading?: ReactNode;\n  /** Show a leading dot indicator (● shape) for colour-blind accessibility */\n  withDot?: boolean;\n  /** Truncate long text with ellipsis + tooltip showing full text */\n  truncate?: boolean;\n  /** For icon-only badges — provides the accessible name */\n  'aria-label'?: string;\n}\n\n/* ------------------------------------------------------------------ */\n/* Badge                                                                */\n/* ------------------------------------------------------------------ */\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      variant = 'neutral',\n      size = 'md',\n      shape = 'pill',\n      leading,\n      withDot = false,\n      truncate = false,\n      className,\n      children,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n\n    const isIconOnly = !children && !!ariaLabel;\n    const isCount = typeof children === 'number';\n\n    const badge = (\n      <span\n        ref={ref}\n        className={badgeVariants({ variant, size, shape, className })}\n        data-component=\"badge\"\n        role={isIconOnly ? 'img' : undefined}\n        aria-label={isIconOnly ? ariaLabel : undefined}\n        {...props}\n      >\n        {withDot && (\n          <span aria-hidden=\"true\" className={dotVariants({ variant })}>\n            ●\n          </span>\n        )}\n        {leading && (\n          <span aria-hidden=\"true\" className={iconWrapperVariants({ size })}>\n            {leading}\n          </span>\n        )}\n        {!isIconOnly &&\n          (isCount ? (\n            <>\n              <span aria-hidden=\"true\">{children}</span>\n              <span className=\"ds:sr-only\">\n                {t('badge.notifications', { count: children })}\n              </span>\n            </>\n          ) : truncate ? (\n            <span className=\"ds:max-w-[var(--badge-truncate-max-width)] ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap\">\n              {children}\n            </span>\n          ) : (\n            children\n          ))}\n      </span>\n    );\n\n    if (truncate && typeof children === 'string') {\n      return <Tooltip label={children}>{badge}</Tooltip>;\n    }\n\n    return badge;\n  },\n);\n\nBadge.displayName = 'Badge';\n"],"names":["badgeVariants","cva","dotVariants","iconWrapperVariants","Badge","forwardRef","variant","size","shape","leading","withDot","truncate","className","children","ariaLabel","props","ref","t","useTranslation","isIconOnly","isCount","badge","jsxs","jsx","Fragment","Tooltip"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"benefit-card-CLPNpiQE.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        // The accessible theme demands a visible boundary at ≥3:1 — shadow\n        // alone doesn't clear that against the light page wash. Always\n        // emit a `--card-border` outline; light/dark themes use the\n        // soft 14% / 32% values (subtle but present) while accessible\n        // bumps to 50% black / 50% white for the strict-AA edge weight.\n        elevated:\n          'ds:shadow-[var(--shadow-card)] ds:border ds:border-[color:var(--card-border)]',\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,var(--foreground)_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 tint surface darkens so\n// the ramp-700 text turns dark-on-dark and fails AA — we branch via\n// `[.theme-dark_&]:` to swap to the -200 ramp step (light text on the\n// dark tint), restoring comfortable contrast across both modes.\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    // Accessible theme: the per-variant `30% primary` border is too\n    // washed out for the ≥3:1 non-text contrast bar. Swap to\n    // currentColor (which resolves to the brand-700 / -200 text colour\n    // of the variant — same hue, fully opaque). Descendant selector\n    // outweighs the per-variant declaration via specificity.\n    'ds:[.theme-accessible_&]:[border-color:currentColor]',\n  ].join(' '),\n  {\n    variants: {\n      accent: {\n        primary:\n          'ds:text-[color:var(--color-violet-700)] ds:[.theme-dark_&]:text-[color:var(--color-violet-200)] 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:[.theme-dark_&]:text-[color:var(--color-magenta-200)] 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:[.theme-dark_&]:text-[color:var(--color-blue-200)] 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:[.theme-dark_&]:text-[color:var(--color-green-200)] 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:[.theme-dark_&]:text-[color:var(--color-red-200)] 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:[.theme-dark_&]:text-[color:var(--color-violet-200)] 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:[.theme-dark_&]:text-[color:var(--color-purple-200)] 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:[.theme-dark_&]:text-[color:var(--color-magenta-200)] 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:[.theme-dark_&]:text-[color:var(--color-blue-200)] 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:[.theme-dark_&]:text-[color:var(--color-green-200)] 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:[.theme-dark_&]:text-[color:var(--color-red-200)] 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/card-DKTMLVrw.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"card-DKTMLVrw.js","sources":["../../src/components/card/card.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\n/* ------------------------------------------------------------------ */\n/* Context                                                             */\n/* ------------------------------------------------------------------ */\n\ninterface CardContextValue {\n  headerId: string;\n  interactive: boolean;\n  registerHeader: () => void;\n}\n\nconst CardContext = createContext<CardContextValue>({\n  headerId: '',\n  interactive: false,\n  registerHeader: () => {},\n});\n\n/* ------------------------------------------------------------------ */\n/* Variants                                                            */\n/* ------------------------------------------------------------------ */\n\nconst cardVariants = cva(\n  [\n    'ds:rounded-[var(--radius-lg)] ds:text-[var(--card-foreground)]',\n    'ds:overflow-hidden',\n    'ds:flex ds:flex-col',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default:\n          'ds:bg-[var(--card)] ds:border ds:border-[color:var(--card-border)]',\n        outlined:\n          'ds:bg-[var(--card)] ds:border ds:border-[color:var(--border)]',\n        elevated:\n          'ds:bg-[var(--card)] ds:border ds:border-[color:var(--card-border)] ds:shadow-[var(--shadow-card)]',\n      },\n      interactive: {\n        true: [\n          'ds:cursor-pointer',\n          'ds:transition-shadow ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n          'ds:hover:shadow-[var(--shadow-hover)]',\n          'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n          'ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n          'ds:min-h-[var(--min-target-size)]',\n        ].join(' '),\n        false: '',\n      },\n      // `stretch: true` fills the parent layout cell (grid / flex) so a\n      // row of Cards ends up with matching heights. Combined with the\n      // `flex-1` on `Card.Body`, the footer naturally pins to the bottom.\n      stretch: {\n        true: 'ds:h-full ds:self-stretch',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      interactive: false,\n      stretch: false,\n    },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport interface CardProps\n  extends\n    Omit<HTMLAttributes<HTMLElement>, 'role'>,\n    VariantProps<typeof cardVariants> {\n  variant?: 'default' | 'outlined' | 'elevated';\n  interactive?: boolean;\n  /**\n   * Stretch the Card to fill its parent layout cell. Use on every Card in\n   * a dashboard row so siblings end up with matching heights, and the\n   * `Card.Body` + `Card.Footer` flex naturally pin the footer to the\n   * bottom. Grid cells already `align-items: stretch` by default, but an\n   * explicit `h-full` keeps the behaviour robust under flex parents too.\n   */\n  stretch?: boolean;\n  asChild?: boolean;\n  children: ReactNode;\n}\n\n/* ------------------------------------------------------------------ */\n/* Root                                                                */\n/* ------------------------------------------------------------------ */\n\nconst CardRoot = forwardRef<HTMLElement, CardProps>(\n  (\n    {\n      variant = 'default',\n      interactive = false,\n      stretch = false,\n      asChild = false,\n      className,\n      children,\n      onClick,\n      onKeyDown,\n      ...props\n    },\n    ref,\n  ) => {\n    const headerId = useId();\n    const [hasHeader, setHasHeader] = useState(false);\n    const registerHeader = useCallback(() => setHasHeader(true), []);\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {\n      if (interactive && (e.key === 'Enter' || e.key === ' ')) {\n        e.preventDefault();\n        (e.currentTarget as HTMLElement).click();\n      }\n      onKeyDown?.(e);\n    };\n\n    // When asChild=true the consumer provides its own element (<a>, <button>)\n    // which already carries the correct role and tabIndex — don't override them.\n    const interactiveProps = interactive\n      ? {\n          ...(asChild ? {} : { role: 'button' as const, tabIndex: 0 }),\n          onKeyDown: handleKeyDown,\n          onClick,\n        }\n      : { onClick };\n\n    // `<article>` is the default semantic root, but axe's\n    // `aria-allowed-role` rule forbids `role=\"button\"` on `<article>`.\n    // When the card is interactive we switch to `<div>` so the explicit\n    // role is valid. Consumers can still pass `asChild` to provide their\n    // own anchor / button element when they want stronger semantics.\n    const Comp = asChild ? Slot : interactive ? 'div' : 'article';\n\n    return (\n      <CardContext.Provider\n        value={{ headerId, interactive: interactive ?? false, registerHeader }}\n      >\n        <Comp\n          ref={ref as React.Ref<HTMLDivElement>}\n          aria-labelledby={hasHeader ? headerId : undefined}\n          data-component=\"card\"\n          className={cardVariants({\n            variant,\n            interactive: interactive ?? false,\n            stretch: stretch ?? false,\n            className,\n          })}\n          {...interactiveProps}\n          {...props}\n        >\n          {children}\n        </Comp>\n      </CardContext.Provider>\n    );\n  },\n);\nCardRoot.displayName = 'Card';\n\n/* ------------------------------------------------------------------ */\n/* Header                                                              */\n/* ------------------------------------------------------------------ */\n\nconst CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const { headerId, registerHeader } = useContext(CardContext);\n\n    // Notify root that a header is present so aria-labelledby is applied.\n    const callbackRef = useCallback(\n      (node: HTMLDivElement | null) => {\n        if (node) registerHeader();\n        if (typeof ref === 'function') ref(node);\n        else if (ref)\n          (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      },\n      [ref, registerHeader],\n    );\n\n    return (\n      <div\n        ref={callbackRef}\n        id={headerId}\n        className={[\n          'ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-md)] ds:pb-0',\n          // Wrap policy for header text content. Scoped to DIRECT children\n          // (h1–h6 / p / div) and using `break-word` instead of `anywhere`\n          // so natural-language titles wrap at word boundaries first; only\n          // genuinely unbreakable strings (URLs, hashes) break mid-word\n          // when they'd otherwise overflow. The previous `[&_*]:` cascade\n          // applied `overflow-wrap: anywhere` to every descendant, which\n          // chopped natural-language labels mid-character inside narrow\n          // contexts (DescriptionList rows in a Carousel slide).\n          'ds:[&>*]:break-normal ds:[&>*]:[overflow-wrap:break-word]',\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      />\n    );\n  },\n);\nCardHeader.displayName = 'Card.Header';\n\n/* ------------------------------------------------------------------ */\n/* Media                                                               */\n/* ------------------------------------------------------------------ */\n\nconst CardMedia = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={[\n        'ds:overflow-hidden ds:[&_img]:w-full ds:[&_img]:h-auto ds:[&_img]:[object-fit:cover] ds:[&_video]:w-full',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    />\n  ),\n);\nCardMedia.displayName = 'Card.Media';\n\n/* ------------------------------------------------------------------ */\n/* Body                                                                */\n/* ------------------------------------------------------------------ */\n\nconst CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={['ds:p-[var(--spacing-md)] ds:flex-1 ds:text-start', className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    />\n  ),\n);\nCardBody.displayName = 'Card.Body';\n\n/* ------------------------------------------------------------------ */\n/* Footer                                                              */\n/* ------------------------------------------------------------------ */\n\nconst CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={[\n        'ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-md)] ds:pt-0',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    />\n  ),\n);\nCardFooter.displayName = 'Card.Footer';\n\n/* ------------------------------------------------------------------ */\n/* Compound export                                                     */\n/* ------------------------------------------------------------------ */\n\nexport const Card = Object.assign(CardRoot, {\n  Header: CardHeader,\n  Media: CardMedia,\n  Body: CardBody,\n  Footer: CardFooter,\n});\n\nexport type { VariantProps as CardVariantProps };\n"],"names":["CardContext","createContext","cardVariants","cva","CardRoot","forwardRef","variant","interactive","stretch","asChild","className","children","onClick","onKeyDown","props","ref","headerId","useId","hasHeader","setHasHeader","useState","registerHeader","useCallback","interactiveProps","e","Comp","Slot","jsx","CardHeader","useContext","callbackRef","node","CardMedia","CardBody","CardFooter","Card"],"mappings":"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"}

package/dist/_chunks/key-value-pair-C8DaR3Xs.js

@@ -1,98 +0,0 @@
-import { jsxs as t, Fragment as p, jsx as s } from "react/jsx-runtime";
-import { forwardRef as z, useState as f, useCallback as b } from "react";
-import { c as P } from "./index-D2ZczOXr.js";
-import { useTranslation as I } from "react-i18next";
-import { I as T } from "./icon-button-CKEOrN37.js";
-import { C as j } from "./check-DPdL_Sm7.js";
-import { C as K } from "./copy-B00HK7tj.js";
-const A = P("ds:flex", {
-  variants: {
-    layout: {
-      horizontal: "ds:flex-row ds:items-center ds:gap-[var(--spacing-sm)]",
-      vertical: "ds:flex-col ds:gap-[var(--spacing-xs)]"
-    },
-    /** Internal — flips the root to a horizontal flex when an icon
-        is present so the icon can sit at the leading edge of both
-        horizontal and vertical inner stacks. `items-start` keeps the
-        icon anchored to the label row even when the value wraps. */
-    hasIcon: {
-      true: "ds:flex-row ds:items-start ds:gap-[var(--spacing-sm)]",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    layout: "horizontal",
-    hasIcon: !1
-  }
-}), B = z(
-  ({
-    label: l,
-    value: o,
-    layout: n = "horizontal",
-    mono: u = !1,
-    copyable: h = !1,
-    copyText: y,
-    icon: r,
-    className: x,
-    ...v
-  }, g) => {
-    const { t: a } = I(), [k, d] = f(!1), [C, e] = f(""), i = y ?? (typeof o == "string" ? o : void 0), w = b(async () => {
-      if (i)
-        try {
-          await navigator.clipboard.writeText(i), d(!0), e(a("keyValuePair.copied")), setTimeout(() => {
-            d(!1), e("");
-          }, 2e3);
-        } catch {
-          e(a("keyValuePair.notAvailable")), setTimeout(() => e(""), 3e3);
-        }
-    }, [i, a]), N = [
-      "type-body ds:text-foreground ds:min-w-0 ds:shrink ds:[unicode-bidi:isolate]",
-      u ? "ds:font-[family-name:var(--font-mono)]" : ""
-    ].filter(Boolean).join(" "), c = r != null, V = n === "horizontal" ? "ds:flex ds:flex-row ds:items-start ds:gap-[var(--spacing-sm)] ds:min-w-0 ds:flex-1" : "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:min-w-0 ds:flex-1", m = /* @__PURE__ */ t(p, { children: [
-      /* @__PURE__ */ t("span", { className: "type-label ds:text-muted-foreground ds:shrink-0", children: [
-        l,
-        /* @__PURE__ */ s("span", { className: "ds:sr-only", children: ": " })
-      ] }),
-      /* @__PURE__ */ s("span", { className: N, children: o }),
-      h && /* @__PURE__ */ s(
-        T,
-        {
-          icon: k ? /* @__PURE__ */ s(j, {}) : /* @__PURE__ */ s(K, {}),
-          size: "sm",
-          "aria-label": a("keyValuePair.copy", { label: l }),
-          onClick: w,
-          intent: "ghost",
-          className: n === "horizontal" ? "ds:ms-auto ds:shrink-0" : "ds:self-start"
-        }
-      )
-    ] });
-    return /* @__PURE__ */ t(
-      "div",
-      {
-        ref: g,
-        className: A({ layout: n, hasIcon: c, className: x }),
-        "data-component": "key-value-pair",
-        ...v,
-        children: [
-          c ? /* @__PURE__ */ t(p, { children: [
-            /* @__PURE__ */ s(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: "ds:inline-flex ds:shrink-0 ds:mt-0.5 ds:text-[color:var(--key-value-pair-icon-color)] ds:[&_svg]:size-4",
-                children: r
-              }
-            ),
-            /* @__PURE__ */ s("div", { className: V, children: m })
-          ] }) : m,
-          /* @__PURE__ */ s("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: C })
-        ]
-      }
-    );
-  }
-);
-B.displayName = "KeyValuePair";
-export {
-  B as K
-};
-//# sourceMappingURL=key-value-pair-C8DaR3Xs.js.map

package/dist/_chunks/key-value-pair-C8DaR3Xs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"key-value-pair-C8DaR3Xs.js","sources":["../../src/components/key-value-pair/key-value-pair.tsx"],"sourcesContent":["import { forwardRef, useState, useCallback } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Copy, Check } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\n\n/* ------------------------------------------------------------------ */\n/* CVA — root wrapper                                                   */\n/*                                                                      */\n/* The layout variants below describe the LOGICAL flow of label/value. */\n/* When an `icon` prop is supplied, the root flips to `flex-row` and    */\n/* renders the icon at the leading edge regardless of the chosen        */\n/* layout — the layout then governs the inner label/value stack. Cap-  */\n/* height alignment is handled by `items-start` + a small `mt` offset  */\n/* on the icon wrapper so a wrapping value doesn't push the icon       */\n/* downward.                                                            */\n/* ------------------------------------------------------------------ */\n\nconst keyValuePairVariants = cva('ds:flex', {\n  variants: {\n    layout: {\n      horizontal: 'ds:flex-row ds:items-center ds:gap-[var(--spacing-sm)]',\n      vertical: 'ds:flex-col ds:gap-[var(--spacing-xs)]',\n    },\n    /** Internal — flips the root to a horizontal flex when an icon\n        is present so the icon can sit at the leading edge of both\n        horizontal and vertical inner stacks. `items-start` keeps the\n        icon anchored to the label row even when the value wraps. */\n    hasIcon: {\n      true: 'ds:flex-row ds:items-start ds:gap-[var(--spacing-sm)]',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    layout: 'horizontal',\n    hasIcon: false,\n  },\n});\n\n/* ------------------------------------------------------------------ */\n/* KeyValuePairProps                                                    */\n/* ------------------------------------------------------------------ */\n\nexport interface KeyValuePairProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<VariantProps<typeof keyValuePairVariants>, 'hasIcon'> {\n  /** The label (term) */\n  label: string;\n  /** The value — accepts plain text, Badge, Tag, monospace code, any ReactNode */\n  value: React.ReactNode;\n  /** Layout direction */\n  layout?: 'horizontal' | 'vertical';\n  /** Render value in monospace font */\n  mono?: boolean;\n  /** Show a copy-to-clipboard IconButton beside the value */\n  copyable?: boolean;\n  /** The text to copy — defaults to `value` if value is a string */\n  copyText?: string;\n  /**\n   * Optional decorative icon rendered at the leading edge of the pair.\n   * Pass a `lucide-react` icon (or any single React element) for\n   * visual consistency. The wrapper applies `aria-hidden=\"true\"` and\n   * paints the icon with `var(--key-value-pair-icon-color)` (defaults\n   * to `--muted-foreground`); consumers can recolour the slot via\n   * that token without forking the component.\n   *\n   * Cap-height alignment with the label is automatic — the wrapper\n   * uses `mt-0.5` so the glyph rides the label row, not the\n   * geometric centre of a wrapping value.\n   *\n   * Type is `ReactElement` (not the broader `ReactNode`) so the\n   * intent is clear at the call site: this slot is for a single\n   * SVG/icon, not arbitrary fragments, strings, or numbers.\n   */\n  icon?: React.ReactElement | null;\n}\n\n/* ------------------------------------------------------------------ */\n/* KeyValuePair                                                         */\n/* ------------------------------------------------------------------ */\n\nexport const KeyValuePair = forwardRef<HTMLDivElement, KeyValuePairProps>(\n  (\n    {\n      label,\n      value,\n      layout = 'horizontal',\n      mono = false,\n      copyable = false,\n      copyText,\n      icon,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const [copied, setCopied] = useState(false);\n    const [announcement, setAnnouncement] = useState('');\n\n    const textToCopy =\n      copyText ?? (typeof value === 'string' ? value : undefined);\n\n    const handleCopy = useCallback(async () => {\n      if (!textToCopy) {\n        if (import.meta.env.DEV) {\n          console.warn(\n            'KeyValuePair: copyable is true but no copyText was provided and value is not a string. Copy no-op.',\n          );\n        }\n        return;\n      }\n\n      try {\n        await navigator.clipboard.writeText(textToCopy);\n        setCopied(true);\n        setAnnouncement(t('keyValuePair.copied'));\n        setTimeout(() => {\n          setCopied(false);\n          setAnnouncement('');\n        }, 2000);\n      } catch {\n        setAnnouncement(t('keyValuePair.notAvailable'));\n        setTimeout(() => setAnnouncement(''), 3000);\n      }\n    }, [textToCopy, t]);\n\n    const valueClasses = [\n      'type-body ds:text-foreground ds:min-w-0 ds:shrink ds:[unicode-bidi:isolate]',\n      mono ? 'ds:font-[family-name:var(--font-mono)]' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const hasIcon = icon !== undefined && icon !== null;\n\n    // Inner stack — the label/value/copy block. Used only when an\n    // icon is present (the root flips to a horizontal `icon + stack`\n    // flex). For the horizontal layout we use `items-start` here so a\n    // wrapping value doesn't push the label visually down to the row\n    // centre — without `items-start`, the icon (anchored at row top\n    // via the root's `items-start`) would no longer align with the\n    // label's cap-height. For the vertical layout `items-start` is\n    // implicit via `flex-col`.\n    const innerStackClass =\n      layout === 'horizontal'\n        ? 'ds:flex ds:flex-row ds:items-start ds:gap-[var(--spacing-sm)] ds:min-w-0 ds:flex-1'\n        : 'ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:min-w-0 ds:flex-1';\n\n    const stack = (\n      <>\n        <span className=\"type-label ds:text-muted-foreground ds:shrink-0\">\n          {label}\n          <span className=\"ds:sr-only\">: </span>\n        </span>\n        <span className={valueClasses}>{value}</span>\n        {copyable && (\n          <IconButton\n            icon={copied ? <Check /> : <Copy />}\n            size=\"sm\"\n            aria-label={t('keyValuePair.copy', { label })}\n            onClick={handleCopy}\n            intent=\"ghost\"\n            className={\n              layout === 'horizontal'\n                ? 'ds:ms-auto ds:shrink-0'\n                : 'ds:self-start'\n            }\n          />\n        )}\n      </>\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={keyValuePairVariants({ layout, hasIcon, className })}\n        data-component=\"key-value-pair\"\n        {...props}\n      >\n        {hasIcon ? (\n          <>\n            {/* Decorative icon wrapper. `aria-hidden` so SR users only\n                hear \"<label>: <value>\" — the icon is brand polish,\n                not semantic content. `mt-0.5` mirrors Alert's left-\n                icon offset so the glyph aligns with the label's cap-\n                height instead of the geometric centre of the row\n                (which would drift downward if the value wraps). */}\n            <span\n              aria-hidden=\"true\"\n              className=\"ds:inline-flex ds:shrink-0 ds:mt-0.5 ds:text-[color:var(--key-value-pair-icon-color)] ds:[&_svg]:size-4\"\n            >\n              {icon}\n            </span>\n            <div className={innerStackClass}>{stack}</div>\n          </>\n        ) : (\n          stack\n        )}\n        <span role=\"status\" aria-live=\"polite\" className=\"ds:sr-only\">\n          {announcement}\n        </span>\n      </div>\n    );\n  },\n);\n\nKeyValuePair.displayName = 'KeyValuePair';\n"],"names":["keyValuePairVariants","cva","KeyValuePair","forwardRef","label","value","layout","mono","copyable","copyText","icon","className","props","ref","t","useTranslation","copied","setCopied","useState","announcement","setAnnouncement","textToCopy","handleCopy","useCallback","valueClasses","hasIcon","innerStackClass","stack","jsxs","Fragment","jsx","IconButton","Check","Copy"],"mappings":"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"}