@alfadocs/ui-kit-debug 1.101.0 → 1.102.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfadocs/ui-kit-debug",
-  "version": "1.101.0",
+  "version": "1.102.0",
   "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",

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

@@ -1 +0,0 @@
-{"version":3,"file":"key-value-pair-BoXOtBL1.js","sources":["../../src/components/key-value-pair/key-value-pair.tsx"],"sourcesContent":["import { forwardRef, useState, useCallback, type HTMLAttributes } 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\n/* ------------------------------------------------------------------ */\n/* CVA — value cell                                                     */\n/*                                                                      */\n/* `alignValue` decides whether the value starts beside the label or    */\n/* is pinned to the inline-end of the row. Pinning matters when a       */\n/* column of rows carries one comparable figure (a price, a count):     */\n/* left where it falls, its position shifts with the label width and    */\n/* the eye can't run down it.                                           */\n/*                                                                      */\n/* Standalone, the value is a flex sibling — `start` lets it absorb     */\n/* the free space, `end` pushes it over with an auto inline margin.     */\n/* Inside a `<KeyValueList>` the value is a grid item in the third      */\n/* track (`minmax(0,1fr)`), where the same auto margin pins it to the   */\n/* track's end. One pair of classes covers both.                        */\n/*                                                                      */\n/* Horizontal only. In `vertical` the value already sits below the      */\n/* label with nothing to pin against, so `alignValue` is a documented   */\n/* no-op there rather than a surprise.                                  */\n/* ------------------------------------------------------------------ */\n\nconst keyValuePairValueVariants = cva(\n  'type-body ds:text-foreground ds:min-w-0 ds:[unicode-bidi:isolate]',\n  {\n    variants: {\n      layout: {\n        horizontal: '',\n        vertical: 'ds:shrink',\n      },\n      alignValue: {\n        start: '',\n        end: '',\n      },\n      mono: {\n        true: 'ds:font-[family-name:var(--font-mono)]',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      // `flex-1` lets the value absorb the remaining inline space when\n      // the KVP root flexes icon / label / value as direct siblings.\n      // Without it the value shrinks to its content width and the row\n      // leaves inline-end whitespace.\n      {\n        layout: 'horizontal',\n        alignValue: 'start',\n        class: 'ds:flex-1 ds:shrink',\n      },\n      // Pinned: drop `flex-1` so the cell is content-width, then let an\n      // auto inline-start margin eat the slack. `ms-*` is the logical\n      // spelling, so this flips correctly in a right-to-left locale.\n      {\n        layout: 'horizontal',\n        alignValue: 'end',\n        class: 'ds:ms-auto ds:shrink-0',\n      },\n    ],\n    defaultVariants: {\n      layout: 'horizontal',\n      alignValue: 'start',\n      mono: false,\n    },\n  },\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). Stays a string: it is interpolated into the copy\n   *  button's accessible name, where a node would render \"[object Object]\". */\n  label: string;\n  /**\n   * Display-only override for the rendered label — a node when the term needs\n   * more than text (a PHI lock beside it, a badge). `label` is still required\n   * and remains the string every accessible name is built from.\n   */\n  labelNode?: React.ReactNode;\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  /**\n   * Where the value sits on the row.\n   *\n   * `start` (default) keeps the existing behaviour — the value begins\n   * immediately after the label and absorbs the remaining width.\n   *\n   * `end` pins the value to the inline-end of the row, so its position\n   * no longer moves with the label's length. Use it for the one\n   * comparable figure in a list of rows — a price, a count, a score —\n   * where a reader wants to scan down a column rather than read each\n   * line. Pinning every row defeats the point.\n   *\n   * Horizontal layout only: in `vertical` the value already sits below\n   * the label, so there is nothing to pin against and this is ignored.\n   */\n  alignValue?: 'start' | 'end';\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      labelNode,\n      value,\n      layout = 'horizontal',\n      alignValue = 'start',\n      mono = false,\n      copyable = false,\n      copyText,\n      icon,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation('ui');\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 = keyValuePairValueVariants({\n      layout,\n      alignValue,\n      mono,\n    });\n\n    const hasIcon = icon !== undefined && icon !== null;\n\n    // Inner stack — used ONLY for `layout=\"vertical\"` when an icon is\n    // present (icon on the leading edge, label-on-top-of-value stacked\n    // next to it). For `layout=\"horizontal\"` we render the icon /\n    // label / value as direct flex children of the root — wrapping\n    // them in a single `<div>` would break the KeyValueList subgrid\n    // (the subgrid's 3 tracks would collapse to 2: the wrapper +\n    // icon). See the conditional below.\n    const innerStackClass =\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          {labelNode ?? 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                ? // Only one element on the row may claim the slack. When\n                  // the value is pinned it has already taken it with its\n                  // own `ms-auto`; a second auto margin here would split\n                  // the free space between them and strand the value in\n                  // the middle of the row instead of at its end.\n                  alignValue === 'end'\n                  ? 'ds:shrink-0'\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        data-has-icon={hasIcon ? '' : undefined}\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.\n\n                `translate-y` shifts the icon down by 2px visually so\n                its centre lines up with the label's x-height centre.\n                In a baseline-aligned subgrid row, the icon's margin-\n                box bottom pins to the label's text baseline — that\n                leaves the 16px SVG sitting visually 3-4px above the\n                label's centre. `translate-y` adjusts only the paint\n                position; the underlying baseline math still holds,\n                so multi-line value cells (e.g. address + map link)\n                stay correctly aligned with the FIRST line of the\n                value. */}\n            <span\n              aria-hidden=\"true\"\n              className=\"ds:inline-flex ds:shrink-0 ds:translate-y-0.5 ds:text-[color:var(--key-value-pair-icon-color)] ds:[&_svg]:size-4\"\n            >\n              {icon}\n            </span>\n            {/* `horizontal` layout: render label / value / copy as\n                direct flex children of the root so each piece falls\n                into its own track when this KVP is promoted to a\n                subgrid row by `<KeyValueList>`. Wrapping them in a\n                `<div>` here would collapse the subgrid's 3 tracks\n                (icon | label | value) to 2 (icon | wrapper) and labels\n                across rows would no longer share a column. The root's\n                `flex flex-row` + `gap-sm` keeps the standalone visual\n                identical.\n\n                `vertical` layout still needs the wrapper because the\n                stack is column-flow — label-on-top-of-value next to\n                the icon. */}\n            {layout === 'horizontal' ? (\n              stack\n            ) : (\n              <div className={innerStackClass}>{stack}</div>\n            )}\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\n/* ------------------------------------------------------------------ */\n/* KeyValueList — subgrid alignment for a column of KVP rows           */\n/*                                                                      */\n/* When several `<KeyValuePair>` rows live in the same card (practice  */\n/* profile, settings panel, contact card, etc.), the per-row flex      */\n/* layout means each row's label column has a different width. The     */\n/* values end up zigzagged. Wrapping in `<KeyValueList>` puts all rows */\n/* into a single 3-column CSS subgrid (icon | label | value), so       */\n/* labels share a column across rows and values start at the same     */\n/* inline-start edge.                                                  */\n/*                                                                      */\n/* Standalone `<KeyValuePair>` instances outside a `<KeyValueList>`    */\n/* keep their existing per-row flex layout — no behaviour change for   */\n/* consumers that didn't opt in.                                       */\n/* ------------------------------------------------------------------ */\n\nexport interface KeyValueListProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Gap between rows. Maps to spacing tokens — defaults to `md`.\n   * Smaller gaps suit dense settings panels; larger gaps suit\n   * profile cards.\n   */\n  rowGap?: 'sm' | 'md' | 'lg';\n}\n\nconst rowGapClassMap: Record<\n  NonNullable<KeyValueListProps['rowGap']>,\n  string\n> = {\n  sm: 'ds:gap-y-[var(--spacing-sm)]',\n  md: 'ds:gap-y-[var(--spacing-md)]',\n  lg: 'ds:gap-y-[var(--spacing-lg)]',\n};\n\nexport const KeyValueList = forwardRef<HTMLDivElement, KeyValueListProps>(\n  ({ children, className, rowGap = 'md', ...props }, ref) => {\n    // Three-column subgrid: icon | label | value.\n    //   - col 1: `auto` — width of the widest icon (or 0 if no rows have icons)\n    //   - col 2: `auto` — width of the widest label, shared across all rows.\n    //     When rows have icons the label sits here, beside a `1fr` value,\n    //     so a long one-line label (Albanian \"Me përvojë me pacientët e\n    //     ankthshëm\") took the whole width and left the value about 3px\n    //     on a phone. A list with icon rows caps it at `fit-content(40%)`\n    //     so the label wraps instead. Without icons the label and value\n    //     share the two `auto` tracks, which shrink together, so nothing\n    //     changes there.\n    //   - col 3: `minmax(0, 1fr)` — value flexes; `minmax` prevents the\n    //     value from forcing the grid wider than its container when the\n    //     value contains a long unbroken string (e.g. an email or URL).\n    //\n    // Each child `<KeyValuePair>` (which renders as a `<div>` with a\n    // `data-component=\"key-value-pair\"` marker) is promoted into a\n    // subgrid row by the CSS below — the cell boundaries align across\n    // every direct child.\n    //\n    // We render as `<div>` (not `<dl>`): axe enforces \"dl can only\n    // contain dt/dd\" and the inner KVP renders as a `<div>`. The KVP's\n    // own SR markup (label + `<span class=\"sr-only\">: </span>` + value)\n    // already conveys term-value semantics — wrapping in a `<dl>`\n    // doesn't add anything the screen reader doesn't already get.\n    return (\n      <div\n        ref={ref}\n        data-component=\"key-value-list\"\n        className={[\n          // The label track reads a custom property, and an icon list only\n          // sets that property: it never re-declares the template, so a\n          // host's own column layout (PatientSummaryCard's two fields per\n          // row from 672px) still wins exactly as before.\n          'ds:grid ds:grid-cols-[auto_var(--kvl-label-track,auto)_minmax(0,1fr)]',\n          'ds:has-[>[data-has-icon]]:[--kvl-label-track:fit-content(40%)]',\n          'ds:gap-x-[var(--spacing-md)]',\n          rowGapClassMap[rowGap],\n          // Each direct `data-component=\"key-value-pair\"` child becomes\n          // a subgrid row spanning all three columns. The KVP's own\n          // flex layout still works inside the cell (icon shrinks-0,\n          // label shrinks-0, value flexes) — subgrid just aligns the\n          // boundaries between siblings.\n          'ds:[&>[data-component=\"key-value-pair\"]]:grid',\n          'ds:[&>[data-component=\"key-value-pair\"]]:grid-cols-subgrid',\n          'ds:[&>[data-component=\"key-value-pair\"]]:col-span-3',\n          'ds:[&>[data-component=\"key-value-pair\"]]:items-baseline',\n          // Unset the KVP's intra-row `gap-sm` so the subgrid inherits\n          // the parent KeyValueList's `gap-x-md` for every track gap\n          // (icon→label and label→value). `gap-0` here would override\n          // the parent's gap and crowd the icon against the label;\n          // `[gap:normal]` is the subgrid-spec way to defer to the\n          // parent.\n          'ds:[&>[data-component=\"key-value-pair\"]]:[gap:normal]',\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nKeyValueList.displayName = 'KeyValueList';\n"],"names":["keyValuePairValueVariants","cva","keyValuePairVariants","KeyValuePair","forwardRef","label","labelNode","value","layout","alignValue","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","rowGapClassMap","KeyValueList","children","rowGap"],"mappings":"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"}

