@alfadocs/ui-kit 0.31.8 → 0.32.1

package/dist/_chunks/{practice-profile-card-CfAMeTxQ.js → contact-profile-card-Ce-LIDU8.js}

@@ -1,18 +1,18 @@
-import { jsxs as u, jsx as e, Fragment as _ } from "react/jsx-runtime";
-import { forwardRef as oe, useId as le, useMemo as ce } from "react";
+import { jsxs as u, jsx as e, Fragment as R } from "react/jsx-runtime";
+import { forwardRef as ie, useId as le, useMemo as ce } from "react";
 import { c as se } from "./index-D2ZczOXr.js";
 import { useTranslation as de } from "react-i18next";
-import { B as S } from "./badge-B9Cr6iEB.js";
-import { C as F } from "./card-CNri9ssR.js";
-import { K as pe, a as ue } from "./key-value-pair-CYE7NSpM.js";
+import { B as S } from "./badge-zsf5i5bH.js";
+import { C as F } from "./card-DPmk26CL.js";
+import { K as pe, a as ue } from "./key-value-pair-CkQIb9EG.js";
 import { L as d } from "./link-DrD_cRUg.js";
 import { u as fe } from "./registry-nPAVE19X.js";
-import { S as H } from "./stethoscope-DT5qCW8Y.js";
-import { H as T, S as V, L as z } from "./shield-check-BhHyReu8.js";
-import { c as E } from "./createLucideIcon-CrFbzy84.js";
-import { G as K } from "./globe-BkEFMNSg.js";
-import { M as L } from "./mail-C8irm52s.js";
-import { M as O } from "./message-circle-C23eicgb.js";
+import { S as T } from "./stethoscope-DT5qCW8Y.js";
+import { H, S as V, L as z } from "./shield-check-BhHyReu8.js";
+import { c as O } from "./createLucideIcon-CrFbzy84.js";
+import { G as E } from "./globe-BkEFMNSg.js";
+import { M as K } from "./mail-C8irm52s.js";
+import { M as L } from "./message-circle-C23eicgb.js";
 import { M as U } from "./map-pin-B8STOPMJ.js";
 /**
  * @license lucide-react v1.8.0 - ISC
@@ -24,7 +24,7 @@ const me = [
   ["rect", { width: "20", height: "12", x: "2", y: "6", rx: "2", key: "9lu3g6" }],
   ["circle", { cx: "12", cy: "12", r: "2", key: "1c9p78" }],
   ["path", { d: "M6 12h.01M18 12h.01", key: "113zkx" }]
-], j = E("banknote", me);
+], j = O("banknote", me);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
@@ -39,23 +39,23 @@ const he = [
       key: "9njp5v"
     }
   ]
-], B = E("phone", he), ge = {
-  id: "practice-profile-card",
+], B = O("phone", he), ge = {
+  id: "contact-profile-card",
   capabilities: ["view_change"],
   state: {
     profession: {
       type: "string",
-      descriptionKey: "ui.agent.practiceProfileCard.state.profession",
+      descriptionKey: "ui.agent.contactProfileCard.state.profession",
       description: "Profession string the card is currently rendering — undefined when the consumer omitted it.",
-      read: (r) => r.getProfession()
+      read: (t) => t.getProfession()
     }
   },
   actions: {},
   domHooks: {
     root: {
       attr: "data-component",
-      value: "practice-profile-card",
-      description: "Marks the PracticeProfileCard root region."
+      value: "contact-profile-card",
+      description: "Marks the ContactProfileCard root region."
     },
     instanceId: {
       attr: "data-component-id",
@@ -63,46 +63,49 @@ const he = [
       description: "Sourced from the id prop."
     }
   }
-}, ve = se("ds:w-full ds:text-[color:var(--foreground)]", {
-  variants: {
-    // Matches the kit's other `surface` props (Booking, ReviewsPanel).
-    // The card itself renders `<Card variant="elevated">` so the
-    // `surface="flat"` opt-out is rare — most consumers want the
-    // boundary.
-    surface: {
-      flat: "",
-      elevated: ""
-    }
-  },
-  defaultVariants: { surface: "elevated" }
-});
-function xe(r) {
-  return r.replace(/[^\d+]/g, "");
+}, ve = se(
+  "ds:w-full ds:text-[color:var(--foreground)] ds:[--key-value-pair-icon-color:var(--accent)]",
+  {
+    variants: {
+      // Matches the kit's other `surface` props (Booking, ReviewsPanel).
+      // The card itself renders `<Card variant="elevated">` so the
+      // `surface="flat"` opt-out is rare — most consumers want the
+      // boundary.
+      surface: {
+        flat: "",
+        elevated: ""
+      }
+    },
+    defaultVariants: { surface: "elevated" }
+  }
+);
+function xe(t) {
+  return t.replace(/[^\d+]/g, "");
 }
-function Pe(r, t) {
-  const a = `https://wa.me/${r}`;
-  return t ? `${a}?text=${encodeURIComponent(t)}` : a;
+function ye(t, r) {
+  const a = `https://wa.me/${t}`;
+  return r ? `${a}?text=${encodeURIComponent(r)}` : a;
 }
-function be(r) {
-  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(r.line)}`;
+function Ce(t) {
+  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(t.line)}`;
 }
-function ye(r, t, a) {
+function be(t, r, a) {
   try {
     return new Intl.NumberFormat(a, {
       style: "currency",
-      currency: t
-    }).format(r / 100);
+      currency: r
+    }).format(t / 100);
   } catch {
-    return (r / 100).toFixed(2);
+    return (t / 100).toFixed(2);
   }
 }
-function Ce() {
+function Pe() {
   if (typeof document > "u") return "4945a3";
-  const r = getComputedStyle(document.documentElement).getPropertyValue("--map-marker-color").trim(), t = /^#?([0-9a-fA-F]{6})$/.exec(r);
-  return t ? t[1] : "4945a3";
+  const t = getComputedStyle(document.documentElement).getPropertyValue("--map-marker-color").trim(), r = /^#?([0-9a-fA-F]{6})$/.exec(t);
+  return r ? r[1] : "4945a3";
 }
-function ke({ apiKey: r, center: t, zoom: a, altText: c }) {
-  const s = Ce(), f = `https://maps.googleapis.com/maps/api/staticmap?center=${t.lat},${t.lng}&zoom=${a}&size=640x192&scale=2&markers=color:0x${s}%7C${t.lat},${t.lng}&key=${encodeURIComponent(r)}`;
+function ke({ apiKey: t, center: r, zoom: a, altText: c }) {
+  const s = Pe(), f = `https://maps.googleapis.com/maps/api/staticmap?center=${r.lat},${r.lng}&zoom=${a}&size=640x192&scale=2&markers=color:0x${s}%7C${r.lat},${r.lng}&key=${encodeURIComponent(t)}`;
   return /* @__PURE__ */ e(
     "img",
     {
@@ -116,10 +119,10 @@ function ke({ apiKey: r, center: t, zoom: a, altText: c }) {
     }
   );
 }
