@alfadocs/ui-kit 1.54.2 → 1.55.0

package/dist/_chunks/periodontal-chart-5nLsSuRM.js

@@ -1,1305 +0,0 @@
-import { jsx as n, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as et, useRef as Re, useState as tt, useCallback as O, useMemo as Ie, useImperativeHandle as st } from "react";
-import { c as qe } from "./index-D2ZczOXr.js";
-import { useTranslation as rt } from "react-i18next";
-import { u as nt } from "./registry-DvAUVLHh.js";
-import { P as ve, i as ye, h as at, g as it, f as ot, Y as lt } from "./tooth-data-DR8Kdnup.js";
-import { P as je } from "./periodontal-chart-card-Djr3en8Q.js";
-const j = {
-  type: "string",
-  description: "FDI tooth id ('11'–'48' permanent, '51'–'85' primary)."
-}, $ = {
-  enum: ["db", "b", "mb", "dl", "l", "ml"],
-  description: "Probing site: (m/d)b = mesio-/disto-/mid buccal, (m/d)l = mesio-/disto-/mid lingual."
-}, fe = {
-  type: "integer",
-  description: "Whole millimetres — perio probing is recorded in integer mm."
-}, ct = {
-  type: "object",
-  properties: {
-    meanPocketDepthMm: { type: ["number", "null"] },
-    meanAttachmentLevelMm: { type: ["number", "null"] },
-    plaquePercent: { type: ["number", "null"] },
-    bleedingPercent: { type: ["number", "null"] },
-    scoredSiteCount: { type: "number" },
-    deepPocketCount: { type: "number" }
-  }
-}, dt = {
-  type: "array",
-  description: "One entry per flagged tooth, in clinical order; each tooth’s pockets are deepest-first.",
-  items: {
-    type: "object",
-    properties: {
-      fdi: j,
-      status: {
-        enum: ["present", "missing", "implant"],
-        description: "Structural status of the tooth."
-      },
-      severity: {
-        enum: ["normal", "moderate", "severe"],
-        description: "Worst pocket severity band across the tooth."
-      },
-      maxPocketDepthMm: { type: ["integer", "null"] },
-      pockets: {
-        type: "array",
-        description: "Sites at/above the moderate threshold, deepest first.",
-        items: {
-          type: "object",
-          properties: {
-            site: $,
-            pocketDepthMm: fe,
-            severity: { enum: ["moderate", "severe"] }
-          }
-        }
-      },
-      bleedingSites: { type: "array", items: $ },
-      plaqueSites: { type: "array", items: $ },
-      suppurationSites: { type: "array", items: $ },
-      maxRecessionMm: { type: ["number", "null"] },
-      mobility: {
-        type: ["integer", "null"],
-        description: "Miller mobility grade 1–3, or null when none."
-      },
-      furcation: { type: "array", items: { enum: ["buccal", "lingual"] } }
-    }
-  }
-};
-function ut(s) {
-  if (!s) return null;
-  const t = { ...s };
-  return delete t.note, t;
-}
-const pt = {
-  id: "periodontal-chart",
-  // pick — focus a measurement input (transient); set_value / edit_inline —
-  // record per-site probing readings and per-tooth flags.
-  capabilities: ["pick", "set_value", "edit_inline"],
-  state: {
-    indices: {
-      type: "object",
-      descriptionKey: "ui.agent.periodontalChart.state.indices",
-      description: "Derived whole-mouth indices: mean probing depth, mean attachment level, plaque %, bleeding %, scored-site and deep-pocket counts. Aggregates only — no per-site or patient data.",
-      read: (s) => s.getIndices()
-    },
-    findings: {
-      type: "object[]",
-      descriptionKey: "ui.agent.periodontalChart.state.findings",
-      description: "Narratable per-tooth problem list — one entry per flagged tooth (missing, implant, a pocket at/above the moderate threshold, bleeding, suppuration, mobility ≥ 1, or furcation), in clinical order with each tooth’s pockets deepest-first. Each entry carries fdi, status, severity, maxPocketDepthMm, pockets, bleeding/plaque/suppuration sites, maxRecessionMm, mobility and furcation. Read this to summarise the chart aloud. Structural readings + FDI ids only — never the free-text note or patient identity.",
-      read: (s) => s.getFindings()
-    },
-    missingTeeth: {
-      type: "string[]",
-      descriptionKey: "ui.agent.periodontalChart.state.missingTeeth",
-      description: "FDI ids of every tooth flagged as missing.",
-      read: (s) => s.missingTeeth()
-    },
-    chartedTeeth: {
-      type: "string[]",
-      descriptionKey: "ui.agent.periodontalChart.state.chartedTeeth",
-      description: "FDI ids of teeth carrying at least one probing reading or flag. Identifiers only — never patient identity or the free-text note.",
-      read: (s) => Object.entries(s.getValue()).filter(([, t]) => t.missing || t.implant || t.mobility != null || t.furcation && Object.keys(t.furcation).length > 0 ? !0 : (t.sites ? Object.values(t.sites) : []).some(
-        (d) => d != null && (d.pocketDepthMm != null || d.recessionMm != null || d.bleeding || d.plaque || d.suppuration)
-      )).map(([t]) => t)
-    }
-  },
-  actions: {
-    focus_site: {
-      safety: "read",
-      argsType: '{ fdi: string; site: PeriodontalSiteId; field: "pocketDepthMm" | "recessionMm" }',
-      argsSchema: {
-        type: "object",
-        properties: {
-          fdi: j,
-          site: $,
-          field: { enum: ["pocketDepthMm", "recessionMm"] }
-        },
-        required: ["fdi", "site", "field"]
-      },
-      idempotent: !0,
-      descriptionKey: "ui.agent.periodontalChart.actions.focusSite",
-      description: "Move focus to a specific probing-measurement input.",
-      invoke: (s, t) => {
-        s.focusSite(t.fdi, t.site, t.field);
-      }
-    },
-    get_tooth: {
-      safety: "read",
-      argsType: "{ fdi: string }",
-      argsSchema: {
-        type: "object",
-        properties: { fdi: j },
-        required: ["fdi"]
-      },
-      returns: "object | null",
-      returnsSchema: { type: ["object", "null"] },
-      idempotent: !0,
-      descriptionKey: "ui.agent.periodontalChart.actions.getTooth",
-      description: "Read one tooth’s structural readings (sites, flags, mobility, furcation). The free-text note is never returned.",
-      invoke: (s, t) => ut(s.getTooth(t.fdi))
-    },
-    get_indices: {
-      safety: "read",
-      argsType: "{}",
-      argsSchema: { type: "object", properties: {} },
-      returns: "PeriodontalIndices",
-      returnsSchema: ct,
-      idempotent: !0,
-      descriptionKey: "ui.agent.periodontalChart.actions.getIndices",
-      description: "Read the derived whole-mouth summary indices.",
-      invoke: (s) => s.getIndices()
-    },
-    get_findings: {
-      safety: "read",
-      argsType: "{}",
-      argsSchema: { type: "object", properties: {} },
-      returns: "PeriodontalToothFinding[]",
-      returnsSchema: dt,
-      idempotent: !0,
-      descriptionKey: "ui.agent.periodontalChart.actions.getFindings",
-      description: "Read the narratable per-tooth problem list (flagged teeth only). Use it to summarise the chart aloud — e.g. “46: 8 mm disto-buccal pocket, bleeding, grade 2 mobility”. Structural readings and FDI ids only; the free-text note is never returned.",
-      invoke: (s) => s.getFindings()
-    },
-    set_depth: {
-      safety: "write",
-      argsType: "{ fdi: string; site: PeriodontalSiteId; mm: number }",
-      argsSchema: {
-        type: "object",
-        properties: { fdi: j, site: $, mm: fe },
-        required: ["fdi", "site", "mm"]
-      },
-      idempotent: !0,
-      descriptionKey: "ui.agent.periodontalChart.actions.setDepth",
-      description: "Record the probing pocket depth (mm) at a site.",
-      invoke: (s, t) => {
-        s.setSite(t.fdi, t.site, {
-          pocketDepthMm: Math.max(0, t.mm)
-        });
-      }
-    },
-    set_recession: {
-      safety: "write",
-      argsType: "{ fdi: string; site: PeriodontalSiteId; mm: number }",
-      argsSchema: {
-        type: "object",
-        properties: { fdi: j, site: $, mm: fe },
-        required: ["fdi", "site", "mm"]
-      },
-      idempotent: !0,
-      descriptionKey: "ui.agent.periodontalChart.actions.setRecession",
-      description: "Record the gingival recession (mm) at a site.",
-      invoke: (s, t) => {
-        s.setSite(t.fdi, t.site, { recessionMm: t.mm });
-      }
-    },
-    toggle_bleeding: {
-      safety: "write",
-      argsType: "{ fdi: string; site: PeriodontalSiteId; value: boolean }",
-      argsSchema: {
-        type: "object",
-        properties: {
-          fdi: j,
-          site: $,
-          value: { type: "boolean" }
-        },
-        required: ["fdi", "site", "value"]
-      },
-      idempotent: !0,
-      descriptionKey: "ui.agent.periodontalChart.actions.toggleBleeding",
-      description: "Set bleeding on probing at a site.",
-      invoke: (s, t) => {
-        s.setSite(t.fdi, t.site, { bleeding: t.value });
-      }
-    },
-    toggle_plaque: {
-      safety: "write",
-      argsType: "{ fdi: string; site: PeriodontalSiteId; value: boolean }",
-      argsSchema: {
-        type: "object",
-        properties: {
-          fdi: j,
-          site: $,
-          value: { type: "boolean" }
-        },
-        required: ["fdi", "site", "value"]
-      },
-      idempotent: !0,
-      descriptionKey: "ui.agent.periodontalChart.actions.togglePlaque",
-      description: "Set plaque presence at a site.",
-      invoke: (s, t) => {
-        s.setSite(t.fdi, t.site, { plaque: t.value });
-      }
-    },
-    set_mobility: {
-      safety: "write",
-      argsType: "{ fdi: string; grade: 0 | 1 | 2 | 3 }",
-      argsSchema: {
-        type: "object",
-        properties: {
-          fdi: j,
-          grade: { enum: [0, 1, 2, 3] }
-        },
-        required: ["fdi", "grade"]
-      },
-      idempotent: !0,
-      descriptionKey: "ui.agent.periodontalChart.actions.setMobility",
-      description: "Set a tooth’s Miller mobility grade (0–3).",
-      invoke: (s, t) => {
-        s.setTooth(t.fdi, { mobility: t.grade });
-      }
-    },
-    set_missing: {
-      safety: "write",
-      argsType: "{ fdi: string; value: boolean }",
-      argsSchema: {
-        type: "object",
-        properties: { fdi: j, value: { type: "boolean" } },
-        required: ["fdi", "value"]
-      },
-      idempotent: !0,
-      descriptionKey: "ui.agent.periodontalChart.actions.setMissing",
-      description: "Flag a tooth present or absent.",
-      invoke: (s, t) => {
-        s.setTooth(t.fdi, { missing: t.value });
-      }
-    },
-    clear_tooth: {
-      safety: "destructive",
-      argsType: "{ fdi: string }",
-      argsSchema: {
-        type: "object",
-        properties: { fdi: j },
-        required: ["fdi"]
-      },
-      idempotent: !0,
-      descriptionKey: "ui.agent.periodontalChart.actions.clearTooth",
-      description: "Clear every reading from a tooth.",
-      invoke: (s, t) => {
-        s.clearTooth(t.fdi);
-      }
-    }
-  },
-  domHooks: {
-    root: {
-      attr: "data-component",
-      value: "periodontal-chart",
-      description: "Marks the PeriodontalChart root group."
-    },
-    instanceId: {
-      attr: "data-component-id",
-      sourceProp: "id",
-      description: "Sourced from the id prop."
-    },
-    item: {
-      attr: "data-fdi",
-      description: "Each tooth column header carries its FDI id as `data-fdi`. Every measurement input also carries `data-fdi` + `data-site` + `data-field`. The root `data-mode` exposes interactive vs display."
-    }
-  }
-}, be = ["db", "b", "mb"], mt = ["dl", "l", "ml"];
-function Ae(s) {
-  return s === "buccal" ? be : mt;
-}
-const xe = 4, oe = 6, ht = 20, gt = 5;
-function Fe(s, t = xe, h = oe) {
-  return s == null || !Number.isFinite(s) ? "normal" : s >= h ? "severe" : s >= t ? "moderate" : "normal";
-}
-const ft = {
-  18: { buccal: 1, lingual: 2 },
-  17: { buccal: 1, lingual: 2 },
-  16: { buccal: 1, lingual: 2 },
-  15: { buccal: 2, lingual: 2 },
-  14: { buccal: 0, lingual: 2 },
-  24: { buccal: 0, lingual: 2 },
-  25: { buccal: 2, lingual: 2 },
-  26: { buccal: 1, lingual: 2 },
-  27: { buccal: 1, lingual: 2 },
-  28: { buccal: 1, lingual: 2 },
-  48: { buccal: 1, lingual: 1 },
-  47: { buccal: 1, lingual: 1 },
-  46: { buccal: 1, lingual: 1 },
-  36: { buccal: 1, lingual: 1 },
-  37: { buccal: 1, lingual: 1 },
-  38: { buccal: 1, lingual: 1 }
-};
-function bt(s, t) {
-  var h;
-  return ((h = ft[s]) == null ? void 0 : h[t]) ?? 0;
-}
-const vt = ve.slice(0, 16), yt = ve.slice(16), xt = ye.slice(0, 10), Nt = ye.slice(10);
-function Oe(s) {
-  return s === "primary" ? { upper: xt, lower: Nt } : {
-    upper: vt,
-    lower: yt
-  };
-}
-function _e(s, t) {
-  return t === "universal" ? at[s] ?? s : t === "palmer" ? it[s] ?? s : s;
-}
-function ie(s) {
-  const t = Math.round(s * 10) / 10;
-  return t === 0 ? 0 : t;
-}
-function Le(s) {
-  let t = 0, h = 0, d = 0, f = 0, E = 0, S = 0;
-  for (const L of Object.values(s))
-    if (!(L.missing || !L.sites))
-      for (const P of Object.values(L.sites)) {
-        if (!P) continue;
-        const y = P.pocketDepthMm;
-        y == null || !Number.isFinite(y) || (d += 1, t += y, h += y + (P.recessionMm ?? 0), y >= oe && (S += 1), P.bleeding && (f += 1), P.plaque && (E += 1));
-      }
-  return d === 0 ? {
-    meanPocketDepthMm: null,
-    meanAttachmentLevelMm: null,
-    plaquePercent: null,
-    bleedingPercent: null,
-    scoredSiteCount: 0,
-    deepPocketCount: 0
-  } : {
-    meanPocketDepthMm: ie(t / d),
-    meanAttachmentLevelMm: ie(h / d),
-    plaquePercent: ie(E / d * 100),
-    bleedingPercent: ie(f / d * 100),
-    scoredSiteCount: d,
-    deepPocketCount: S
-  };
-}
-const Mt = [...ve, ...ye];
-function kt(s, t) {
-  var L, P;
-  const h = (t == null ? void 0 : t.moderate) ?? xe, d = (t == null ? void 0 : t.severe) ?? oe, f = /* @__PURE__ */ new Map();
-  Mt.forEach((y, C) => f.set(y, C));
-  const E = Object.keys(s).sort(
-    (y, C) => (f.get(y) ?? Number.MAX_SAFE_INTEGER) - (f.get(C) ?? Number.MAX_SAFE_INTEGER)
-  ), S = [];
-  for (const y of E) {
-    const C = s[y];
-    if (!C) continue;
-    if (C.missing) {
-      S.push({
-        fdi: y,
-        status: "missing",
-        severity: "normal",
-        maxPocketDepthMm: null,
-        pockets: [],
-        bleedingSites: [],
-        plaqueSites: [],
-        suppurationSites: [],
-        maxRecessionMm: null,
-        mobility: null,
-        furcation: []
-      });
-      continue;
-    }
-    const G = C.implant ? "implant" : "present", q = [], Z = [], te = [], z = [];
-    let Y = null, X = null;
-    for (const M of je) {
-      const V = (L = C.sites) == null ? void 0 : L[M];
-      if (!V) continue;
-      const { pocketDepthMm: K, recessionMm: B, bleeding: b, plaque: H, suppuration: D } = V;
-      if (K != null && Number.isFinite(K)) {
-        Y = Y == null ? K : Math.max(Y, K);
-        const F = Fe(K, h, d);
-        F !== "normal" && q.push({ site: M, pocketDepthMm: K, severity: F });
-      }
-      B != null && Number.isFinite(B) && B > 0 && (X = X == null ? B : Math.max(X, B)), b && Z.push(M), H && te.push(M), D && z.push(M);
-    }
-    q.sort((M, V) => V.pocketDepthMm - M.pocketDepthMm);
-    const se = C.mobility != null && C.mobility >= 1 ? C.mobility : null, i = [];
-    if (C.furcation)
-      for (const M of ["buccal", "lingual"])
-        (P = C.furcation[M]) != null && P.some(Boolean) && i.push(M);
-    const le = q.some(
-      (M) => M.severity === "severe"
-    ) ? "severe" : q.length > 0 ? "moderate" : "normal";
-    (G === "implant" || q.length > 0 || Z.length > 0 || z.length > 0 || se != null || i.length > 0) && S.push({
-      fdi: y,
-      status: G,
-      severity: le,
-      maxPocketDepthMm: Y,
-      pockets: q,
-      bleedingSites: Z,
-      plaqueSites: te,
-      suppurationSites: z,
-      maxRecessionMm: X,
-      mobility: se,
-      furcation: i
-    });
-  }
-  return S;
-}
-function Ft(s = "permanent") {
-  const { upper: t, lower: h } = Oe(s), d = {};
-  for (const f of [...t, ...h]) d[f] = {};
-  return d;
-}
-function Ot(s) {
-  const t = [];
-  for (const [h, d] of Object.entries(s))
-    if (!(d.missing || !d.sites))
-      for (const f of je) {
-        const E = d.sites[f];
-        if (!E) continue;
-        const { pocketDepthMm: S, recessionMm: L, bleeding: P, suppuration: y } = E;
-        S == null && L == null && !P && !y || t.push({
-          tooth: h,
-          site: f,
-          pocketDepthMm: S,
-          recessionMm: L,
-          bleeding: P,
-          suppuration: y
-        });
-      }
-  return t;
-}
-function $t(s) {
-  const t = {};
-  for (const [h, d] of Object.entries(s))
-    d.mobility != null && (t[h] = d.mobility);
-  return t;
-}
-const Ct = qe(
-  "ds:w-full ds:flex ds:flex-col ds:gap-[var(--spacing-lg)] ds:text-[color:var(--foreground)]",
-  {
-    variants: {
-      // Disabled is conveyed by the inputs' own `disabled` state (native
-      // disabled controls are excluded from the axe contrast check). We must
-      // NOT dim the whole root with opacity — that would drop the legend,
-      // captions and headers below the AA contrast floor.
-      disabled: { true: "ds:cursor-not-allowed", false: "" }
-    },
-    defaultVariants: { disabled: !1 }
-  }
-), wt = qe(
-  "ds:h-6 ds:w-[3.5ch] ds:rounded-[var(--radius-sm)] ds:border ds:bg-[var(--background)] ds:text-center ds:tabular-nums ds:[font-variant-numeric:var(--font-feature-tabular)] ds:outline-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
-  {
-    variants: {
-      severity: {
-        normal: "ds:border-[color:var(--input)] ds:text-[color:var(--foreground)]",
-        moderate: "ds:border-[color:var(--warning)] ds:font-semibold ds:text-[color:var(--warning-foreground)]",
-        severe: "ds:border-[color:var(--destructive)] ds:font-bold ds:text-[color:var(--destructive)]"
-      }
-    },
-    defaultVariants: { severity: "normal" }
-  }
-);
-function St(s, t, h) {
-  return { ...s, [t]: { ...s[t], ...h } };
-}
-function Pt(s, t, h, d) {
-  const f = s[t] ?? {}, E = f.sites ?? {};
-  return {
-    ...s,
-    [t]: {
-      ...f,
-      sites: { ...E, [h]: { ...E[h], ...d } }
-    }
-  };
-}
-function Tt(s) {
-  return s === "severe" ? "ds:font-bold ds:text-[color:var(--destructive)]" : s === "moderate" ? "ds:font-semibold ds:text-[color:var(--warning-foreground)]" : "";
-}
-const Et = {
-  db: "disto-buccal",
-  b: "buccal",
-  mb: "mesio-buccal",
-  dl: "disto-lingual",
-  l: "lingual",
-  ml: "mesio-lingual"
-}, Dt = et(
-  ({
-    value: s,
-    defaultValue: t,
-    onChange: h,
-    mode: d = "interactive",
-    disabled: f = !1,
-    dentition: E = "permanent",
-    numbering: S = "fdi",
-    showTeeth: L = !0,
-    assetBaseUrl: P = "/toothscheme/teeth",
-    showCurves: y = !0,
-    showIndices: C = !0,
-    moderatePocketMm: G = xe,
-    severePocketMm: q = oe,
-    locale: Z,
-    "aria-label": te,
-    id: z,
-    className: Y,
-    ...X
-  }, se) => {
-    const { t: i, i18n: le } = rt("ui"), ce = Z ?? le.language ?? "en", M = Re(null), V = s !== void 0, [K, B] = tt(
-      () => t ?? {}
-    ), b = V ? s : K, H = d === "display", D = Re(b);
-    D.current = b;
-    const F = O(
-      (e) => {
-        D.current = e, V || B(e), h == null || h(e);
-      },
-      [V, h]
-    ), re = O(
-      (e, r, a) => F(Pt(D.current, e, r, a)),
-      [F]
-    ), Q = O(
-      (e, r) => F(St(D.current, e, r)),
-      [F]
-    ), Ne = O(
-      (e) => {
-        const r = { ...D.current };
-        delete r[e], F(r);
-      },
-      [F]
-    ), Me = O(
-      (e, r, a) => {
-        var o, l;
-        try {
-          (l = (o = M.current) == null ? void 0 : o.querySelector(
-            `[data-perio-input][data-fdi="${e}"][data-site="${r}"][data-field="${a}"]`
-          )) == null || l.focus();
-        } catch {
-        }
-      },
-      []
-    ), R = Ie(
-      () => Le(b),
-      [b]
-    ), de = Ie(
-      () => ({
-        getValue: () => D.current,
-        getTooth: (e) => D.current[e],
-        getIndices: () => Le(D.current),
-        getFindings: () => kt(D.current, {
-          moderate: G,
-          severe: q
-        }),
-        missingTeeth: () => Object.entries(D.current).filter(([, e]) => e.missing).map(([e]) => e),
-        setSite: re,
-        setTooth: Q,
-        clearTooth: Ne,
-        focusSite: Me
-      }),
-      [
-        re,
-        Q,
-        Ne,
-        Me,
-        G,
-        q
-      ]
-    );
-    st(se, () => de, [de]), nt(pt, de, z);
-    const ke = Oe(E), $e = te ?? i("periodontalChart.ariaLabel", "Periodontal chart"), ee = O(
-      (e) => {
-        try {
-          return new Intl.NumberFormat(ce, {
-            maximumFractionDigits: 1
-          }).format(e);
-        } catch {
-          return String(e);
-        }
-      },
-      [ce]
-    ), Ce = O(
-      (e) => i(`periodontalChart.site.${e}`, {
-        defaultValue: Et[e]
-      }),
-      [i]
-    ), U = O(
-      (e) => _e(e, S),
-      [S]
-    ), I = /* @__PURE__ */ n(
-      "span",
-      {
-        "aria-hidden": "true",
-        className: "ds:text-[color:var(--muted-foreground)]",
-        children: i("periodontalChart.cell.empty", "–")
-      }
-    ), Ve = O((e) => {
-      var k;
-      const r = e.target;
-      if (!((k = r.matches) != null && k.call(r, "[data-perio-input]"))) return;
-      const a = e.key;
-      if (a !== "ArrowLeft" && a !== "ArrowRight" && a !== "ArrowUp" && a !== "ArrowDown")
-        return;
-      e.preventDefault();
-      const o = M.current;
-      if (!o) return;
-      if (a === "ArrowUp" || a === "ArrowDown") {
-        const v = r.getAttribute("data-fdi"), A = r.getAttribute("data-site"), N = r.getAttribute("data-field") === "pocketDepthMm" ? "recessionMm" : "pocketDepthMm", _ = o.querySelector(
-          `[data-perio-input][data-fdi="${v}"][data-site="${A}"][data-field="${N}"]`
-        );
-        _ == null || _.focus(), _ == null || _.select();
-        return;
-      }
-      const l = Array.from(
-        o.querySelectorAll("[data-perio-input]")
-      ), p = l.indexOf(r);
-      if (p === -1) return;
-      const c = l[p + (a === "ArrowRight" ? 1 : -1)];
-      c == null || c.focus(), c == null || c.select();
-    }, []), T = "ds:px-[var(--spacing-2xs)] ds:py-[var(--spacing-2xs)] ds:text-center ds:border-b ds:border-[color:var(--border)]", W = "ds:px-[var(--spacing-xs)] ds:py-[var(--spacing-2xs)] ds:text-start ds:font-medium ds:border-b ds:border-[color:var(--border)] ds:whitespace-nowrap", Ke = (e, r, a) => {
-      var c, k, v;
-      const o = (v = (k = (c = b[e]) == null ? void 0 : c.sites) == null ? void 0 : k[r]) == null ? void 0 : v[a], l = a === "pocketDepthMm" ? Fe(o, G, q) : "normal", p = i(`periodontalChart.input.${a}`, {
-        tooth: U(e),
-        site: Ce(r),
-        defaultValue: a === "pocketDepthMm" ? "Tooth {{tooth}} {{site}} pocket depth, millimetres" : "Tooth {{tooth}} {{site}} recession, millimetres"
-      }), g = l === "severe" ? i("periodontalChart.flag.severe", "severe pocket") : l === "moderate" ? i("periodontalChart.flag.moderate", "moderate pocket") : "";
-      return H ? o == null || !Number.isFinite(o) ? /* @__PURE__ */ n("span", { className: "ds:inline-block ds:w-[3.5ch]", children: I }) : /* @__PURE__ */ m(
-        "span",
-        {
-          className: `ds:inline-block ds:w-[3.5ch] ds:tabular-nums ds:[font-variant-numeric:var(--font-feature-tabular)] ${Tt(
-            l
-          )}`,
-          children: [
-            /* @__PURE__ */ n("span", { children: ee(o) }),
-            g ? /* @__PURE__ */ m("span", { className: "ds:sr-only", children: [
-              " ",
-              g
-            ] }) : null
-          ]
-        }
-      ) : /* @__PURE__ */ n(
-        "input",
-        {
-          type: "text",
-          inputMode: "numeric",
-          autoComplete: "off",
-          disabled: f,
-          "aria-label": g ? `${p}, ${g}` : p,
-          "data-perio-input": "",
-          "data-fdi": e,
-          "data-site": r,
-          "data-field": a,
-          value: o == null ? "" : String(o),
-          onFocus: (A) => A.currentTarget.select(),
-          onChange: (A) => {
-            const x = A.target.value.trim();
-            let N;
-            if (x === "" || x === "-")
-              N = void 0;
-            else {
-              const _ = Number(x);
-              if (!Number.isFinite(_)) return;
-              N = a === "pocketDepthMm" ? Math.max(0, _) : _;
-            }
-            re(
-              e,
-              r,
-              a === "pocketDepthMm" ? { pocketDepthMm: N } : { recessionMm: N }
-            );
-          },
-          className: wt({ severity: l })
-        }
-      );
-    }, He = (e, r, a) => {
-      var g, c, k;
-      const o = !!((k = (c = (g = b[e]) == null ? void 0 : g.sites) == null ? void 0 : c[r]) != null && k[a]), l = i(`periodontalChart.toggle.${a}`, {
-        tooth: U(e),
-        site: Ce(r),
-        defaultValue: a === "bleeding" ? "Tooth {{tooth}} {{site}} bleeding on probing" : "Tooth {{tooth}} {{site}} plaque"
-      }), p = a === "bleeding" ? "ds:accent-[var(--destructive)]" : "ds:accent-[var(--warning)]";
-      return H ? o ? /* @__PURE__ */ n(
-        "span",
-        {
-          role: "img",
-          "aria-label": l,
-          className: `ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ${a === "bleeding" ? "ds:bg-[var(--destructive)]" : "ds:bg-[var(--warning)]"}`
-        }
-      ) : /* @__PURE__ */ n("span", { className: "ds:inline-block ds:size-6", children: I }) : /* @__PURE__ */ m("label", { className: "ds:inline-flex ds:size-6 ds:cursor-pointer ds:items-center ds:justify-center", children: [
-        /* @__PURE__ */ n("span", { className: "ds:sr-only", children: l }),
-        /* @__PURE__ */ n(
-          "input",
-          {
-            type: "checkbox",
-            disabled: f,
-            checked: o,
-            onChange: (v) => re(
-              e,
-              r,
-              a === "bleeding" ? { bleeding: v.target.checked } : { plaque: v.target.checked }
-            ),
-            className: `ds:size-4 ${p} ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:disabled:cursor-not-allowed ds:disabled:opacity-50`
-          }
-        )
-      ] });
-    }, ze = (e, r) => {
-      var p;
-      const a = b[e], o = bt(e, r);
-      if (a != null && a.missing || o === 0) return I;
-      const l = ((p = a == null ? void 0 : a.furcation) == null ? void 0 : p[r]) ?? [];
-      return /* @__PURE__ */ n("span", { className: "ds:inline-flex ds:items-center ds:justify-center ds:gap-[var(--spacing-2xs)]", children: Array.from({ length: o }, (g, c) => {
-        const k = !!l[c], v = i("periodontalChart.toggle.furcation", {
-          tooth: U(e),
-          side: i(`periodontalChart.side.${r}`, {
-            defaultValue: r === "buccal" ? "buccal" : "lingual"
-          }),
-          n: c + 1,
-          defaultValue: "Tooth {{tooth}} {{side}} furcation {{n}}"
-        });
-        return H ? k ? /* @__PURE__ */ n(
-          "span",
-          {
-            role: "img",
-            "aria-label": v,
-            className: "ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ds:bg-[var(--primary)]"
-          },
-          c
-        ) : /* @__PURE__ */ n(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ds:border ds:border-[color:var(--border)]"
-          },
-          c
-        ) : /* @__PURE__ */ m(
-          "label",
-          {
-            className: "ds:inline-flex ds:size-6 ds:cursor-pointer ds:items-center ds:justify-center",
-            children: [
-              /* @__PURE__ */ n("span", { className: "ds:sr-only", children: v }),
-              /* @__PURE__ */ n(
-                "input",
-                {
-                  type: "checkbox",
-                  disabled: f,
-                  checked: k,
-                  onChange: (A) => {
-                    var N;
-                    const x = [...((N = a == null ? void 0 : a.furcation) == null ? void 0 : N[r]) ?? []];
-                    for (; x.length < o; ) x.push(!1);
-                    x[c] = A.target.checked, Q(e, {
-                      furcation: { ...a == null ? void 0 : a.furcation, [r]: x }
-                    });
-                  },
-                  className: "ds:size-4 ds:accent-[var(--primary)] ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
-                }
-              )
-            ]
-          },
-          c
-        );
-      }) });
-    }, ne = (e, r, a, o, l) => /* @__PURE__ */ m("tr", { children: [
-      /* @__PURE__ */ n("th", { scope: "row", className: W, children: i(r, a) }),
-      e.map((p) => {
-        var g;
-        return /* @__PURE__ */ n("td", { className: T, children: (g = b[p]) != null && g.missing ? I : /* @__PURE__ */ n("span", { className: "ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-2xs)]", children: Ae(o).map((c) => /* @__PURE__ */ n("span", { children: Ke(p, c, l) }, c)) }) }, p);
-      })
-    ] }), ae = (e, r, a, o, l) => /* @__PURE__ */ m("tr", { children: [
-      /* @__PURE__ */ n("th", { scope: "row", className: W, children: i(r, a) }),
-      e.map((p) => {
-        var g;
-        return /* @__PURE__ */ n("td", { className: T, children: (g = b[p]) != null && g.missing ? I : /* @__PURE__ */ n("span", { className: "ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-2xs)]", children: Ae(o).map((c) => /* @__PURE__ */ n("span", { children: He(p, c, l) }, c)) }) }, p);
-      })
-    ] }), we = (e, r) => /* @__PURE__ */ m("tr", { children: [
-      /* @__PURE__ */ n("th", { scope: "row", className: W, children: i("periodontalChart.row.furcation", "Furcation") }),
-      e.map((a) => /* @__PURE__ */ n("td", { className: T, children: ze(a, r) }, a))
-    ] }), Se = (e, r, a, o) => /* @__PURE__ */ m("tr", { children: [
-      /* @__PURE__ */ n("th", { scope: "row", className: W, children: i(r, a) }),
-      e.map((l) => {
-        var c, k;
-        if (o === "implant" && ((c = b[l]) != null && c.missing))
-          return /* @__PURE__ */ n("td", { className: T, children: I }, l);
-        const p = !!((k = b[l]) != null && k[o]), g = i(`periodontalChart.flag.${o}Label`, {
-          tooth: U(l),
-          defaultValue: o === "missing" ? "Tooth {{tooth}} missing" : "Tooth {{tooth}} implant"
-        });
-        return /* @__PURE__ */ n("td", { className: T, children: H ? p ? /* @__PURE__ */ n(
-          "span",
-          {
-            role: "img",
-            "aria-label": g,
-            className: "type-meta ds:font-semibold",
-            children: o === "missing" ? i("periodontalChart.flag.missingShort", "×") : i("periodontalChart.flag.implantShort", "I")
-          }
-        ) : I : /* @__PURE__ */ m("label", { className: "ds:inline-flex ds:size-6 ds:cursor-pointer ds:items-center ds:justify-center", children: [
-          /* @__PURE__ */ n("span", { className: "ds:sr-only", children: g }),
-          /* @__PURE__ */ n(
-            "input",
-            {
-              type: "checkbox",
-              disabled: f,
-              checked: p,
-              onChange: (v) => Q(
-                l,
-                o === "missing" ? { missing: v.target.checked } : { implant: v.target.checked }
-              ),
-              className: "ds:size-4 ds:accent-[var(--primary)] ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
-            }
-          )
-        ] }) }, l);
-      })
-    ] }), Be = (e) => /* @__PURE__ */ m("tr", { children: [
-      /* @__PURE__ */ n("th", { scope: "row", className: W, children: i("periodontalChart.row.mobility", "Mobility") }),
-      e.map((r) => {
-        var l, p;
-        if ((l = b[r]) != null && l.missing)
-          return /* @__PURE__ */ n("td", { className: T, children: I }, r);
-        const a = (p = b[r]) == null ? void 0 : p.mobility, o = i("periodontalChart.mobility.label", {
-          tooth: U(r),
-          defaultValue: "Tooth {{tooth}} mobility grade"
-        });
-        return H ? /* @__PURE__ */ n("td", { className: T, children: a == null ? I : /* @__PURE__ */ n("span", { role: "img", "aria-label": o, className: "type-meta", children: a }) }, r) : /* @__PURE__ */ n("td", { className: T, children: /* @__PURE__ */ m(
-          "select",
-          {
-            disabled: f,
-            "aria-label": o,
-            value: a == null ? "" : String(a),
-            onChange: (g) => Q(r, {
-              mobility: g.target.value === "" ? void 0 : Number(g.target.value)
-            }),
-            className: "ds:h-6 ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--input)] ds:bg-[var(--background)] ds:text-[color:var(--foreground)] ds:text-center ds:outline-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
-            children: [
-              /* @__PURE__ */ n("option", { value: "", children: i("periodontalChart.mobility.none", "–") }),
-              /* @__PURE__ */ n("option", { value: "0", children: "0" }),
-              /* @__PURE__ */ n("option", { value: "1", children: "1" }),
-              /* @__PURE__ */ n("option", { value: "2", children: "2" }),
-              /* @__PURE__ */ n("option", { value: "3", children: "3" })
-            ]
-          }
-        ) }, r);
-      })
-    ] }), Ue = (e) => /* @__PURE__ */ m("tr", { children: [
-      /* @__PURE__ */ n("th", { scope: "row", className: W, children: i("periodontalChart.row.note", "Note") }),
-      e.map((r) => {
-        var l, p;
-        if ((l = b[r]) != null && l.missing)
-          return /* @__PURE__ */ n("td", { className: T, children: I }, r);
-        const a = ((p = b[r]) == null ? void 0 : p.note) ?? "", o = i("periodontalChart.note.label", {
-          tooth: U(r),
-          defaultValue: "Tooth {{tooth}} note"
-        });
-        return H ? /* @__PURE__ */ n("td", { className: `${T} ds:text-start`, children: a ? /* @__PURE__ */ n("span", { className: "type-meta", children: a }) : I }, r) : /* @__PURE__ */ n("td", { className: T, children: /* @__PURE__ */ n(
-          "input",
-          {
-            type: "text",
-            disabled: f,
-            "aria-label": o,
-            value: a,
-            onChange: (g) => Q(r, { note: g.target.value }),
-            className: "ds:h-6 ds:w-[6ch] ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--input)] ds:bg-[var(--background)] ds:text-[color:var(--foreground)] ds:px-[var(--spacing-2xs)] ds:outline-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
-          }
-        ) }, r);
-      })
-    ] }), We = (e) => /* @__PURE__ */ m("tr", { children: [
-      /* @__PURE__ */ n("th", { scope: "row", className: W, children: i("periodontalChart.row.tooth", "Tooth") }),
-      e.map((r) => {
-        const a = b[r], o = ot[r];
-        if (a != null && a.missing || !o)
-          return /* @__PURE__ */ n("td", { className: T, children: I }, r);
-        const l = a != null && a.implant ? "implant" : "default";
-        return /* @__PURE__ */ n("td", { className: T, children: /* @__PURE__ */ n(
-          "img",
-          {
-            src: lt(o, P, l, "side"),
-            alt: "",
-            "aria-hidden": "true",
-            loading: "lazy",
-            className: "ds:mx-auto ds:h-12 ds:w-auto ds:max-w-full ds:object-contain"
-          }
-        ) }, r);
-      })
-    ] }), Ge = (e) => {
-      var Te, Ee, De;
-      const c = (u) => 38 + Math.min(Math.max(0, u), 13) * 6, k = (u) => 38 - Math.min(Math.max(0, u), 5) * 6, v = [], A = [];
-      let x = [], N = [];
-      const _ = () => {
-        x.length && v.push(x), N.length && A.push(N), x = [], N = [];
-      };
-      let ue = 12;
-      for (const u of e) {
-        const w = (Te = b[u]) == null ? void 0 : Te.missing;
-        for (const Ze of be) {
-          const J = w || (De = (Ee = b[u]) == null ? void 0 : Ee.sites) == null ? void 0 : De[Ze], he = J == null ? void 0 : J.pocketDepthMm, ge = J == null ? void 0 : J.recessionMm;
-          he != null && Number.isFinite(he) ? x.push({ x: ue, y: c(he) }) : x.length && (v.push(x), x = []), ge != null && Number.isFinite(ge) ? N.push({ x: ue, y: k(ge) }) : N.length && (A.push(N), N = []), ue += 24;
-        }
-      }
-      _();
-      const pe = e.length * be.length * 24, me = (u) => u.map((w) => `${w.x},${w.y}`).join(" "), Qe = v.flat(), Je = A.flat();
-      return /* @__PURE__ */ m(
-        "svg",
-        {
-          viewBox: `0 0 ${pe} 124`,
-          className: "ds:h-[132px] ds:w-full",
-          preserveAspectRatio: "none",
-          "aria-hidden": "true",
-          focusable: "false",
-          children: [
-            [3, 6, 9, 12].map((u) => /* @__PURE__ */ n(
-              "line",
-              {
-                x1: 0,
-                x2: pe,
-                y1: c(u),
-                y2: c(u),
-                stroke: "var(--border)",
-                strokeWidth: 1,
-                strokeDasharray: "2 4"
-              },
-              u
-            )),
-            /* @__PURE__ */ n(
-              "line",
-              {
-                x1: 0,
-                x2: pe,
-                y1: 38,
-                y2: 38,
-                stroke: "var(--border)",
-                strokeWidth: 1.5
-              }
-            ),
-            v.map(
-              (u, w) => u.length >= 2 ? /* @__PURE__ */ n(
-                "polygon",
-                {
-                  points: `${u[0].x},38 ${me(u)} ${u[u.length - 1].x},38`,
-                  fill: "var(--success)",
-                  fillOpacity: 0.14
-                },
-                `fill-${w}`
-              ) : null
-            ),
-            v.map(
-              (u, w) => u.length >= 2 ? /* @__PURE__ */ n(
-                "polyline",
-                {
-                  points: me(u),
-                  fill: "none",
-                  stroke: "var(--success)",
-                  strokeWidth: 2.5,
-                  strokeLinejoin: "round",
-                  strokeLinecap: "round"
-                },
-                `depth-${w}`
-              ) : null
-            ),
-            A.map(
-              (u, w) => u.length >= 2 ? /* @__PURE__ */ n(
-                "polyline",
-                {
-                  points: me(u),
-                  fill: "none",
-                  stroke: "var(--accent)",
-                  strokeWidth: 2.5,
-                  strokeLinejoin: "round",
-                  strokeLinecap: "round"
-                },
-                `margin-${w}`
-              ) : null
-            ),
-            Qe.map((u, w) => /* @__PURE__ */ n(
-              "circle",
-              {
-                cx: u.x,
-                cy: u.y,
-                r: 2,
-                fill: "var(--success)"
-              },
-              `dp-${w}`
-            )),
-            Je.map((u, w) => /* @__PURE__ */ n(
-              "circle",
-              {
-                cx: u.x,
-                cy: u.y,
-                r: 2,
-                fill: "var(--accent)"
-              },
-              `mp-${w}`
-            ))
-          ]
-        }
-      );
-    }, Pe = (e, r, a) => /* @__PURE__ */ n("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: /* @__PURE__ */ m(
-      "div",
-      {
-        tabIndex: 0,
-        role: "group",
-        dir: "ltr",
-        "aria-label": i(r, a),
-        className: "ds:overflow-x-auto ds:rounded-[var(--radius-sm)] ds:outline-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-        children: [
-          /* @__PURE__ */ m("table", { className: "type-body-sm ds:w-full ds:border-collapse", children: [
-            /* @__PURE__ */ n("caption", { className: "type-label ds:text-start ds:mb-[var(--spacing-2xs)] ds:text-[color:var(--muted-foreground)]", children: i(r, a) }),
-            /* @__PURE__ */ n("thead", { children: /* @__PURE__ */ m("tr", { children: [
-              /* @__PURE__ */ n(
-                "th",
-                {
-                  scope: "col",
-                  className: "ds:px-[var(--spacing-xs)] ds:py-[var(--spacing-2xs)] ds:text-start ds:border-b ds:border-[color:var(--border)]",
-                  children: i("periodontalChart.column.measure", "Measurement")
-                }
-              ),
-              e.map((o) => /* @__PURE__ */ m(
-                "th",
-                {
-                  scope: "col",
-                  "data-fdi": o,
-                  className: "ds:px-[var(--spacing-2xs)] ds:py-[var(--spacing-2xs)] ds:text-center ds:border-b ds:border-[color:var(--border)] ds:tabular-nums ds:[font-variant-numeric:var(--font-feature-tabular)]",
-                  children: [
-                    /* @__PURE__ */ n("span", { className: "ds:sr-only", children: i("periodontalChart.toothHeader", {
-                      tooth: U(o),
-                      defaultValue: "Tooth {{tooth}}"
-                    }) }),
-                    /* @__PURE__ */ n("span", { "aria-hidden": "true", children: _e(o, S) })
-                  ]
-                },
-                o
-              ))
-            ] }) }),
-            /* @__PURE__ */ m("tbody", { children: [
-              Se(
-                e,
-                "periodontalChart.row.missing",
-                "Missing",
-                "missing"
-              ),
-              Se(
-                e,
-                "periodontalChart.row.implant",
-                "Implant",
-                "implant"
-              ),
-              Be(e),
-              ne(
-                e,
-                "periodontalChart.row.pocketDepthBuccal",
-                "Pocket depth — buccal",
-                "buccal",
-                "pocketDepthMm"
-              ),
-              ne(
-                e,
-                "periodontalChart.row.recessionBuccal",
-                "Recession — buccal",
-                "buccal",
-                "recessionMm"
-              ),
-              ae(
-                e,
-                "periodontalChart.row.bleedingBuccal",
-                "Bleeding — buccal",
-                "buccal",
-                "bleeding"
-              ),
-              ae(
-                e,
-                "periodontalChart.row.plaqueBuccal",
-                "Plaque — buccal",
-                "buccal",
-                "plaque"
-              ),
-              we(e, "buccal"),
-              L ? We(e) : null,
-              ne(
-                e,
-                "periodontalChart.row.pocketDepthLingual",
-                "Pocket depth — lingual",
-                "lingual",
-                "pocketDepthMm"
-              ),
-              ne(
-                e,
-                "periodontalChart.row.recessionLingual",
-                "Recession — lingual",
-                "lingual",
-                "recessionMm"
-              ),
-              ae(
-                e,
-                "periodontalChart.row.bleedingLingual",
-                "Bleeding — lingual",
-                "lingual",
-                "bleeding"
-              ),
-              ae(
-                e,
-                "periodontalChart.row.plaqueLingual",
-                "Plaque — lingual",
-                "lingual",
-                "plaque"
-              ),
-              we(e, "lingual"),
-              Ue(e)
-            ] })
-          ] }),
-          y ? /* @__PURE__ */ n(
-            "figure",
-            {
-              className: "ds:m-0 ds:mt-[var(--spacing-2xs)]",
-              "aria-label": i("periodontalChart.curve.label", {
-                arch: i(r, a),
-                defaultValue: "{{arch}} probing depth and recession profile"
-              }),
-              children: Ge(e)
-            }
-          ) : null
-        ]
-      }
-    ) }), Ye = () => {
-      const e = [
-        {
-          key: "meanPd",
-          label: i("periodontalChart.index.meanPocketDepth", "Mean PD"),
-          value: R.meanPocketDepthMm == null ? "–" : i("periodontalChart.unit.mm", {
-            value: ee(R.meanPocketDepthMm),
-            defaultValue: "{{value}} mm"
-          }),
-          elevated: !1
-        },
-        {
-          key: "meanCal",
-          label: i("periodontalChart.index.meanAttachment", "Mean CAL"),
-          value: R.meanAttachmentLevelMm == null ? "–" : i("periodontalChart.unit.mm", {
-            value: ee(R.meanAttachmentLevelMm),
-            defaultValue: "{{value}} mm"
-          }),
-          elevated: !1
-        },
-        {
-          key: "plaque",
-          label: i("periodontalChart.index.plaque", "Plaque"),
-          value: R.plaquePercent == null ? "–" : i("periodontalChart.unit.percent", {
-            value: ee(R.plaquePercent),
-            defaultValue: "{{value}}%"
-          }),
-          elevated: R.plaquePercent != null && R.plaquePercent > ht
-        },
-        {
-          key: "bleeding",
-          label: i("periodontalChart.index.bleeding", "BoP"),
-          value: R.bleedingPercent == null ? "–" : i("periodontalChart.unit.percent", {
-            value: ee(R.bleedingPercent),
-            defaultValue: "{{value}}%"
-          }),
-          elevated: R.bleedingPercent != null && R.bleedingPercent > gt
-        }
-      ];
-      return /* @__PURE__ */ n(
-        "dl",
-        {
-          className: "type-body-sm ds:flex ds:flex-wrap ds:gap-[var(--spacing-lg)] ds:m-0",
-          "aria-label": i("periodontalChart.index.label", "Summary indices"),
-          children: e.map((r) => /* @__PURE__ */ m(
-            "div",
-            {
-              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]",
-              children: [
-                /* @__PURE__ */ n("dt", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: r.label }),
-                /* @__PURE__ */ m(
-                  "dd",
-                  {
-                    className: `ds:m-0 ds:tabular-nums ds:[font-variant-numeric:var(--font-feature-tabular)] ${r.elevated ? "ds:font-bold ds:text-[color:var(--destructive)]" : "ds:text-[color:var(--foreground)]"}`,
-                    children: [
-                      /* @__PURE__ */ n("span", { children: r.value }),
-                      r.elevated ? /* @__PURE__ */ m("span", { className: "ds:sr-only", children: [
-                        " ",
-                        i("periodontalChart.index.elevated", "elevated")
-                      ] }) : null
-                    ]
-                  }
-                )
-              ]
-            },
-            r.key
-          ))
-        }
-      );
-    }, Xe = /* @__PURE__ */ m(
-      "div",
-      {
-        role: "group",
-        "aria-label": i("periodontalChart.legend.label", "Chart legend"),
-        className: "type-meta ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-md)] ds:text-[color:var(--muted-foreground)]",
-        children: [
-          /* @__PURE__ */ m("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
-            /* @__PURE__ */ n(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: "ds:inline-block ds:h-[2px] ds:w-4 ds:bg-[var(--success)]"
-              }
-            ),
-            i("periodontalChart.legend.depth", "Pocket depth")
-          ] }),
-          /* @__PURE__ */ m("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
-            /* @__PURE__ */ n(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: "ds:inline-block ds:h-[2px] ds:w-4 ds:bg-[var(--accent)]"
-              }
-            ),
-            i("periodontalChart.legend.recession", "Recession")
-          ] }),
-          /* @__PURE__ */ m("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
-            /* @__PURE__ */ n(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: "ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ds:bg-[var(--destructive)]"
-              }
-            ),
-            i("periodontalChart.legend.bleeding", "Bleeding on probing")
-          ] }),
-          /* @__PURE__ */ m("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
-            /* @__PURE__ */ n(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: "ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ds:bg-[var(--warning)]"
-              }
-            ),
-            i("periodontalChart.legend.plaque", "Plaque")
-          ] })
-        ]
-      }
-    );
-    return (
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- roving-tabindex arrow-key nav across the chart group; each input is individually focusable and labelled
-      /* @__PURE__ */ m(
-        "div",
-        {
-          ref: M,
-          role: "group",
-          "aria-label": $e,
-          "data-component": "periodontal-chart",
-          "data-component-id": z,
-          "data-mode": d,
-          id: z,
-          ...X,
-          onKeyDown: Ve,
-          className: Ct({ disabled: f, className: Y }),
-          children: [
-            C ? Ye() : null,
-            Pe(ke.upper, "periodontalChart.arch.upper", "Upper arch"),
-            Pe(ke.lower, "periodontalChart.arch.lower", "Lower arch"),
-            Xe
-          ]
-        }
-      )
-    );
-  }
-);
-Dt.displayName = "PeriodontalChart";
-export {
-  gt as B,
-  xe as M,
-  be as P,
-  oe as S,
-  ft as a,
-  mt as b,
-  ht as c,
-  Dt as d,
-  kt as e,
-  Le as f,
-  Ft as g,
-  bt as h,
-  pt as i,
-  _e as j,
-  Fe as k,
-  Ot as l,
-  Oe as p,
-  Ae as s,
-  $t as t
-};
-//# sourceMappingURL=periodontal-chart-5nLsSuRM.js.map