package/dist/_chunks/specialty-list-urUQJLk3.js

@@ -1,67 +0,0 @@
-import { jsxs as m, jsx as s, Fragment as b } from "react/jsx-runtime";
-import { forwardRef as N, useState as S, useId as L } from "react";
-import { useTranslation as w } from "react-i18next";
-import { B as I } from "./button-DohK_Ak_.js";
-import { c as $ } from "./specialty-icon-KuovHTxh.js";
-const u = [
-  "ds:group ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]",
-  "ds:min-h-[var(--min-target-size)] ds:text-foreground ds:no-underline",
-  "ds:rounded-[var(--radius-md)]"
-].join(" "), j = [
-  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
-  "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-  "ds:forced-colors:focus-visible:outline-[CanvasText]"
-].join(" "), p = "ds:m-0 ds:flex ds:list-none ds:flex-col ds:gap-[var(--spacing-2xs)] ds:p-0 ds:[&[hidden]]:hidden";
-function f({ item: e }) {
-  const i = /* @__PURE__ */ m(b, { children: [
-    /* @__PURE__ */ s($, { specialty: e.key }),
-    /* @__PURE__ */ s(
-      "span",
-      {
-        dir: "auto",
-        className: "type-body ds:min-w-0 ds:underline-offset-4 ds:group-hover:underline ds:group-focus-visible:underline",
-        children: e.label
-      }
-    )
-  ] });
-  return /* @__PURE__ */ s("li", { className: "ds:min-w-0", children: e.href ? /* @__PURE__ */ s("a", { href: e.href, className: `${u} ${j}`, children: i }) : /* @__PURE__ */ s("span", { className: u, children: i }) });
-}
-const k = N(
-  ({ items: e, collapsedCount: i = 5, className: h, ...g }, v) => {
-    const { t: a } = w("ui"), [l, x] = S(!1), d = L(), r = e.slice(0, Math.max(0, i)), o = e.slice(r.length), c = o.length > 0, y = [
-      "ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-2xs)]",
-      h
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ m(
-      "div",
-      {
-        ref: v,
-        "data-component": "specialty-list",
-        className: y,
-        ...g,
-        children: [
-          /* @__PURE__ */ s("ul", { className: p, children: r.map((n, t) => /* @__PURE__ */ s(f, { item: n }, `${n.key}-${t}`)) }),
-          c ? /* @__PURE__ */ s("ul", { id: d, hidden: !l, className: p, children: o.map((n, t) => /* @__PURE__ */ s(f, { item: n }, `${n.key}-${t}`)) }) : null,
-          c ? /* @__PURE__ */ s(
-            I,
-            {
-              type: "button",
-              intent: "link",
-              size: "md",
-              className: "ds:!ps-0 ds:!pe-0",
-              "aria-expanded": l,
-              "aria-controls": d,
-              onClick: () => x((n) => !n),
-              children: l ? a("specialtyList.showLess") : a("specialtyList.showAll", { count: o.length })
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
-k.displayName = "SpecialtyList";
-export {
-  k as S
-};
-//# sourceMappingURL=specialty-list-urUQJLk3.js.map

package/dist/_chunks/specialty-list-urUQJLk3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"specialty-list-urUQJLk3.js","sources":["../../src/components/specialty-list/specialty-list.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useState,\n  type ComponentPropsWithoutRef,\n} from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Button } from '../button/button';\nimport { SpecialtyIcon } from '../specialty-icon/specialty-icon';\n\n/* -------------------------------------------------------------------- */\n/* SpecialtyList                                                          */\n/*                                                                        */\n/* A practice's specialities, one per line: the ring icon, then the      */\n/* label. The same list at every width.                                  */\n/*                                                                        */\n/* Every item is always in the DOM. Items after `collapsedCount` sit in a */\n/* second list with the `hidden` attribute until the toggle opens it, so  */\n/* crawlers and find-in-page see all of them.                            */\n/* -------------------------------------------------------------------- */\n\nexport interface SpecialtyListItem {\n  /** Profession key (platform seoUrl slug). Unknown keys get the health cross. */\n  key: string;\n  /** Display label, already localised by the consumer. */\n  label: string;\n  /** When set the item is a link; otherwise plain text. */\n  href?: string;\n}\n\nexport interface SpecialtyListProps extends Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'children'\n> {\n  /** The specialities, in display order. */\n  items: SpecialtyListItem[];\n  /**\n   * How many items show before the toggle. Defaults to 5. The rest stay in\n   * the DOM, hidden. No toggle is rendered when `items.length` is not above it.\n   */\n  collapsedCount?: number;\n}\n\n// A row is at least the 44px touch target; the icon inside it is 32px.\nconst ROW_BASE = [\n  'ds:group ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]',\n  'ds:min-h-[var(--min-target-size)] ds:text-foreground ds:no-underline',\n  'ds:rounded-[var(--radius-md)]',\n].join(' ');\n\nconst LINK_EXTRA = [\n  'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n  'ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n  'ds:forced-colors:focus-visible:outline-[CanvasText]',\n].join(' ');\n\nconst LIST_CLASS =\n  'ds:m-0 ds:flex ds:list-none ds:flex-col ds:gap-[var(--spacing-2xs)] ds:p-0 ds:[&[hidden]]:hidden';\n\nfunction SpecialtyItem({ item }: { item: SpecialtyListItem }) {\n  const content = (\n    <>\n      <SpecialtyIcon specialty={item.key} />\n      <span\n        dir=\"auto\"\n        className=\"type-body ds:min-w-0 ds:underline-offset-4 ds:group-hover:underline ds:group-focus-visible:underline\"\n      >\n        {item.label}\n      </span>\n    </>\n  );\n  return (\n    <li className=\"ds:min-w-0\">\n      {item.href ? (\n        <a href={item.href} className={`${ROW_BASE} ${LINK_EXTRA}`}>\n          {content}\n        </a>\n      ) : (\n        <span className={ROW_BASE}>{content}</span>\n      )}\n    </li>\n  );\n}\n\nexport const SpecialtyList = forwardRef<HTMLDivElement, SpecialtyListProps>(\n  ({ items, collapsedCount = 5, className, ...rest }, ref) => {\n    const { t } = useTranslation('ui');\n    const [expanded, setExpanded] = useState(false);\n    const moreId = useId();\n\n    const visible = items.slice(0, Math.max(0, collapsedCount));\n    const more = items.slice(visible.length);\n    const hasToggle = more.length > 0;\n\n    const rootClass = [\n      'ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-2xs)]',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div\n        ref={ref}\n        data-component=\"specialty-list\"\n        className={rootClass}\n        {...rest}\n      >\n        <ul className={LIST_CLASS}>\n          {visible.map((item, index) => (\n            <SpecialtyItem key={`${item.key}-${index}`} item={item} />\n          ))}\n        </ul>\n        {hasToggle ? (\n          <ul id={moreId} hidden={!expanded} className={LIST_CLASS}>\n            {more.map((item, index) => (\n              <SpecialtyItem key={`${item.key}-${index}`} item={item} />\n            ))}\n          </ul>\n        ) : null}\n        {hasToggle ? (\n          <Button\n            type=\"button\"\n            intent=\"link\"\n            size=\"md\"\n            // The kit's inline text-button idiom (EditableDescription): no\n            // side padding, so the text lines up with the items above it.\n            className=\"ds:!ps-0 ds:!pe-0\"\n            aria-expanded={expanded}\n            aria-controls={moreId}\n            onClick={() => setExpanded((open) => !open)}\n          >\n            {expanded\n              ? t('specialtyList.showLess')\n              : t('specialtyList.showAll', { count: more.length })}\n          </Button>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nSpecialtyList.displayName = 'SpecialtyList';\n"],"names":["ROW_BASE","LINK_EXTRA","LIST_CLASS","SpecialtyItem","item","content","jsxs","Fragment","jsx","SpecialtyIcon","SpecialtyList","forwardRef","items","collapsedCount","className","rest","ref","t","useTranslation","expanded","setExpanded","useState","moreId","useId","visible","more","hasToggle","rootClass","index","Button","open"],"mappings":";;;;;AA4CA,MAAMA,IAAW;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG,GAEJC,IAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG,GAEJC,IACJ;AAEF,SAASC,EAAc,EAAE,MAAAC,KAAqC;AAC5D,QAAMC,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAc,WAAWL,EAAK,IAAA,CAAK;AAAA,IACpC,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAI;AAAA,QACJ,WAAU;AAAA,QAET,UAAAJ,EAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,GACF;AAEF,SACE,gBAAAI,EAAC,MAAA,EAAG,WAAU,cACX,UAAAJ,EAAK,OACJ,gBAAAI,EAAC,KAAA,EAAE,MAAMJ,EAAK,MAAM,WAAW,GAAGJ,CAAQ,IAAIC,CAAU,IACrD,UAAAI,EAAA,CACH,sBAEC,QAAA,EAAK,WAAWL,GAAW,UAAAK,EAAA,CAAQ,EAAA,CAExC;AAEJ;AAEO,MAAMK,IAAgBC;AAAA,EAC3B,CAAC,EAAE,OAAAC,GAAO,gBAAAC,IAAiB,GAAG,WAAAC,GAAW,GAAGC,EAAA,GAAQC,MAAQ;AAC1D,UAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,IAAI,GAC3B,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAASC,EAAA,GAETC,IAAUZ,EAAM,MAAM,GAAG,KAAK,IAAI,GAAGC,CAAc,CAAC,GACpDY,IAAOb,EAAM,MAAMY,EAAQ,MAAM,GACjCE,IAAYD,EAAK,SAAS,GAE1BE,IAAY;AAAA,MAChB;AAAA,MACAb;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAR;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAU;AAAA,QACA,kBAAe;AAAA,QACf,WAAWW;AAAA,QACV,GAAGZ;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAP,EAAC,QAAG,WAAWN,GACZ,YAAQ,IAAI,CAACE,GAAMwB,MAClB,gBAAApB,EAACL,GAAA,EAA2C,MAAAC,KAAxB,GAAGA,EAAK,GAAG,IAAIwB,CAAK,EAAgB,CACzD,GACH;AAAA,UACCF,IACC,gBAAAlB,EAAC,MAAA,EAAG,IAAIc,GAAQ,QAAQ,CAACH,GAAU,WAAWjB,GAC3C,UAAAuB,EAAK,IAAI,CAACrB,GAAMwB,MACf,gBAAApB,EAACL,GAAA,EAA2C,MAAAC,EAAA,GAAxB,GAAGA,EAAK,GAAG,IAAIwB,CAAK,EAAgB,CACzD,EAAA,CACH,IACE;AAAA,UACHF,IACC,gBAAAlB;AAAA,YAACqB;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,QAAO;AAAA,cACP,MAAK;AAAA,cAGL,WAAU;AAAA,cACV,iBAAeV;AAAA,cACf,iBAAeG;AAAA,cACf,SAAS,MAAMF,EAAY,CAACU,MAAS,CAACA,CAAI;AAAA,cAEzC,UAAAX,IACGF,EAAE,wBAAwB,IAC1BA,EAAE,yBAAyB,EAAE,OAAOQ,EAAK,OAAA,CAAQ;AAAA,YAAA;AAAA,UAAA,IAErD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEAf,EAAc,cAAc;"}