-const we = oe(
+const we = ie(
   ({
-    heading: r,
-    description: t,
+    heading: t,
+    description: r,
     address: a,
     phone: c,
     whatsappNumber: s,
@@ -130,10 +133,10 @@ const we = oe(
     languageLabels: p,
     insurances: v,
     firstVisitPriceCents: x,
-    currencyCode: y = "EUR",
-    profession: P,
+    currencyCode: b = "EUR",
+    profession: y,
     specializedInFearPatients: G,
-    googleMapsApiKey: C,
+    googleMapsApiKey: P,
     mapZoom: q = 14,
     onPhoneClick: W,
     onWhatsAppClick: D,
@@ -143,35 +146,35 @@ const we = oe(
     footerSlot: X,
     surface: k = "elevated",
     "aria-label": Z,
-    id: b,
+    id: C,
     className: ee,
     ...ae
-  }, re) => {
-    const { t: i, i18n: w } = de(), M = le(), $ = w.language ?? "en", A = r ?? i("practiceProfileCard.heading"), te = Z ?? A, I = ce(() => {
+  }, te) => {
+    const { t: n, i18n: w } = de(), M = le(), $ = w.language ?? "en", N = t ?? n("contactProfileCard.heading"), re = Z ?? N, A = ce(() => {
       if (x != null)
-        return ye(x, y, $);
-    }, [x, y, $]), n = [];
-    if (a && n.push({
+        return be(x, b, $);
+    }, [x, b, $]), o = [];
+    if (a && o.push({
       key: "address",
       icon: /* @__PURE__ */ e(U, { "aria-hidden": "true" }),
-      label: i("practiceProfileCard.label.address"),
+      label: n("contactProfileCard.label.address"),
       value: /* @__PURE__ */ u("span", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]", children: [
         /* @__PURE__ */ e("span", { children: a.line }),
         a.lat != null && a.lng != null ? /* @__PURE__ */ e(
           d,
           {
-            href: be(a),
+            href: Ce(a),
             external: !0,
             intent: "default",
             onClick: Y,
-            children: i("practiceProfileCard.openInGoogleMaps")
+            children: n("contactProfileCard.openInGoogleMaps")
           }
         ) : null
       ] })
-    }), c && n.push({
+    }), c && o.push({
       key: "phone",
       icon: /* @__PURE__ */ e(B, { "aria-hidden": "true" }),
-      label: i("practiceProfileCard.label.phone"),
+      label: n("contactProfileCard.label.phone"),
       value: /* @__PURE__ */ e(
         d,
         {
@@ -181,24 +184,24 @@ const we = oe(
           children: c
         }
       )
-    }), s && n.push({
+    }), s && o.push({
       key: "whatsapp",
-      icon: /* @__PURE__ */ e(O, { "aria-hidden": "true" }),
-      label: i("practiceProfileCard.label.whatsapp"),
+      icon: /* @__PURE__ */ e(L, { "aria-hidden": "true" }),
+      label: n("contactProfileCard.label.whatsapp"),
       value: /* @__PURE__ */ e(
         d,
         {
-          href: Pe(s, f),
+          href: ye(s, f),
           external: !0,
           intent: "default",
           onClick: D,
           children: s
         }
       )
-    }), m && n.push({
+    }), m && o.push({
       key: "email",
-      icon: /* @__PURE__ */ e(L, { "aria-hidden": "true" }),
-      label: i("practiceProfileCard.label.email"),
+      icon: /* @__PURE__ */ e(K, { "aria-hidden": "true" }),
+      label: n("contactProfileCard.label.email"),
       value: /* @__PURE__ */ e(
         d,
         {
@@ -208,74 +211,74 @@ const we = oe(
           children: m
         }
       )
-    }), h && n.push({
+    }), h && o.push({
       key: "website",
-      icon: /* @__PURE__ */ e(K, { "aria-hidden": "true" }),
-      label: i("practiceProfileCard.label.website"),
+      icon: /* @__PURE__ */ e(E, { "aria-hidden": "true" }),
+      label: n("contactProfileCard.label.website"),
       value: /* @__PURE__ */ e(d, { href: h, external: !0, intent: "default", children: h })
     }), g && g.length > 0) {
-      const o = (l) => {
+      const i = (l) => {
         if (p != null && p[l]) return p[l];
-        const N = `languages.${l}`;
-        return w.exists(N) ? i(N) : l.toUpperCase();
+        const I = `languages.${l}`;
+        return w.exists(I) ? n(I) : l.toUpperCase();
       };
-      n.push({
+      o.push({
         key: "languages",
         icon: /* @__PURE__ */ e(z, { "aria-hidden": "true" }),
-        label: i("practiceProfileCard.label.languages"),
-        value: /* @__PURE__ */ e("span", { className: "ds:flex ds:flex-wrap ds:gap-[var(--spacing-2xs)]", children: g.map((l) => /* @__PURE__ */ e(S, { variant: "neutral", children: o(l) }, l)) })
+        label: n("contactProfileCard.label.languages"),
+        value: /* @__PURE__ */ e("span", { className: "ds:flex ds:flex-wrap ds:gap-[var(--spacing-2xs)]", children: g.map((l) => /* @__PURE__ */ e(S, { variant: "neutral", children: i(l) }, l)) })
       });
     }
-    v && v.length > 0 && n.push({
+    v && v.length > 0 && o.push({
       key: "insurances",
       icon: /* @__PURE__ */ e(V, { "aria-hidden": "true" }),
-      label: i("practiceProfileCard.label.insurances"),
-      value: /* @__PURE__ */ e("span", { className: "ds:flex ds:flex-wrap ds:gap-[var(--spacing-2xs)]", children: v.map((o) => /* @__PURE__ */ e(S, { variant: "info", children: o }, o)) })
-    }), I && n.push({
+      label: n("contactProfileCard.label.insurances"),
+      value: /* @__PURE__ */ e("span", { className: "ds:flex ds:flex-wrap ds:gap-[var(--spacing-2xs)]", children: v.map((i) => /* @__PURE__ */ e(S, { variant: "info", children: i }, i)) })
+    }), A && o.push({
       key: "firstVisitPrice",
       icon: /* @__PURE__ */ e(j, { "aria-hidden": "true" }),
-      label: i("practiceProfileCard.label.firstVisitPrice"),
-      value: I
-    }), G && n.push({
+      label: n("contactProfileCard.label.firstVisitPrice"),
+      value: A
+    }), G && o.push({
       key: "expertForAnxiousPatients",
-      icon: /* @__PURE__ */ e(T, { "aria-hidden": "true" }),
-      label: i("practiceProfileCard.label.expertForAnxiousPatients"),
-      value: i("practiceProfileCard.value.yesShort")
-    }), P && n.push({
-      key: "profession",
       icon: /* @__PURE__ */ e(H, { "aria-hidden": "true" }),
-      label: i("practiceProfileCard.label.profession"),
-      value: P
+      label: n("contactProfileCard.label.expertForAnxiousPatients"),
+      value: n("contactProfileCard.value.yesShort")
+    }), y && o.push({
+      key: "profession",
+      icon: /* @__PURE__ */ e(T, { "aria-hidden": "true" }),
+      label: n("contactProfileCard.label.profession"),
+      value: y
     }), fe(
       ge,
-      { getProfession: () => P },
-      b
+      { getProfession: () => y },
+      C
     );
-    const ie = /* @__PURE__ */ u(_, { children: [
-      t ? /* @__PURE__ */ e("p", { className: "type-body-sm ds:m-0 ds:whitespace-pre-line", children: t }) : null,
-      n.length > 0 ? /* @__PURE__ */ e(pe, { rowGap: "md", children: n.map((o) => /* @__PURE__ */ e(
+    const ne = /* @__PURE__ */ u(R, { children: [
+      r ? /* @__PURE__ */ e("p", { className: "type-body-sm ds:m-0 ds:whitespace-pre-line", children: r }) : null,
+      o.length > 0 ? /* @__PURE__ */ e(pe, { rowGap: "md", children: o.map((i) => /* @__PURE__ */ e(
         ue,
         {
-          icon: o.icon,
-          label: o.label,
-          value: o.value
+          icon: i.icon,
+          label: i.label,
+          value: i.value
         },
-        o.key
+        i.key
       )) }) : null,
       X
-    ] }), ne = !!C && (a == null ? void 0 : a.lat) !== void 0 && (a == null ? void 0 : a.lng) !== void 0 ? /* @__PURE__ */ e(
+    ] }), oe = !!P && (a == null ? void 0 : a.lat) !== void 0 && (a == null ? void 0 : a.lng) !== void 0 ? /* @__PURE__ */ e(
       ke,
       {
-        apiKey: C,
+        apiKey: P,
         center: { lat: a.lat, lng: a.lng },
         zoom: q,
-        altText: i("practiceProfileCard.map.alt", {
+        altText: n("contactProfileCard.map.alt", {
           address: a.line,
           defaultValue: "Map showing {{address}}"
         })
       }
-    ) : null, R = /* @__PURE__ */ u(_, { children: [
-      ne,
+    ) : null, _ = /* @__PURE__ */ u(R, { children: [
+      oe,
       /* @__PURE__ */ u("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
         Q,
         /* @__PURE__ */ e(
@@ -283,30 +286,30 @@ const we = oe(
           {
             id: M,
             className: "type-title-card ds:m-0 ds:text-[color:var(--foreground)]",
-            children: A
+            children: N
           }
         )
       ] }),
-      ie
+      ne
     ] });
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: re,
+        ref: te,
         role: "region",
-        "aria-label": te,
+        "aria-label": re,
         "aria-labelledby": M,
-        "data-component": "practice-profile-card",
-        "data-component-id": b,
-        id: b,
+        "data-component": "contact-profile-card",
+        "data-component-id": C,
+        id: C,
         className: ve({ surface: k, className: ee }),
         ...ae,
-        children: k === "elevated" ? /* @__PURE__ */ e(F, { variant: "elevated", children: /* @__PURE__ */ e(F.Body, { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: R }) }) : /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: R })
+        children: k === "elevated" ? /* @__PURE__ */ e(F, { variant: "elevated", children: /* @__PURE__ */ e(F.Body, { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: _ }) }) : /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: _ })
       }
     );
   }
 );
-we.displayName = "PracticeProfileCard";
+we.displayName = "ContactProfileCard";
 const Ue = [
   "address",
   "phone",
@@ -321,19 +324,19 @@ const Ue = [
 ], je = {
   address: U,
   phone: B,
-  whatsapp: O,
-  email: L,
-  website: K,
+  whatsapp: L,
+  email: K,
+  website: E,
   languages: z,
   insurances: V,
   firstVisitPrice: j,
-  expertForAnxiousPatients: T,
-  profession: H
+  expertForAnxiousPatients: H,
+  profession: T
 };
 export {
-  je as P,
+  je as C,
   Ue as a,
   we as b,
-  ge as p
+  ge as c
 };
-//# sourceMappingURL=practice-profile-card-CfAMeTxQ.js.map
+//# sourceMappingURL=contact-profile-card-Ce-LIDU8.js.map

package/dist/_chunks/{editable-currency-cell-renderer-YvTwkFrD.js → editable-currency-cell-renderer-B9VRSV_S.js}

@@ -30,7 +30,7 @@ import { D as ze } from "./date-range-picker-D4dgDlLU.js";
 import { M as Ot } from "./multi-select-DOLO3K_z.js";
 import { A as Ae } from "./autocomplete-DIgdhCGJ.js";
 import { N as ee } from "./number-input-Dj5L3pXK.js";
-import { B as Mt } from "./badge-B9Cr6iEB.js";
+import { B as Mt } from "./badge-zsf5i5bH.js";
 import { A as Pe } from "./avatar-BNQNhoyL.js";
 import { T as jt } from "./tooltip-DvmfrNvB.js";
 import { T as he } from "./timestamp-BV2lC-wV.js";
@@ -2332,4 +2332,4 @@ export {
   Be as q,
   xn as u
 };
-//# sourceMappingURL=editable-currency-cell-renderer-YvTwkFrD.js.map
+//# sourceMappingURL=editable-currency-cell-renderer-B9VRSV_S.js.map

package/dist/_chunks/{key-value-pair-CYE7NSpM.js → key-value-pair-CkQIb9EG.js}

@@ -26,65 +26,72 @@ const B = P("ds:flex", {
   }
 }), _ = g(
   ({
-    label: t,
-    value: s,
-    layout: e = "horizontal",
+    label: o,
+    value: e,
+    layout: s = "horizontal",
     mono: r = !1,
     copyable: l = !1,
     copyText: v,
     icon: d,
     className: h,
-    ...x
-  }, k) => {
-    const { t: o } = I(), [C, p] = y(!1), [N, n] = y(""), c = v ?? (typeof s == "string" ? s : void 0), w = z(async () => {
+    ...k
+  }, x) => {
+    const { t: n } = I(), [C, m] = y(!1), [N, t] = y(""), c = v ?? (typeof e == "string" ? e : void 0), V = z(async () => {
       if (c)
         try {
-          await navigator.clipboard.writeText(c), p(!0), n(o("keyValuePair.copied")), setTimeout(() => {
-            p(!1), n("");
+          await navigator.clipboard.writeText(c), m(!0), t(n("keyValuePair.copied")), setTimeout(() => {
+            m(!1), t("");
           }, 2e3);
         } catch {
-          n(o("keyValuePair.notAvailable")), setTimeout(() => n(""), 3e3);
+          t(n("keyValuePair.notAvailable")), setTimeout(() => t(""), 3e3);
         }
-    }, [c, o]), V = [
+    }, [c, n]), b = [
       "type-body ds:text-foreground ds:min-w-0 ds:shrink ds:[unicode-bidi:isolate]",
+      // `flex-1` lets the value absorb the remaining inline space
+      // when the KVP root flexes the icon / label / value as direct
+      // siblings (`hasIcon && layout === 'horizontal'`). Without it,
+      // the value would shrink to its content width and the row
+      // would leave inline-end whitespace. Vertical layout doesn't
+      // need it because the value is below the label, not beside it.
+      s === "horizontal" ? "ds:flex-1" : "",
       r ? "ds:font-[family-name:var(--font-mono)]" : ""
-    ].filter(Boolean).join(" "), m = d != null, b = e === "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", u = /* @__PURE__ */ i(f, { children: [
+    ].filter(Boolean).join(" "), u = d != null, w = "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:min-w-0 ds:flex-1", p = /* @__PURE__ */ i(f, { children: [
       /* @__PURE__ */ i("span", { className: "type-label ds:text-muted-foreground ds:shrink-0", children: [
-        t,
+        o,
         /* @__PURE__ */ a("span", { className: "ds:sr-only", children: ": " })
       ] }),
-      /* @__PURE__ */ a("span", { className: V, children: s }),
+      /* @__PURE__ */ a("span", { className: b, children: e }),
       l && /* @__PURE__ */ a(
         K,
         {
           icon: C ? /* @__PURE__ */ a(T, {}) : /* @__PURE__ */ a(j, {}),
           size: "sm",
-          "aria-label": o("keyValuePair.copy", { label: t }),
-          onClick: w,
+          "aria-label": n("keyValuePair.copy", { label: o }),
+          onClick: V,
           intent: "ghost",
-          className: e === "horizontal" ? "ds:ms-auto ds:shrink-0" : "ds:self-start"
+          className: s === "horizontal" ? "ds:ms-auto ds:shrink-0" : "ds:self-start"
         }
       )
     ] });
     return /* @__PURE__ */ i(
       "div",
       {
-        ref: k,
-        className: B({ layout: e, hasIcon: m, className: h }),
+        ref: x,
+        className: B({ layout: s, hasIcon: u, className: h }),
         "data-component": "key-value-pair",
-        ...x,
+        ...k,
         children: [
-          m ? /* @__PURE__ */ i(f, { children: [
+          u ? /* @__PURE__ */ i(f, { children: [
             /* @__PURE__ */ a(
               "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",
+                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",
                 children: d
               }
             ),
-            /* @__PURE__ */ a("div", { className: b, children: u })
-          ] }) : u,
+            s === "horizontal" ? p : /* @__PURE__ */ a("div", { className: w, children: p })
+          ] }) : p,
           /* @__PURE__ */ a("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: N })
         ]
       }
@@ -97,7 +104,7 @@ const A = {
   md: "ds:gap-y-[var(--spacing-md)]",
   lg: "ds:gap-y-[var(--spacing-lg)]"
 }, L = g(
-  ({ children: t, className: s, rowGap: e = "md", ...r }, l) => /* @__PURE__ */ a(
+  ({ children: o, className: e, rowGap: s = "md", ...r }, l) => /* @__PURE__ */ a(
     "div",
     {
       ref: l,
@@ -105,7 +112,7 @@ const A = {
       className: [
         "ds:grid ds:grid-cols-[auto_auto_minmax(0,1fr)]",
         "ds:gap-x-[var(--spacing-md)]",
-        A[e],
+        A[s],
         // Each direct `data-component="key-value-pair"` child becomes
         // a subgrid row spanning all three columns. The KVP's own
         // flex layout still works inside the cell (icon shrinks-0,
@@ -115,14 +122,17 @@ const A = {
         'ds:[&>[data-component="key-value-pair"]]:grid-cols-subgrid',
         'ds:[&>[data-component="key-value-pair"]]:col-span-3',
         'ds:[&>[data-component="key-value-pair"]]:items-baseline',
-        // Reset the per-row flex gap so the subgrid columns own the
-        // spacing. Without this the KVP's intra-row `gap-sm` would
-        // double the parent's `gap-x-md`.
-        'ds:[&>[data-component="key-value-pair"]]:gap-0',
-        s
+        // Unset the KVP's intra-row `gap-sm` so the subgrid inherits
+        // the parent KeyValueList's `gap-x-md` for every track gap
+        // (icon→label and label→value). `gap-0` here would override
+        // the parent's gap and crowd the icon against the label;
+        // `[gap:normal]` is the subgrid-spec way to defer to the
+        // parent.
+        'ds:[&>[data-component="key-value-pair"]]:[gap:normal]',
+        e
       ].filter(Boolean).join(" "),
       ...r,
-      children: t
+      children: o
     }
   )
 );
@@ -131,4 +141,4 @@ export {
   L as K,
   _ as a
 };
-//# sourceMappingURL=key-value-pair-CYE7NSpM.js.map
+//# sourceMappingURL=key-value-pair-CkQIb9EG.js.map