@lilydesignsystem/react-headless 0.4.0 → 0.5.0

package/dist/index.js

@@ -2971,22 +2971,29 @@ function ContentBlock({
 }
 
 // components/ContentsLink.tsx
-import { jsx as jsx120 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs30 } from "react/jsx-runtime";
 function ContentsLink({
   className = "",
   href,
   label = void 0,
+  count = void 0,
+  countLabel = void 0,
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsx120(
+  return /* @__PURE__ */ jsxs30(
     "a",
     {
       className: `contents-link ${className}`,
       href,
       "aria-label": label,
+      "data-count": count,
+      "data-complete": count === 0 ? "" : void 0,
       ...restProps,
-      children
+      children: [
+        children,
+        countLabel ? /* @__PURE__ */ jsx120("span", { className: "contents-link-count", children: countLabel }) : null
+      ]
     }
   );
 }
@@ -3019,16 +3026,162 @@ function ContentsListItem({
 }
 
 // components/ContentsNav.tsx
+import React11 from "react";
 import { jsx as jsx123 } from "react/jsx-runtime";
+function activeSectionIndex(tops, offset, atBottom) {
+  if (tops.length === 0) return -1;
+  if (atBottom) return tops.length - 1;
+  let index = 0;
+  for (let i = 0; i < tops.length; i++) {
+    if (tops[i] <= offset + 1) index = i;
+  }
+  return index;
+}
+function contentsLinks(nav) {
+  return Array.from(nav.querySelectorAll('a[href^="#"]')).filter(
+    (a) => a.getAttribute("href").length > 1
+  );
+}
+function contentsLinkId(link) {
+  return decodeURIComponent((link.getAttribute("href") ?? "").slice(1));
+}
+function contentsTarget(link, doc) {
+  return doc.getElementById(contentsLinkId(link));
+}
+function startScrollspy(nav, options = {}) {
+  if (typeof window === "undefined") return () => {
+  };
+  const offset = options.offset ?? 0;
+  const spyRoot = options.root ?? null;
+  const token = options.current ?? "true";
+  const scroller = spyRoot ?? window;
+  let locked = false;
+  let lockTimer;
+  let frame = 0;
+  let last = "";
+  let hashPending = false;
+  function mark(link) {
+    for (const a of contentsLinks(nav)) {
+      if (a === link) {
+        a.setAttribute("aria-current", token);
+        a.setAttribute("data-active", "");
+      } else {
+        a.removeAttribute("aria-current");
+        a.removeAttribute("data-active");
+      }
+    }
+    for (const li of nav.querySelectorAll("li")) {
+      if (link && li.contains(link) && li.querySelector(":scope > a") !== link) {
+        li.setAttribute("data-descendant-active", "");
+      } else {
+        li.removeAttribute("data-descendant-active");
+      }
+    }
+    const id = link ? contentsLinkId(link) : "";
+    if (id !== last) {
+      last = id;
+      if (id) options.onChange?.(id);
+    }
+  }
+  function update() {
+    if (locked) return;
+    if (hashPending) {
+      const id = decodeURIComponent(window.location.hash.slice(1));
+      const hashed = id ? contentsLinks(nav).find((a) => contentsLinkId(a) === id) : void 0;
+      if (hashed) {
+        mark(hashed);
+        return;
+      }
+    }
+    const pairs = contentsLinks(nav).map((a) => ({ a, el: contentsTarget(a, nav.ownerDocument) })).filter((p) => p.el !== null);
+    if (pairs.length === 0) {
+      mark(void 0);
+      return;
+    }
+    const base = spyRoot ? spyRoot.getBoundingClientRect().top : 0;
+    const tops = pairs.map((p) => p.el.getBoundingClientRect().top - base);
+    const atBottom = spyRoot ? spyRoot.scrollTop + spyRoot.clientHeight >= spyRoot.scrollHeight - 1 : window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 1;
+    mark(pairs[activeSectionIndex(tops, offset, atBottom)].a);
+  }
+  function schedule() {
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      update();
+    });
+  }
+  function onScroll() {
+    hashPending = false;
+    schedule();
+  }
+  function release() {
+    locked = false;
+    if (lockTimer) clearTimeout(lockTimer);
+    update();
+  }
+  function onClick(event) {
+    const link = event.target?.closest?.("a");
+    if (!link || !nav.contains(link) || !contentsTarget(link, nav.ownerDocument)) return;
+    mark(link);
+    locked = true;
+    if (lockTimer) clearTimeout(lockTimer);
+    lockTimer = setTimeout(release, 1e3);
+  }
+  function onHashChange() {
+    const id = decodeURIComponent(window.location.hash.slice(1));
+    const link = contentsLinks(nav).find((a) => contentsLinkId(a) === id);
+    if (link) mark(link);
+  }
+  scroller.addEventListener("scroll", onScroll, { passive: true });
+  scroller.addEventListener("scrollend", release);
+  window.addEventListener("resize", schedule);
+  window.addEventListener("hashchange", onHashChange);
+  nav.addEventListener("click", onClick);
+  const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver(schedule);
+  mutations?.observe(nav, { childList: true, subtree: true, attributes: true, attributeFilter: ["href"] });
+  const initial = decodeURIComponent(window.location.hash.slice(1));
+  hashPending = initial !== "";
+  const hashLink = initial ? contentsLinks(nav).find((a) => contentsLinkId(a) === initial) : void 0;
+  if (hashLink) mark(hashLink);
+  else update();
+  return () => {
+    scroller.removeEventListener("scroll", onScroll);
+    scroller.removeEventListener("scrollend", release);
+    window.removeEventListener("resize", schedule);
+    window.removeEventListener("hashchange", onHashChange);
+    nav.removeEventListener("click", onClick);
+    mutations?.disconnect();
+    if (frame) cancelAnimationFrame(frame);
+    if (lockTimer) clearTimeout(lockTimer);
+  };
+}
 function ContentsNav({
   className = "",
   label,
   children,
+  spy = false,
+  offset = 0,
+  root = null,
+  current = "true",
+  onActiveChange,
   ...restProps
 }) {
+  const navRef = React11.useRef(null);
+  const onChangeRef = React11.useRef(onActiveChange);
+  onChangeRef.current = onActiveChange;
+  React11.useEffect(() => {
+    if (!spy || !navRef.current) return;
+    return startScrollspy(navRef.current, {
+      offset,
+      root,
+      current,
+      onChange: (id) => onChangeRef.current?.(id)
+    });
+  }, [spy, offset, root, current]);
   return /* @__PURE__ */ jsx123(
     "nav",
     {
+      ref: navRef,
       className: `contents-nav ${className}`,
       "aria-label": label,
       ...restProps,
@@ -3121,7 +3274,7 @@ function ContextMenuItem({
 
 // components/ContextualHelp.tsx
 import { useId as useId5 } from "react";
-import { jsx as jsx126, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs31 } from "react/jsx-runtime";
 function ContextualHelp({
   className = "",
   label,
@@ -3132,7 +3285,7 @@ function ContextualHelp({
 }) {
   const reactId = useId5();
   const panelId = `contextual-help-${reactId}-panel`;
-  return /* @__PURE__ */ jsxs30("div", { className: `contextual-help ${className}`, ...restProps, children: [
+  return /* @__PURE__ */ jsxs31("div", { className: `contextual-help ${className}`, ...restProps, children: [
     /* @__PURE__ */ jsx126(
       "button",
       {
@@ -3322,7 +3475,7 @@ function DataFilterForm({
 }
 
 // components/DataTable.tsx
-import { Fragment as Fragment12, jsx as jsx133, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx133, jsxs as jsxs32 } from "react/jsx-runtime";
 function DataTable({
   className = "",
   label,
@@ -3330,7 +3483,7 @@ function DataTable({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "table",
     {
       className: `data-table ${className}`,
@@ -3426,7 +3579,6 @@ function DataTableTD({
     {
       className: `data-table-td ${className}`,
       role: "gridcell",
-      "aria-selected": active || void 0,
       tabIndex: active ? 0 : -1,
       ...restProps,
       children
@@ -3459,7 +3611,7 @@ function DataTableTH({
 
 // components/DateField.tsx
 import { useId as useId6 } from "react";
-import { Fragment as Fragment13, jsx as jsx140, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx140, jsxs as jsxs33 } from "react/jsx-runtime";
 function DateField({
   className = "",
   label,
@@ -3476,7 +3628,7 @@ function DateField({
   const inputId = id ?? generatedId;
   const descriptionId = `${inputId}-desc`;
   const errorId = `${inputId}-error`;
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: `date-field ${className}`,
@@ -3543,7 +3695,7 @@ function DateInput({
 }
 
 // components/DateRange.tsx
-import { jsx as jsx142, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx142, jsxs as jsxs34 } from "react/jsx-runtime";
 function DateRange({
   className = "",
   label,
@@ -3555,7 +3707,7 @@ function DateRange({
   onEndChange,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "fieldset",
     {
       className: `date-range ${className}`,
@@ -3618,7 +3770,7 @@ function DateTimeLocalInput({
 }
 
 // components/DateTimeNowInput.tsx
-import { jsx as jsx144, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx144, jsxs as jsxs35 } from "react/jsx-runtime";
 function DateTimeNowInput({
   className = "",
   label,
@@ -3643,7 +3795,7 @@ function DateTimeNowInput({
     onDateChange?.(`${year}-${month}-${day}`);
     onTimeChange?.(`${hours}:${minutes}`);
   }
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       className: `date-time-now-input ${className}`,
@@ -3751,7 +3903,7 @@ function DescriptionListItem({
 
 // components/Details.tsx
 import { useState as useState8 } from "react";
-import { jsx as jsx148, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx148, jsxs as jsxs36 } from "react/jsx-runtime";
 function Details({
   className = "",
   summary,
@@ -3766,7 +3918,7 @@ function Details({
     setOpen(newOpen);
     onChange?.(newOpen);
   };
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "details",
     {
       className: `details ${className}`,
@@ -4193,7 +4345,7 @@ function Drawer({
 
 // components/DropdownMenu.tsx
 import { useState as useState12, useRef as useRef2 } from "react";
-import { jsx as jsx165, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx165, jsxs as jsxs37 } from "react/jsx-runtime";
 function DropdownMenu({
   className = "",
   label,
@@ -4247,7 +4399,7 @@ function DropdownMenu({
       }
     }
   }
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       className: `dropdown-menu ${className}`,
@@ -4730,7 +4882,7 @@ function ErrorMessage({
 
 // components/ErrorSummary.tsx
 import { useId as useId7 } from "react";
-import { jsx as jsx183, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx183, jsxs as jsxs38 } from "react/jsx-runtime";
 function ErrorSummary({
   className = "",
   title,
@@ -4738,7 +4890,7 @@ function ErrorSummary({
   ...restProps
 }) {
   const titleId = `error-summary-${useId7()}`;
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       className: `error-summary ${className}`,
@@ -4867,7 +5019,7 @@ function Event({
 
 // components/Expander.tsx
 import { useState as useState14, useId as useId8 } from "react";
-import { jsx as jsx189, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx189, jsxs as jsxs39 } from "react/jsx-runtime";
 function Expander({
   className = "",
   label,
@@ -4883,7 +5035,7 @@ function Expander({
     setExpanded(newExpanded);
     onChange?.(newExpanded);
   };
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       className: `expander ${className}`,
@@ -4914,7 +5066,7 @@ function Expander({
 }
 
 // components/FeatureCard.tsx
-import { jsx as jsx190, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx190, jsxs as jsxs40 } from "react/jsx-runtime";
 function FeatureCard({
   className = "",
   heading,
@@ -4926,7 +5078,7 @@ function FeatureCard({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     "article",
     {
       className: `feature-card ${className}`,
@@ -4951,7 +5103,7 @@ function FeatureCard({
 }
 
 // components/FeaturePhoto.tsx
-import { jsx as jsx191, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs41 } from "react/jsx-runtime";
 function FeaturePhoto({
   className = "",
   src,
@@ -4964,7 +5116,7 @@ function FeaturePhoto({
   ...restProps
 }) {
   const hasCaption = caption !== void 0 || credit !== void 0;
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(
     "figure",
     {
       className: `feature-photo ${className}`,
@@ -4981,7 +5133,7 @@ function FeaturePhoto({
             height
           }
         ),
-        hasCaption && /* @__PURE__ */ jsxs40("figcaption", { className: "feature-photo-caption", children: [
+        hasCaption && /* @__PURE__ */ jsxs41("figcaption", { className: "feature-photo-caption", children: [
           caption !== void 0 && /* @__PURE__ */ jsx191("span", { className: "feature-photo-caption-text", children: caption }),
           credit !== void 0 && /* @__PURE__ */ jsx191("span", { className: "feature-photo-credit", children: credit })
         ] })
@@ -4992,7 +5144,7 @@ function FeaturePhoto({
 
 // components/Field.tsx
 import { useId as useId9 } from "react";
-import { Fragment as Fragment18, jsx as jsx192, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx192, jsxs as jsxs42 } from "react/jsx-runtime";
 function Field({
   className = "",
   label,
@@ -5007,14 +5159,14 @@ function Field({
   const fieldId = inputId ?? generatedId;
   const descId = `${fieldId}-desc`;
   const errorId = `${fieldId}-error`;
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       className: `field ${className}`,
       "data-required": required || void 0,
       ...restProps,
       children: [
-        /* @__PURE__ */ jsxs41(
+        /* @__PURE__ */ jsxs42(
           "label",
           {
             htmlFor: fieldId,
@@ -5040,7 +5192,7 @@ function Field({
 }
 
 // components/Fieldset.tsx
-import { jsx as jsx193, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs43 } from "react/jsx-runtime";
 function Fieldset({
   className = "",
   legend,
@@ -5048,7 +5200,7 @@ function Fieldset({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     "fieldset",
     {
       className: `fieldset ${className}`,
@@ -5318,7 +5470,7 @@ function FileTree({
 
 // components/FileUpload.tsx
 import { useRef as useRef4, useState as useState15 } from "react";
-import { Fragment as Fragment20, jsx as jsx199, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx199, jsxs as jsxs44 } from "react/jsx-runtime";
 function FileUpload({
   className = "",
   label,
@@ -5338,7 +5490,7 @@ function FileUpload({
     setFileCount(input.files?.length ?? 0);
     onInputChange?.(input.files);
   }
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(
     "div",
     {
       className: `file-upload ${className}`,
@@ -5370,7 +5522,7 @@ function FileUpload({
           {
             "aria-live": "polite",
             "data-file-count": fileCount,
-            children: fileCount > 0 && /* @__PURE__ */ jsxs43(Fragment20, { children: [
+            children: fileCount > 0 && /* @__PURE__ */ jsxs44(Fragment20, { children: [
               fileCount,
               " ",
               fileCount === 1 ? "file" : "files",
@@ -5384,19 +5536,48 @@ function FileUpload({
 }
 
 // components/FiveFaceRatingPicker.tsx
-import React25, { useState as useState16 } from "react";
-import { jsx as jsx200, jsxs as jsxs44 } from "react/jsx-runtime";
+import React26, { useEffect as useEffect4, useRef as useRef5, useState as useState16 } from "react";
+import { jsx as jsx200, jsxs as jsxs45 } from "react/jsx-runtime";
 function FiveFaceRatingPicker({
   className = "",
   label,
   value: valueProp = 0,
   name = "face-rating",
-  labels = ["Very bad", "Bad", "Okay", "Good", "Very good"],
+  // The numbers, not English words: the words are the consumer's to supply.
+  labels = ["1", "2", "3", "4", "5"],
   disabled = false,
   onChange,
   ...restProps
 }) {
   const [value, setValue] = useState16(valueProp);
+  const initialValue = useRef5(valueProp);
+  const onChangeRef = useRef5(onChange);
+  onChangeRef.current = onChange;
+  const rootRef = useRef5(null);
+  useEffect4(() => {
+    const root = rootRef.current;
+    const form = root?.closest("form");
+    if (!root || !form) return;
+    let timer;
+    const onReset = (event) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        if (event.defaultPrevented) return;
+        setValue((current) => {
+          if (current !== initialValue.current) onChangeRef.current?.(initialValue.current);
+          return initialValue.current;
+        });
+        for (const input of root.querySelectorAll('input[type="radio"]')) {
+          input.checked = input.value === String(initialValue.current);
+        }
+      }, 0);
+    };
+    form.addEventListener("reset", onReset);
+    return () => {
+      clearTimeout(timer);
+      form.removeEventListener("reset", onReset);
+    };
+  }, []);
   const faces = [1, 2, 3, 4, 5];
   const handleChange = (face) => {
     setValue(face);
@@ -5405,12 +5586,13 @@ function FiveFaceRatingPicker({
   return /* @__PURE__ */ jsx200(
     "fieldset",
     {
+      ref: rootRef,
       className: `five-face-rating-picker ${className}`,
       role: "radiogroup",
       "aria-label": label,
       disabled,
       ...restProps,
-      children: faces.map((face, i) => /* @__PURE__ */ jsx200(React25.Fragment, { children: /* @__PURE__ */ jsxs44("label", { children: [
+      children: faces.map((face, i) => /* @__PURE__ */ jsx200(React26.Fragment, { children: /* @__PURE__ */ jsxs45("label", { children: [
         /* @__PURE__ */ jsx200(
           "input",
           {
@@ -5460,7 +5642,8 @@ function FiveFaceRatingView({
   className = "",
   value,
   label,
-  labels = ["Very bad", "Bad", "Okay", "Good", "Very good"],
+  // The numbers, not English words: the words are the consumer's to supply.
+  labels = ["1", "2", "3", "4", "5"],
   ...restProps
 }) {
   const faceLabel = labels[value - 1] ?? "";
@@ -5478,18 +5661,47 @@ function FiveFaceRatingView({
 }
 
 // components/FiveStarRatingPicker.tsx
-import React26, { useState as useState17 } from "react";
-import { jsx as jsx203, jsxs as jsxs45 } from "react/jsx-runtime";
+import React27, { useEffect as useEffect5, useRef as useRef6, useState as useState17 } from "react";
+import { jsx as jsx203, jsxs as jsxs46 } from "react/jsx-runtime";
 function FiveStarRatingPicker({
   className = "",
   label,
   value: valueProp = 0,
   name = "rating",
+  starLabel,
   disabled = false,
   onChange,
   ...restProps
 }) {
   const [value, setValue] = useState17(valueProp);
+  const initialValue = useRef6(valueProp);
+  const onChangeRef = useRef6(onChange);
+  onChangeRef.current = onChange;
+  const rootRef = useRef6(null);
+  useEffect5(() => {
+    const root = rootRef.current;
+    const form = root?.closest("form");
+    if (!root || !form) return;
+    let timer;
+    const onReset = (event) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        if (event.defaultPrevented) return;
+        setValue((current) => {
+          if (current !== initialValue.current) onChangeRef.current?.(initialValue.current);
+          return initialValue.current;
+        });
+        for (const input of root.querySelectorAll('input[type="radio"]')) {
+          input.checked = input.value === String(initialValue.current);
+        }
+      }, 0);
+    };
+    form.addEventListener("reset", onReset);
+    return () => {
+      clearTimeout(timer);
+      form.removeEventListener("reset", onReset);
+    };
+  }, []);
   const stars = [1, 2, 3, 4, 5];
   const handleChange = (star) => {
     setValue(star);
@@ -5498,12 +5710,13 @@ function FiveStarRatingPicker({
   return /* @__PURE__ */ jsx203(
     "fieldset",
     {
+      ref: rootRef,
       className: `five-star-rating-picker ${className}`,
       role: "radiogroup",
       "aria-label": label,
       disabled,
       ...restProps,
-      children: stars.map((star) => /* @__PURE__ */ jsx203(React26.Fragment, { children: /* @__PURE__ */ jsxs45("label", { children: [
+      children: stars.map((star) => /* @__PURE__ */ jsx203(React27.Fragment, { children: /* @__PURE__ */ jsxs46("label", { children: [
         /* @__PURE__ */ jsx203(
           "input",
           {
@@ -5514,8 +5727,7 @@ function FiveStarRatingPicker({
             onChange: () => handleChange(star)
           }
         ),
-        star,
-        star === 1 ? " star" : " stars"
+        starLabel ? starLabel(star) : star
       ] }) }, star))
     }
   );
@@ -5829,7 +6041,7 @@ function FranceNumeroDIdentificationAuRepertoireView({
 }
 
 // components/FunnelChart.tsx
-import { jsx as jsx216, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx216, jsxs as jsxs47 } from "react/jsx-runtime";
 function FunnelChart({
   className = "",
   label = void 0,
@@ -5837,7 +6049,7 @@ function FunnelChart({
   dataTable,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs47(
     "figure",
     {
       className: `funnel-chart ${className}`,
@@ -5851,7 +6063,7 @@ function FunnelChart({
 }
 
 // components/GanttTable.tsx
-import { Fragment as Fragment22, jsx as jsx217, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx217, jsxs as jsxs48 } from "react/jsx-runtime";
 function GanttTable({
   className = "",
   label,
@@ -5859,7 +6071,7 @@ function GanttTable({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs48(
     "table",
     {
       className: `gantt-table ${className}`,
@@ -5887,7 +6099,6 @@ function GanttTableTD({
     {
       className: `gantt-table-td ${className}`,
       role: "gridcell",
-      "aria-selected": active || void 0,
       tabIndex: active ? 0 : -1,
       ...restProps,
       children: children && /* @__PURE__ */ jsx218(Fragment23, { children })
@@ -5987,7 +6198,7 @@ function GanttTableTr({
 }
 
 // components/GaugeChart.tsx
-import { jsx as jsx224, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx224, jsxs as jsxs49 } from "react/jsx-runtime";
 function GaugeChart({
   className = "",
   label,
@@ -5995,7 +6206,7 @@ function GaugeChart({
   dataTable,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs48(
+  return /* @__PURE__ */ jsxs49(
     "figure",
     {
       className: `gauge-chart ${className}`,
@@ -6051,7 +6262,7 @@ function GoToTop({
 
 // components/GovernmentBanner.tsx
 import { useId as useId10 } from "react";
-import { jsx as jsx228, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx228, jsxs as jsxs50 } from "react/jsx-runtime";
 function GovernmentBanner({
   className = "",
   label,
@@ -6063,14 +6274,14 @@ function GovernmentBanner({
   ...restProps
 }) {
   const panelId = useId10();
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "aside",
     {
       className: `government-banner ${className}`,
       "aria-label": label,
       ...restProps,
       children: [
-        /* @__PURE__ */ jsxs49("header", { className: "government-banner-header", children: [
+        /* @__PURE__ */ jsxs50("header", { className: "government-banner-header", children: [
           /* @__PURE__ */ jsx228("span", { className: "government-banner-text", children: headerText }),
           /* @__PURE__ */ jsx228(
             "button",
@@ -6099,7 +6310,7 @@ function GovernmentBanner({
 }
 
 // components/GovernmentIdentifier.tsx
-import { jsx as jsx229, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx229, jsxs as jsxs51 } from "react/jsx-runtime";
 function GovernmentIdentifier({
   className = "",
   label,
@@ -6111,14 +6322,14 @@ function GovernmentIdentifier({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "section",
     {
       className: `government-identifier ${className}`,
       "aria-label": label,
       ...restProps,
       children: [
-        /* @__PURE__ */ jsxs50("div", { className: "government-identifier-masthead", children: [
+        /* @__PURE__ */ jsxs51("div", { className: "government-identifier-masthead", children: [
           logoUrl && /* @__PURE__ */ jsx229(
             "img",
             {
@@ -6246,7 +6457,7 @@ function GrailLayoutTopHeader({
 }
 
 // components/GraphicBlock.tsx
-import { jsx as jsx236, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx236, jsxs as jsxs52 } from "react/jsx-runtime";
 function GraphicBlock({
   className = "",
   label,
@@ -6257,7 +6468,7 @@ function GraphicBlock({
   ...restProps
 }) {
   const hasCaption = title !== void 0 || description !== void 0 || notes !== void 0;
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs52(
     "figure",
     {
       className: `graphic-block ${className}`,
@@ -6265,7 +6476,7 @@ function GraphicBlock({
       "aria-label": label,
       ...restProps,
       children: [
-        hasCaption && /* @__PURE__ */ jsxs51("figcaption", { className: "graphic-block-caption", children: [
+        hasCaption && /* @__PURE__ */ jsxs52("figcaption", { className: "graphic-block-caption", children: [
           title !== void 0 && /* @__PURE__ */ jsx236("div", { className: "graphic-block-title", children: title }),
           description !== void 0 && /* @__PURE__ */ jsx236("div", { className: "graphic-block-description", children: description }),
           notes !== void 0 && /* @__PURE__ */ jsx236("div", { className: "graphic-block-notes", children: notes })
@@ -6300,7 +6511,7 @@ function Grid({
 
 // components/HamburgerMenu.tsx
 import { useState as useState18, useId as useId11 } from "react";
-import { jsx as jsx238, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx238, jsxs as jsxs53 } from "react/jsx-runtime";
 function HamburgerMenu({
   className = "",
   label = "Menu",
@@ -6316,7 +6527,7 @@ function HamburgerMenu({
     setOpen(newOpen);
     onChange?.(newOpen);
   };
-  return /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsxs53(
     "div",
     {
       className: `hamburger-menu ${className}`,
@@ -6412,7 +6623,7 @@ function Header({
 }
 
 // components/Headline.tsx
-import { jsx as jsx242, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx242, jsxs as jsxs54 } from "react/jsx-runtime";
 function Headline({
   className = "",
   level = 1,
@@ -6422,7 +6633,7 @@ function Headline({
   ...restProps
 }) {
   const Heading = `h${level}`;
-  return /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsxs54(
     "div",
     {
       className: `headline ${className}`,
@@ -6437,7 +6648,7 @@ function Headline({
 }
 
 // components/HeatmapChart.tsx
-import { jsx as jsx243, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx243, jsxs as jsxs55 } from "react/jsx-runtime";
 function HeatmapChart({
   className = "",
   label,
@@ -6445,7 +6656,7 @@ function HeatmapChart({
   dataTable,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsxs55(
     "figure",
     {
       className: `heatmap-chart ${className}`,
@@ -6478,7 +6689,7 @@ function Hero({
 }
 
 // components/HeroHeadline.tsx
-import { jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsxs as jsxs56 } from "react/jsx-runtime";
 function HeroHeadline({
   className = "",
   label,
@@ -6486,7 +6697,7 @@ function HeroHeadline({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs56(
     "div",
     {
       className: `hero-headline ${className}`,
@@ -6540,7 +6751,7 @@ function Hint({
 }
 
 // components/HorizontalScroller.tsx
-import { useRef as useRef5 } from "react";
+import { useRef as useRef7 } from "react";
 import { jsx as jsx247 } from "react/jsx-runtime";
 function HorizontalScroller({
   className = "",
@@ -6549,7 +6760,7 @@ function HorizontalScroller({
   children,
   ...restProps
 }) {
-  const ref = useRef5(null);
+  const ref = useRef7(null);
   const handleKeyDown = (event) => {
     if (event.key === "ArrowRight") {
       event.preventDefault();
@@ -6672,9 +6883,9 @@ function Icon({
 }
 
 // components/IconButton.tsx
-import React30 from "react";
+import React31 from "react";
 import { jsx as jsx252 } from "react/jsx-runtime";
-var IconButton = React30.forwardRef(
+var IconButton = React31.forwardRef(
   function IconButton2({
     className = "",
     baseClass = "icon-button",
@@ -6724,14 +6935,14 @@ function IconList({
 }
 
 // components/IconListItem.tsx
-import { jsx as jsx254, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx254, jsxs as jsxs57 } from "react/jsx-runtime";
 function IconListItem({
   className = "",
   icon,
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs56(
+  return /* @__PURE__ */ jsxs57(
     "li",
     {
       className: `icon-list-item ${className}`,
@@ -6745,7 +6956,7 @@ function IconListItem({
 }
 
 // components/Image.tsx
-import { Fragment as Fragment25, jsx as jsx255, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx255, jsxs as jsxs58 } from "react/jsx-runtime";
 function Image({
   className = "",
   src,
@@ -6754,7 +6965,7 @@ function Image({
   loading = void 0,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsx255(Fragment25, { children: caption ? /* @__PURE__ */ jsx255(Fragment25, { children: /* @__PURE__ */ jsxs57(
+  return /* @__PURE__ */ jsx255(Fragment25, { children: caption ? /* @__PURE__ */ jsx255(Fragment25, { children: /* @__PURE__ */ jsxs58(
     "figure",
     {
       className: `image ${className}`,
@@ -6900,7 +7111,7 @@ function IndonesiaNomorIndukKependudukanView({
 }
 
 // components/InfoState.tsx
-import { Fragment as Fragment26, jsx as jsx261, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx261, jsxs as jsxs59 } from "react/jsx-runtime";
 function InfoState({
   className = "",
   level = "info",
@@ -6920,7 +7131,7 @@ function InfoState({
       "aria-label": label ?? title,
       "data-level": level,
       ...restProps,
-      children: children !== void 0 ? children : /* @__PURE__ */ jsxs58(Fragment26, { children: [
+      children: children !== void 0 ? children : /* @__PURE__ */ jsxs59(Fragment26, { children: [
         illustration !== void 0 ? illustration : null,
         /* @__PURE__ */ jsx261("h2", { children: title }),
         description !== void 0 ? /* @__PURE__ */ jsx261("p", { children: description }) : null,
@@ -6978,7 +7189,7 @@ function Input({
 }
 
 // components/InputGroup.tsx
-import { jsx as jsx264, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx264, jsxs as jsxs60 } from "react/jsx-runtime";
 function InputGroup({
   className = "",
   label = void 0,
@@ -6987,7 +7198,7 @@ function InputGroup({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs59(
+  return /* @__PURE__ */ jsxs60(
     "div",
     {
       className: `input-group ${className}`,
@@ -7004,7 +7215,7 @@ function InputGroup({
 }
 
 // components/InputWithMask.tsx
-import { jsx as jsx265, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx265, jsxs as jsxs61 } from "react/jsx-runtime";
 function InputWithMask({
   className = "",
   label,
@@ -7015,7 +7226,7 @@ function InputWithMask({
   onInput,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsxs61(
     "div",
     {
       className: `input-with-mask ${className}`,
@@ -7153,7 +7364,7 @@ function ItaliaCodiceFiscaleView({
 }
 
 // components/KanbanTable.tsx
-import { Fragment as Fragment27, jsx as jsx271, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx271, jsxs as jsxs62 } from "react/jsx-runtime";
 function KanbanTable({
   className = "",
   label,
@@ -7161,7 +7372,7 @@ function KanbanTable({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs61(
+  return /* @__PURE__ */ jsxs62(
     "table",
     {
       className: `kanban-table ${className}`,
@@ -7258,7 +7469,6 @@ function KanbanTableTD({
     {
       className: `kanban-table-td ${className}`,
       role: "gridcell",
-      "aria-selected": active || void 0,
       tabIndex: active ? 0 : -1,
       "aria-label": label,
       ...restProps,
@@ -7310,8 +7520,8 @@ function Kbd({
 }
 
 // components/KbdShortcut.tsx
-import React31 from "react";
-import { jsx as jsx279, jsxs as jsxs62 } from "react/jsx-runtime";
+import React32 from "react";
+import { jsx as jsx279, jsxs as jsxs63 } from "react/jsx-runtime";
 function KbdShortcut({
   className = "",
   keys,
@@ -7319,7 +7529,7 @@ function KbdShortcut({
   label = void 0,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsx279("kbd", { className: `kbd-shortcut ${className}`, "aria-label": label, ...restProps, children: keys.map((key, i) => /* @__PURE__ */ jsxs62(React31.Fragment, { children: [
+  return /* @__PURE__ */ jsx279("kbd", { className: `kbd-shortcut ${className}`, "aria-label": label, ...restProps, children: keys.map((key, i) => /* @__PURE__ */ jsxs63(React32.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx279("span", { className: "kbd-shortcut-separator", "aria-hidden": "true", children: separator }),
     /* @__PURE__ */ jsx279("kbd", { className: "kbd-shortcut-key", children: key })
   ] }, i)) });
@@ -7621,7 +7831,7 @@ function LietuvaPasasView({
 }
 
 // components/LineChart.tsx
-import { jsx as jsx293, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx293, jsxs as jsxs64 } from "react/jsx-runtime";
 function LineChart({
   className = "",
   label = void 0,
@@ -7629,7 +7839,7 @@ function LineChart({
   dataTable,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs63(
+  return /* @__PURE__ */ jsxs64(
     "figure",
     {
       className: `line-chart ${className}`,
@@ -7643,9 +7853,9 @@ function LineChart({
 }
 
 // components/Listbox.tsx
-import React32, { useLayoutEffect, useRef as useRef6, useState as useState19 } from "react";
+import React33, { useLayoutEffect, useRef as useRef8, useState as useState19 } from "react";
 import { jsx as jsx294 } from "react/jsx-runtime";
-var Listbox = React32.forwardRef(function Listbox2({
+var Listbox = React33.forwardRef(function Listbox2({
   className = "",
   baseClass = "listbox",
   as: Tag2 = "div",
@@ -7663,11 +7873,11 @@ var Listbox = React32.forwardRef(function Listbox2({
   onTabOut,
   ...restProps
 }, forwardedRef) {
-  const listRef = useRef6(null);
+  const listRef = useRef8(null);
   const [uncontrolledActiveIndex, setUncontrolledActiveIndex] = useState19(defaultActiveIndex);
   const activeIndex = controlledActiveIndex ?? uncontrolledActiveIndex;
-  const typeaheadBuffer = useRef6("");
-  const typeaheadTimer = useRef6(void 0);
+  const typeaheadBuffer = useRef8("");
+  const typeaheadTimer = useRef8(void 0);
   function setRef(node) {
     listRef.current = node;
     if (typeof forwardedRef === "function") forwardedRef(node);
@@ -8187,7 +8397,7 @@ function MeasurementUnitView({
 
 // components/MedicalBanner.tsx
 import { useState as useState20 } from "react";
-import { Fragment as Fragment29, jsx as jsx312, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx312, jsxs as jsxs65 } from "react/jsx-runtime";
 function MedicalBanner({
   className = "",
   label,
@@ -8203,7 +8413,7 @@ function MedicalBanner({
     setVisible(false);
     onClose?.();
   }
-  return /* @__PURE__ */ jsx312(Fragment29, { children: visible && /* @__PURE__ */ jsx312(Fragment29, { children: /* @__PURE__ */ jsxs64(
+  return /* @__PURE__ */ jsx312(Fragment29, { children: visible && /* @__PURE__ */ jsx312(Fragment29, { children: /* @__PURE__ */ jsxs65(
     "div",
     {
       className: `medical-banner ${className}`,
@@ -8291,7 +8501,7 @@ function MedicalBannerBoxForDanger({
 }
 
 // components/MentionsInput.tsx
-import { jsx as jsx316, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx316, jsxs as jsxs66 } from "react/jsx-runtime";
 function MentionsInput({
   className = "",
   label,
@@ -8304,7 +8514,7 @@ function MentionsInput({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs65(
+  return /* @__PURE__ */ jsxs66(
     "div",
     {
       className: `mentions-input ${className}`,
@@ -8336,7 +8546,7 @@ function MentionsInput({
 }
 
 // components/Menu.tsx
-import { useRef as useRef7 } from "react";
+import { useRef as useRef9 } from "react";
 import { jsx as jsx317 } from "react/jsx-runtime";
 function Menu({
   className = "",
@@ -8344,7 +8554,7 @@ function Menu({
   children,
   ...restProps
 }) {
-  const menuRef = useRef7(null);
+  const menuRef = useRef9(null);
   function handleKeyDown(event) {
     if (!menuRef.current) return;
     const items = Array.from(
@@ -8392,7 +8602,7 @@ function Menu({
 }
 
 // components/MenuBar.tsx
-import { useRef as useRef8 } from "react";
+import { useRef as useRef10 } from "react";
 import { jsx as jsx318 } from "react/jsx-runtime";
 function MenuBar({
   className = "",
@@ -8400,7 +8610,7 @@ function MenuBar({
   children,
   ...restProps
 }) {
-  const barRef = useRef8(null);
+  const barRef = useRef10(null);
   function handleKeyDown(event) {
     if (!barRef.current) return;
     const items = Array.from(
@@ -8468,14 +8678,14 @@ function MenuBarButton({
 }
 
 // components/MenuGroup.tsx
-import { jsx as jsx320, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx320, jsxs as jsxs67 } from "react/jsx-runtime";
 function MenuGroup({
   className = "",
   label,
   children = void 0,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs66(
+  return /* @__PURE__ */ jsxs67(
     "div",
     {
       className: `menu-group ${className}`,
@@ -8805,7 +9015,7 @@ function MonthInput({
 }
 
 // components/MultiSelect.tsx
-import { useEffect as useEffect4, useState as useState21 } from "react";
+import { useEffect as useEffect6, useState as useState21 } from "react";
 import { jsx as jsx337 } from "react/jsx-runtime";
 function MultiSelect({
   className = "",
@@ -8820,7 +9030,7 @@ function MultiSelect({
 }) {
   const [value, setValue] = useState21(valueProp);
   const key = valueProp.join("\0");
-  useEffect4(() => {
+  useEffect6(() => {
     setValue(valueProp);
   }, [key]);
   return /* @__PURE__ */ jsx337(
@@ -8845,8 +9055,8 @@ function MultiSelect({
 }
 
 // components/MultiSelectWithExtras.tsx
-import { useEffect as useEffect5, useState as useState22 } from "react";
-import { jsx as jsx338, jsxs as jsxs67 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useState as useState22 } from "react";
+import { jsx as jsx338, jsxs as jsxs68 } from "react/jsx-runtime";
 function MultiSelectWithExtras({
   className = "",
   label,
@@ -8862,10 +9072,10 @@ function MultiSelectWithExtras({
 }) {
   const [value, setValue] = useState22(valueProp);
   const key = valueProp.join("\0");
-  useEffect5(() => {
+  useEffect7(() => {
     setValue(valueProp);
   }, [key]);
-  return /* @__PURE__ */ jsxs67("div", { className: `multi-select-with-extras ${className}`, ...restProps, children: [
+  return /* @__PURE__ */ jsxs68("div", { className: `multi-select-with-extras ${className}`, ...restProps, children: [
     before && before,
     /* @__PURE__ */ jsx338(
       "select",
@@ -9065,7 +9275,8 @@ function NederlandPaspoortNummerView({
 }
 
 // components/NetPromoterScorePicker.tsx
-import { jsx as jsx347, jsxs as jsxs68 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useRef as useRef11 } from "react";
+import { jsx as jsx347, jsxs as jsxs69 } from "react/jsx-runtime";
 function NetPromoterScorePicker({
   className = "",
   label,
@@ -9074,14 +9285,40 @@ function NetPromoterScorePicker({
   onChange,
   ...restProps
 }) {
+  const initialValue = useRef11(value);
+  const onChangeRef = useRef11(onChange);
+  onChangeRef.current = onChange;
+  const rootRef = useRef11(null);
+  useEffect8(() => {
+    const root = rootRef.current;
+    const form = root?.closest("form");
+    if (!root || !form) return;
+    let timer;
+    const onReset = (event) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        if (event.defaultPrevented) return;
+        if (value !== initialValue.current) onChangeRef.current?.(initialValue.current);
+        for (const input of root.querySelectorAll('input[type="radio"]')) {
+          input.checked = input.value === String(initialValue.current);
+        }
+      }, 0);
+    };
+    form.addEventListener("reset", onReset);
+    return () => {
+      clearTimeout(timer);
+      form.removeEventListener("reset", onReset);
+    };
+  }, [value]);
   return /* @__PURE__ */ jsx347(
     "fieldset",
     {
+      ref: rootRef,
       className: `net-promoter-score-picker ${className}`,
       role: "radiogroup",
       "aria-label": label,
       ...restProps,
-      children: Array.from({ length: 11 }, (_, i) => i).map((score) => /* @__PURE__ */ jsxs68("label", { children: [
+      children: Array.from({ length: 11 }, (_, i) => i).map((score) => /* @__PURE__ */ jsxs69("label", { children: [
         /* @__PURE__ */ jsx347(
           "input",
           {
@@ -9148,7 +9385,7 @@ function NetPromoterScoreView({
 }
 
 // components/NewsletterSignup.tsx
-import { jsx as jsx350, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx350, jsxs as jsxs70 } from "react/jsx-runtime";
 function NewsletterSignup({
   className = "",
   label,
@@ -9164,7 +9401,7 @@ function NewsletterSignup({
   ...restProps
 }) {
   const submitting = state === "submitting";
-  return /* @__PURE__ */ jsxs69(
+  return /* @__PURE__ */ jsxs70(
     "form",
     {
       className: `newsletter-signup ${className}`,
@@ -9173,11 +9410,11 @@ function NewsletterSignup({
       onSubmit,
       ...restProps,
       children: [
-        (heading || description) && /* @__PURE__ */ jsxs69("header", { className: "newsletter-signup-header", children: [
+        (heading || description) && /* @__PURE__ */ jsxs70("header", { className: "newsletter-signup-header", children: [
           heading && /* @__PURE__ */ jsx350("h3", { className: "newsletter-signup-heading", children: heading }),
           description && /* @__PURE__ */ jsx350("p", { className: "newsletter-signup-description", children: description })
         ] }),
-        /* @__PURE__ */ jsxs69("label", { className: "newsletter-signup-label", children: [
+        /* @__PURE__ */ jsxs70("label", { className: "newsletter-signup-label", children: [
           emailLabel,
           /* @__PURE__ */ jsx350(
             "input",
@@ -9662,7 +9899,7 @@ function PasswordInput({
 
 // components/PasswordInputOrTextInputDiv.tsx
 import { useState as useState23 } from "react";
-import { jsx as jsx370, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx370, jsxs as jsxs71 } from "react/jsx-runtime";
 function PasswordInputOrTextInputDiv({
   className = "",
   label,
@@ -9675,7 +9912,7 @@ function PasswordInputOrTextInputDiv({
   ...restProps
 }) {
   const [visible, setVisible] = useState23(false);
-  return /* @__PURE__ */ jsxs70(
+  return /* @__PURE__ */ jsxs71(
     "div",
     {
       className: `password-input-or-text-input-div ${className}`,
@@ -9767,7 +10004,7 @@ function PhotoPack({
 }
 
 // components/Pictogram.tsx
-import { jsx as jsx374, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx374, jsxs as jsxs72 } from "react/jsx-runtime";
 function Pictogram({
   className = "",
   layout = "centered",
@@ -9778,7 +10015,7 @@ function Pictogram({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs71(
+  return /* @__PURE__ */ jsxs72(
     "figure",
     {
       className: `pictogram ${className}`,
@@ -9787,7 +10024,7 @@ function Pictogram({
       ...restProps,
       children: [
         /* @__PURE__ */ jsx374("div", { className: "pictogram-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsxs71("figcaption", { className: "pictogram-caption", children: [
+        /* @__PURE__ */ jsxs72("figcaption", { className: "pictogram-caption", children: [
           heading && /* @__PURE__ */ jsx374("h3", { className: "pictogram-heading", children: heading }),
           children ? children : description && /* @__PURE__ */ jsx374("p", { className: "pictogram-description", children: description })
         ] })
@@ -9797,7 +10034,7 @@ function Pictogram({
 }
 
 // components/PieChart.tsx
-import { jsx as jsx375, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx375, jsxs as jsxs73 } from "react/jsx-runtime";
 function PieChart({
   className = "",
   label = void 0,
@@ -9805,7 +10042,7 @@ function PieChart({
   dataTable,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs72(
+  return /* @__PURE__ */ jsxs73(
     "figure",
     {
       className: `pie-chart ${className}`,
@@ -9865,20 +10102,46 @@ function PilipinasPhilhealthIdentificationNumberView({
 }
 
 // components/PinInputDiv.tsx
-import { useState as useState24, useRef as useRef9, useEffect as useEffect6 } from "react";
+import { useState as useState24, useRef as useRef12, useEffect as useEffect9 } from "react";
 import { jsx as jsx378 } from "react/jsx-runtime";
 function PinInputDiv({
   className = "",
   label,
   length = 4,
+  digitLabel,
   value = "",
   disabled = false,
   onChange,
   ...restProps
 }) {
-  const [digits, setDigits] = useState24(() => Array.from({ length }, () => ""));
-  const inputRefs = useRef9([]);
-  useEffect6(() => {
+  const initialDigits = useRef12(
+    Array.from({ length }, (_, i) => /^[0-9]$/.test(value[i] ?? "") ? value[i] : "")
+  );
+  const [digits, setDigits] = useState24(() => [...initialDigits.current]);
+  const inputRefs = useRef12([]);
+  const rootRef = useRef12(null);
+  useEffect9(() => {
+    const root = rootRef.current;
+    const form = root?.closest("form");
+    if (!root || !form) return;
+    let timer;
+    const onReset = (event) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        if (event.defaultPrevented) return;
+        setDigits([...initialDigits.current]);
+        inputRefs.current.forEach((input, i) => {
+          if (input) input.value = initialDigits.current[i];
+        });
+      }, 0);
+    };
+    form.addEventListener("reset", onReset);
+    return () => {
+      clearTimeout(timer);
+      form.removeEventListener("reset", onReset);
+    };
+  }, []);
+  useEffect9(() => {
     const combined = digits.join("");
     if (combined !== value) {
       onChange?.(combined);
@@ -9920,6 +10183,7 @@ function PinInputDiv({
   return /* @__PURE__ */ jsx378(
     "div",
     {
+      ref: rootRef,
       className: `pin-input-div ${className}`,
       role: "group",
       "aria-label": label,
@@ -9933,7 +10197,7 @@ function PinInputDiv({
           type: "text",
           inputMode: "numeric",
           maxLength: 1,
-          "aria-label": `Digit ${index + 1} of ${length}`,
+          "aria-label": digitLabel ? digitLabel(index + 1, length) : label,
           value: digits[index],
           disabled,
           onInput: (e) => handleInput(index, e),
@@ -10058,7 +10322,7 @@ function PolskaPeselView({
 
 // components/PopconfirmDialog.tsx
 import { useId as useId12 } from "react";
-import { jsx as jsx384, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx384, jsxs as jsxs74 } from "react/jsx-runtime";
 function PopconfirmDialog({
   className = "",
   open = false,
@@ -10073,7 +10337,7 @@ function PopconfirmDialog({
   const reactId = useId12();
   const titleId = `popconfirm-${reactId}-title`;
   const descId = `popconfirm-${reactId}-desc`;
-  return /* @__PURE__ */ jsxs73(
+  return /* @__PURE__ */ jsxs74(
     "div",
     {
       className: `popconfirm-dialog ${className}`,
@@ -10336,7 +10600,7 @@ function PrathetThaiLekPrajamTuaPrachachonView({
 }
 
 // components/ProductCard.tsx
-import { jsx as jsx395, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx395, jsxs as jsxs75 } from "react/jsx-runtime";
 function ProductCard({
   className = "",
   name,
@@ -10347,7 +10611,7 @@ function ProductCard({
   children = void 0,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs74(
+  return /* @__PURE__ */ jsxs75(
     "article",
     {
       className: `product-card ${className}`,
@@ -10362,7 +10626,7 @@ function ProductCard({
             alt: imageAlt ?? ""
           }
         ) : null,
-        /* @__PURE__ */ jsxs74("header", { className: "product-card-header", children: [
+        /* @__PURE__ */ jsxs75("header", { className: "product-card-header", children: [
           /* @__PURE__ */ jsx395("h3", { className: "product-card-name", children: name }),
           /* @__PURE__ */ jsx395("p", { className: "product-card-price", children: price })
         ] }),
@@ -10493,7 +10757,7 @@ function Question({
 }
 
 // components/RadarChart.tsx
-import { jsx as jsx402, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx402, jsxs as jsxs76 } from "react/jsx-runtime";
 function RadarChart({
   className = "",
   label,
@@ -10501,7 +10765,7 @@ function RadarChart({
   dataTable,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsxs76(
     "figure",
     {
       className: `radar-chart ${className}`,
@@ -10599,7 +10863,7 @@ function RangeInput({
 }
 
 // components/RedAmberGreenPicker.tsx
-import { jsx as jsx406, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx406, jsxs as jsxs77 } from "react/jsx-runtime";
 function RedAmberGreenPicker({
   className = "",
   label,
@@ -10607,7 +10871,7 @@ function RedAmberGreenPicker({
   onChange,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs76(
+  return /* @__PURE__ */ jsxs77(
     "select",
     {
       className: `red-amber-green-picker ${className}`,
@@ -10671,7 +10935,7 @@ function RedAmberGreenView({
 }
 
 // components/RedOrangeYellowGreenBluePicker.tsx
-import { jsx as jsx409, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx409, jsxs as jsxs78 } from "react/jsx-runtime";
 function RedOrangeYellowGreenBluePicker({
   className = "",
   label,
@@ -10679,7 +10943,7 @@ function RedOrangeYellowGreenBluePicker({
   onChange,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs77(
+  return /* @__PURE__ */ jsxs78(
     "select",
     {
       className: `red-orange-yellow-green-blue-picker ${className}`,
@@ -10828,7 +11092,7 @@ function ReviewDate({
 }
 
 // components/RingChart.tsx
-import { jsx as jsx416, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx416, jsxs as jsxs79 } from "react/jsx-runtime";
 function RingChart({
   className = "",
   label = void 0,
@@ -10836,7 +11100,7 @@ function RingChart({
   dataTable,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs78(
+  return /* @__PURE__ */ jsxs79(
     "figure",
     {
       className: `ring-chart ${className}`,
@@ -10988,7 +11252,7 @@ function RossiyaSnilsView({
 }
 
 // components/SankeyChart.tsx
-import { jsx as jsx423, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx423, jsxs as jsxs80 } from "react/jsx-runtime";
 function SankeyChart({
   className = "",
   label,
@@ -10996,7 +11260,7 @@ function SankeyChart({
   dataTable,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs79(
+  return /* @__PURE__ */ jsxs80(
     "figure",
     {
       className: `sankey-chart ${className}`,
@@ -11010,7 +11274,7 @@ function SankeyChart({
 }
 
 // components/ScatterChart.tsx
-import { jsx as jsx424, jsxs as jsxs80 } from "react/jsx-runtime";
+import { jsx as jsx424, jsxs as jsxs81 } from "react/jsx-runtime";
 function ScatterChart({
   className = "",
   label = void 0,
@@ -11018,7 +11282,7 @@ function ScatterChart({
   dataTable,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs80(
+  return /* @__PURE__ */ jsxs81(
     "figure",
     {
       className: `scatter-chart ${className}`,
@@ -11143,7 +11407,7 @@ function ScrollBar({
 }
 
 // components/ScrollerBase.tsx
-import { useEffect as useEffect7, useRef as useRef10 } from "react";
+import { useEffect as useEffect10, useRef as useRef13 } from "react";
 import { jsx as jsx430 } from "react/jsx-runtime";
 function ScrollerBase({
   className = "",
@@ -11154,8 +11418,8 @@ function ScrollerBase({
   children,
   ...restProps
 }) {
-  const ref = useRef10(null);
-  useEffect7(() => {
+  const ref = useRef13(null);
+  useEffect10(() => {
     const root = ref.current;
     if (!root || typeof IntersectionObserver === "undefined") return;
     const steps = Array.from(root.children);
@@ -11203,7 +11467,7 @@ function ScrollerBase({
 }
 
 // components/Scroller.tsx
-import { jsx as jsx431, jsxs as jsxs81 } from "react/jsx-runtime";
+import { jsx as jsx431, jsxs as jsxs82 } from "react/jsx-runtime";
 function Scroller({
   className = "",
   label = void 0,
@@ -11214,7 +11478,7 @@ function Scroller({
   background,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs81(
+  return /* @__PURE__ */ jsxs82(
     "div",
     {
       className: `scroller ${className}`,
@@ -11245,8 +11509,8 @@ function Scroller({
 }
 
 // components/ScrollerVideo.tsx
-import { useEffect as useEffect8, useRef as useRef11 } from "react";
-import { jsx as jsx432, jsxs as jsxs82 } from "react/jsx-runtime";
+import { useEffect as useEffect11, useRef as useRef14 } from "react";
+import { jsx as jsx432, jsxs as jsxs83 } from "react/jsx-runtime";
 function ScrollerVideo({
   className = "",
   src,
@@ -11258,7 +11522,7 @@ function ScrollerVideo({
   children,
   ...restProps
 }) {
-  const videoRef = useRef11(null);
+  const videoRef = useRef14(null);
   const handleProgress = (progress) => {
     const video = videoRef.current;
     if (video && Number.isFinite(video.duration) && video.duration > 0) {
@@ -11266,14 +11530,14 @@ function ScrollerVideo({
     }
     onProgressChange?.(progress);
   };
-  useEffect8(() => {
+  useEffect11(() => {
     const video = videoRef.current;
     if (video) {
       video.muted = true;
       video.playsInline = true;
     }
   }, []);
-  return /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs83(
     "div",
     {
       className: `scroller-video ${className}`,
@@ -11342,7 +11606,7 @@ function SearchInput({
 }
 
 // components/SectionHeading.tsx
-import { jsx as jsx434, jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsx as jsx434, jsxs as jsxs84 } from "react/jsx-runtime";
 function SectionHeading({
   className = "",
   heading,
@@ -11352,7 +11616,7 @@ function SectionHeading({
   ...restProps
 }) {
   const HeadingTag = `h${level}`;
-  return /* @__PURE__ */ jsxs83("header", { className: `section-heading ${className}`, ...restProps, children: [
+  return /* @__PURE__ */ jsxs84("header", { className: `section-heading ${className}`, ...restProps, children: [
     eyebrow && /* @__PURE__ */ jsx434("p", { className: "section-heading-eyebrow", children: eyebrow }),
     /* @__PURE__ */ jsx434(HeadingTag, { className: "section-heading-heading", children: heading }),
     subtitle && /* @__PURE__ */ jsx434("p", { className: "section-heading-subtitle", children: subtitle })
@@ -11508,7 +11772,7 @@ function Select({
 }
 
 // components/SelectWithExtras.tsx
-import { jsx as jsx442, jsxs as jsxs84 } from "react/jsx-runtime";
+import { jsx as jsx442, jsxs as jsxs85 } from "react/jsx-runtime";
 function SelectWithExtras({
   className = "",
   label,
@@ -11521,7 +11785,7 @@ function SelectWithExtras({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs84(
+  return /* @__PURE__ */ jsxs85(
     "div",
     {
       className: `select-with-extras ${className}`,
@@ -11619,8 +11883,8 @@ function Sheet({
 }
 
 // components/ShowMore.tsx
-import { useEffect as useEffect9, useId as useId13, useState as useState27 } from "react";
-import { jsx as jsx446, jsxs as jsxs85 } from "react/jsx-runtime";
+import { useEffect as useEffect12, useId as useId13, useState as useState27 } from "react";
+import { jsx as jsx446, jsxs as jsxs86 } from "react/jsx-runtime";
 function ShowMore({
   className = "",
   moreLabel,
@@ -11631,9 +11895,9 @@ function ShowMore({
   ...restProps
 }) {
   const [expanded, setExpanded] = useState27(expandedProp);
-  useEffect9(() => setExpanded(expandedProp), [expandedProp]);
+  useEffect12(() => setExpanded(expandedProp), [expandedProp]);
   const contentId = `show-more-${useId13()}`;
-  return /* @__PURE__ */ jsxs85("div", { className: `show-more ${className}`, ...restProps, children: [
+  return /* @__PURE__ */ jsxs86("div", { className: `show-more ${className}`, ...restProps, children: [
     /* @__PURE__ */ jsx446("div", { className: "show-more-content", id: contentId, "data-expanded": expanded, children }),
     /* @__PURE__ */ jsx446(
       "button",
@@ -12130,7 +12394,7 @@ function Sparkline({
 }
 
 // components/SplitButton.tsx
-import { jsx as jsx466, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx466, jsxs as jsxs87 } from "react/jsx-runtime";
 function SplitButton({
   className = "",
   label,
@@ -12143,7 +12407,7 @@ function SplitButton({
   children = void 0,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs86(
+  return /* @__PURE__ */ jsxs87(
     "div",
     {
       className: `split-button ${className}`,
@@ -12180,7 +12444,7 @@ function SplitButton({
 }
 
 // components/SplitView.tsx
-import { jsx as jsx467, jsxs as jsxs87 } from "react/jsx-runtime";
+import { jsx as jsx467, jsxs as jsxs88 } from "react/jsx-runtime";
 function SplitView({
   className = "",
   label,
@@ -12191,7 +12455,7 @@ function SplitView({
   splitPercent = 50,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs87(
+  return /* @__PURE__ */ jsxs88(
     "div",
     {
       className: `split-view ${className}`,
@@ -12244,7 +12508,7 @@ function Splitter({
 }
 
 // components/Statistic.tsx
-import { jsx as jsx469, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx469, jsxs as jsxs89 } from "react/jsx-runtime";
 function Statistic({
   className = "",
   title,
@@ -12255,7 +12519,7 @@ function Statistic({
   ...restProps
 }) {
   const ariaLabel = label ?? `${title}: ${value}`;
-  return /* @__PURE__ */ jsxs88(
+  return /* @__PURE__ */ jsxs89(
     "div",
     {
       className: `statistic ${className}`,
@@ -12264,7 +12528,7 @@ function Statistic({
       ...restProps,
       children: [
         /* @__PURE__ */ jsx469("div", { className: "statistic-title", children: title }),
-        /* @__PURE__ */ jsxs88("div", { className: "statistic-value", children: [
+        /* @__PURE__ */ jsxs89("div", { className: "statistic-value", children: [
           prefix !== void 0 && prefix !== null ? /* @__PURE__ */ jsx469("span", { className: "statistic-prefix", children: prefix }) : null,
           value,
           suffix !== void 0 && suffix !== null ? /* @__PURE__ */ jsx469("span", { className: "statistic-suffix", children: suffix }) : null
@@ -12275,14 +12539,14 @@ function Statistic({
 }
 
 // components/StatusLight.tsx
-import { jsx as jsx470, jsxs as jsxs89 } from "react/jsx-runtime";
+import { jsx as jsx470, jsxs as jsxs90 } from "react/jsx-runtime";
 function StatusLight({
   className = "",
   variant = "neutral",
   label,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs89(
+  return /* @__PURE__ */ jsxs90(
     "span",
     {
       className: `status-light ${className}`,
@@ -12361,7 +12625,7 @@ function StepListItem({
 }
 
 // components/StickyPromoBanner.tsx
-import { jsx as jsx474, jsxs as jsxs90 } from "react/jsx-runtime";
+import { jsx as jsx474, jsxs as jsxs91 } from "react/jsx-runtime";
 function StickyPromoBanner({
   className = "",
   label,
@@ -12373,7 +12637,7 @@ function StickyPromoBanner({
   ...restProps
 }) {
   const positionStyle = position === "top" ? { position: "fixed", top: 0, left: 0, right: 0 } : { position: "fixed", bottom: 0, left: 0, right: 0 };
-  return /* @__PURE__ */ jsxs90(
+  return /* @__PURE__ */ jsxs91(
     "aside",
     {
       className: `sticky-promo-banner ${className}`,
@@ -12465,7 +12729,7 @@ function SuccessPanel({
 }
 
 // components/SummaryBox.tsx
-import { jsx as jsx478, jsxs as jsxs91 } from "react/jsx-runtime";
+import { jsx as jsx478, jsxs as jsxs92 } from "react/jsx-runtime";
 function SummaryBox({
   className = "",
   heading,
@@ -12473,7 +12737,7 @@ function SummaryBox({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs91(
+  return /* @__PURE__ */ jsxs92(
     "aside",
     {
       className: `summary-box ${className}`,
@@ -12507,14 +12771,14 @@ function SummaryList({
 }
 
 // components/SummaryListItem.tsx
-import { jsx as jsx480, jsxs as jsxs92 } from "react/jsx-runtime";
+import { jsx as jsx480, jsxs as jsxs93 } from "react/jsx-runtime";
 function SummaryListItem({
   className = "",
   term,
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs92(
+  return /* @__PURE__ */ jsxs93(
     "div",
     {
       className: `summary-list-item ${className}`,
@@ -12528,7 +12792,7 @@ function SummaryListItem({
 }
 
 // components/SunburstChart.tsx
-import { jsx as jsx481, jsxs as jsxs93 } from "react/jsx-runtime";
+import { jsx as jsx481, jsxs as jsxs94 } from "react/jsx-runtime";
 function SunburstChart({
   className = "",
   label = void 0,
@@ -12536,7 +12800,7 @@ function SunburstChart({
   dataTable,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs93(
+  return /* @__PURE__ */ jsxs94(
     "figure",
     {
       className: `sunburst-chart ${className}`,
@@ -12596,7 +12860,7 @@ function SuomiHenkilotunnusView({
 }
 
 // components/SuperBanner.tsx
-import { jsx as jsx484, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx484, jsxs as jsxs95 } from "react/jsx-runtime";
 function SuperBanner({
   className = "",
   label = void 0,
@@ -12606,7 +12870,7 @@ function SuperBanner({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs94(
+  return /* @__PURE__ */ jsxs95(
     "div",
     {
       className: `super-banner ${className}`,
@@ -12678,7 +12942,7 @@ function SverigePersonnummerView({
 }
 
 // components/SwitchButton.tsx
-import { useEffect as useEffect10, useState as useState30 } from "react";
+import { useEffect as useEffect13, useState as useState30 } from "react";
 import { jsx as jsx487 } from "react/jsx-runtime";
 function SwitchButton({
   className = "",
@@ -12689,7 +12953,7 @@ function SwitchButton({
   ...restProps
 }) {
   const [checked, setChecked] = useState30(checkedProp);
-  useEffect10(() => {
+  useEffect13(() => {
     setChecked(checkedProp);
   }, [checkedProp]);
   function toggle() {
@@ -12722,7 +12986,7 @@ function SwitchButton({
 }
 
 // components/TabBar.tsx
-import { useRef as useRef12 } from "react";
+import { useRef as useRef15 } from "react";
 import { jsx as jsx488 } from "react/jsx-runtime";
 function TabBar({
   className = "",
@@ -12730,7 +12994,7 @@ function TabBar({
   children,
   ...restProps
 }) {
-  const barRef = useRef12(null);
+  const barRef = useRef15(null);
   function handleKeyDown(event) {
     if (!barRef.current) return;
     const items = Array.from(
@@ -12957,23 +13221,21 @@ function TableTH({
 }
 
 // components/Tag.tsx
-import { jsx as jsx498 } from "react/jsx-runtime";
+import { jsx as jsx498, jsxs as jsxs96 } from "react/jsx-runtime";
 function Tag({
   className = "",
   label,
+  live = false,
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsx498(
-    "span",
-    {
-      className: `tag ${className}`,
-      role: "status",
-      "aria-label": label,
-      ...restProps,
-      children
-    }
-  );
+  if (live) {
+    return /* @__PURE__ */ jsx498("span", { className: `tag ${className}`, role: "status", "aria-label": label, ...restProps, children });
+  }
+  return /* @__PURE__ */ jsxs96("span", { className: `tag ${className}`, ...restProps, children: [
+    children,
+    label ? /* @__PURE__ */ jsx498("span", { className: "screen-reader-span", children: label }) : null
+  ] });
 }
 
 // components/TagGroup.tsx
@@ -13030,7 +13292,7 @@ function TagInput({
 }
 
 // components/TaskBar.tsx
-import { useRef as useRef13 } from "react";
+import { useRef as useRef16 } from "react";
 import { jsx as jsx501 } from "react/jsx-runtime";
 function TaskBar({
   className = "",
@@ -13038,7 +13300,7 @@ function TaskBar({
   children,
   ...restProps
 }) {
-  const barRef = useRef13(null);
+  const barRef = useRef16(null);
   function handleKeyDown(event) {
     if (!barRef.current) return;
     const items = Array.from(
@@ -13129,7 +13391,7 @@ function TaskList({
 
 // components/TaskListItem.tsx
 import { useState as useState31 } from "react";
-import { jsx as jsx504, jsxs as jsxs95 } from "react/jsx-runtime";
+import { jsx as jsx504, jsxs as jsxs97 } from "react/jsx-runtime";
 function TaskListItem({
   className = "",
   label,
@@ -13151,7 +13413,7 @@ function TaskListItem({
       "data-checked": checked,
       "data-disabled": disabled || void 0,
       ...restProps,
-      children: /* @__PURE__ */ jsxs95("label", { children: [
+      children: /* @__PURE__ */ jsxs97("label", { children: [
         /* @__PURE__ */ jsx504(
           "input",
           {
@@ -13243,7 +13505,7 @@ function TextAreaInput({
 
 // components/TextAreaInputWithCharacterCounter.tsx
 import { useId as useId14 } from "react";
-import { jsx as jsx508, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx508, jsxs as jsxs98 } from "react/jsx-runtime";
 function TextAreaInputWithCharacterCounter({
   className = "",
   label,
@@ -13259,7 +13521,7 @@ function TextAreaInputWithCharacterCounter({
 }) {
   const counterId = useId14();
   const counterText = counterTemplate.replace("{count}", String(value.length)).replace("{max}", String(maxLength));
-  return /* @__PURE__ */ jsxs96(
+  return /* @__PURE__ */ jsxs98(
     "div",
     {
       className: `text-area-input-with-character-counter ${className}`,
@@ -13319,7 +13581,7 @@ function TextInput({
 }
 
 // components/TextInputWithSearch.tsx
-import { jsx as jsx510, jsxs as jsxs97 } from "react/jsx-runtime";
+import { jsx as jsx510, jsxs as jsxs99 } from "react/jsx-runtime";
 function TextInputWithSearch({
   className = "",
   label,
@@ -13342,7 +13604,7 @@ function TextInputWithSearch({
       handleSearch();
     }
   }
-  return /* @__PURE__ */ jsxs97(
+  return /* @__PURE__ */ jsxs99(
     "div",
     {
       className: `text-input-with-search ${className}`,
@@ -13479,8 +13741,8 @@ function ThemeView({
 }
 
 // components/Thinking.tsx
-import { useEffect as useEffect11, useState as useState32 } from "react";
-import { jsx as jsx515, jsxs as jsxs98 } from "react/jsx-runtime";
+import { useEffect as useEffect14, useState as useState32 } from "react";
+import { jsx as jsx515, jsxs as jsxs100 } from "react/jsx-runtime";
 function Thinking({
   className = "",
   label,
@@ -13491,8 +13753,8 @@ function Thinking({
   ...restProps
 }) {
   const [open, setOpen] = useState32(openProp);
-  useEffect11(() => setOpen(openProp), [openProp]);
-  return /* @__PURE__ */ jsxs98(
+  useEffect14(() => setOpen(openProp), [openProp]);
+  return /* @__PURE__ */ jsxs100(
     "details",
     {
       className: `thinking ${className}`,
@@ -13534,7 +13796,7 @@ function Tile({
 }
 
 // components/TileMap.tsx
-import { useRef as useRef14 } from "react";
+import { useRef as useRef17 } from "react";
 import { jsx as jsx517 } from "react/jsx-runtime";
 function TileMap({
   className = "",
@@ -13542,7 +13804,7 @@ function TileMap({
   children,
   ...restProps
 }) {
-  const ref = useRef14(null);
+  const ref = useRef17(null);
   const handleKeyDown = (event) => {
     const root = ref.current;
     if (!root) return;
@@ -13678,7 +13940,7 @@ function TimelineList({
 }
 
 // components/TimelineListItem.tsx
-import { jsx as jsx521, jsxs as jsxs99 } from "react/jsx-runtime";
+import { jsx as jsx521, jsxs as jsxs101 } from "react/jsx-runtime";
 function TimelineListItem({
   className = "",
   datetime = "",
@@ -13686,7 +13948,7 @@ function TimelineListItem({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs99(
+  return /* @__PURE__ */ jsxs101(
     "li",
     {
       className: `timeline-list-item ${className}`,
@@ -13740,7 +14002,7 @@ function Timer({
 }
 
 // components/TimerButton.tsx
-import { useEffect as useEffect12, useRef as useRef15, useState as useState33 } from "react";
+import { useEffect as useEffect15, useRef as useRef18, useState as useState33 } from "react";
 import { jsx as jsx524 } from "react/jsx-runtime";
 function TimerButton({
   className = "",
@@ -13752,8 +14014,8 @@ function TimerButton({
   ...restProps
 }) {
   const [remainingSeconds, setRemainingSeconds] = useState33(duration);
-  const firedRef = useRef15(false);
-  useEffect12(() => {
+  const firedRef = useRef18(false);
+  useEffect15(() => {
     if (disabled) return;
     const start = Date.now();
     const interval = setInterval(() => {
@@ -13875,7 +14137,7 @@ function ToggleGroup({
 }
 
 // components/ToolBar.tsx
-import { useRef as useRef16 } from "react";
+import { useRef as useRef19 } from "react";
 import { jsx as jsx528 } from "react/jsx-runtime";
 function ToolBar({
   className = "",
@@ -13883,7 +14145,7 @@ function ToolBar({
   children,
   ...restProps
 }) {
-  const toolbarRef = useRef16(null);
+  const toolbarRef = useRef19(null);
   function handleKeyDown(event) {
     if (!toolbarRef.current) return;
     const items = Array.from(
@@ -13953,8 +14215,8 @@ function ToolBarButton({
 }
 
 // components/ToolCall.tsx
-import { useEffect as useEffect13, useState as useState35 } from "react";
-import { jsx as jsx530, jsxs as jsxs100 } from "react/jsx-runtime";
+import { useEffect as useEffect16, useState as useState35 } from "react";
+import { jsx as jsx530, jsxs as jsxs102 } from "react/jsx-runtime";
 function ToolCall({
   className = "",
   status = void 0,
@@ -13965,8 +14227,8 @@ function ToolCall({
   ...restProps
 }) {
   const [open, setOpen] = useState35(openProp);
-  useEffect13(() => setOpen(openProp), [openProp]);
-  return /* @__PURE__ */ jsxs100(
+  useEffect16(() => setOpen(openProp), [openProp]);
+  return /* @__PURE__ */ jsxs102(
     "details",
     {
       className: `tool-call ${className}`,
@@ -14192,7 +14454,7 @@ function TourListItem({
 }
 
 // components/TransferList.tsx
-import { jsx as jsx540, jsxs as jsxs101 } from "react/jsx-runtime";
+import { jsx as jsx540, jsxs as jsxs103 } from "react/jsx-runtime";
 function TransferList({
   className = "",
   label,
@@ -14203,7 +14465,7 @@ function TransferList({
   actions = void 0,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs101(
+  return /* @__PURE__ */ jsxs103(
     "div",
     {
       className: `transfer-list ${className}`,
@@ -14241,7 +14503,7 @@ function TreeLink({
 }
 
 // components/TreeList.tsx
-import { useRef as useRef17 } from "react";
+import { useRef as useRef20 } from "react";
 import { jsx as jsx542 } from "react/jsx-runtime";
 function TreeList({
   className = "",
@@ -14249,7 +14511,7 @@ function TreeList({
   children,
   ...restProps
 }) {
-  const treeRef = useRef17(null);
+  const treeRef = useRef20(null);
   function handleKeyDown(event) {
     if (!treeRef.current) return;
     const items = Array.from(
@@ -14356,7 +14618,7 @@ function TreeNav({
 }
 
 // components/TreeSelect.tsx
-import { jsx as jsx546, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx546, jsxs as jsxs104 } from "react/jsx-runtime";
 function TreeSelect({
   className = "",
   label,
@@ -14369,7 +14631,7 @@ function TreeSelect({
   children,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs102(
+  return /* @__PURE__ */ jsxs104(
     "div",
     {
       className: `tree-select ${className}`,
@@ -14749,8 +15011,8 @@ function ValidationListItem({
 }
 
 // components/VideoPlayer.tsx
-import { useEffect as useEffect14, useRef as useRef18 } from "react";
-import { jsx as jsx562, jsxs as jsxs103 } from "react/jsx-runtime";
+import { useEffect as useEffect17, useRef as useRef21 } from "react";
+import { jsx as jsx562, jsxs as jsxs105 } from "react/jsx-runtime";
 function VideoPlayer({
   className = "",
   src,
@@ -14764,8 +15026,8 @@ function VideoPlayer({
   children,
   ...restProps
 }) {
-  const videoRef = useRef18(null);
-  useEffect14(() => {
+  const videoRef = useRef21(null);
+  useEffect17(() => {
     if (!autoplay) return;
     const video = videoRef.current;
     if (!video || typeof IntersectionObserver === "undefined") return;
@@ -14785,7 +15047,7 @@ function VideoPlayer({
     observer.observe(video);
     return () => observer.disconnect();
   }, [autoplay]);
-  return /* @__PURE__ */ jsxs103(
+  return /* @__PURE__ */ jsxs105(
     "figure",
     {
       className: `video-player ${className}`,
@@ -14813,7 +15075,7 @@ function VideoPlayer({
 }
 
 // components/Visible.tsx
-import { useEffect as useEffect15, useRef as useRef19, useState as useState36 } from "react";
+import { useEffect as useEffect18, useRef as useRef22, useState as useState36 } from "react";
 import { jsx as jsx563 } from "react/jsx-runtime";
 function Visible({
   className = "",
@@ -14823,9 +15085,9 @@ function Visible({
   children,
   ...restProps
 }) {
-  const ref = useRef19(null);
+  const ref = useRef22(null);
   const [visible, setVisible] = useState36(false);
-  useEffect15(() => {
+  useEffect18(() => {
     const el = ref.current;
     if (!el || typeof IntersectionObserver === "undefined") return;
     const observer = new IntersectionObserver(
@@ -14877,7 +15139,7 @@ function WarningCallout({
 }
 
 // components/Watermark.tsx
-import { jsx as jsx565, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx565, jsxs as jsxs106 } from "react/jsx-runtime";
 function Watermark({
   className = "",
   text = void 0,
@@ -14887,7 +15149,7 @@ function Watermark({
   children = void 0,
   ...restProps
 }) {
-  return /* @__PURE__ */ jsxs104(
+  return /* @__PURE__ */ jsxs106(
     "div",
     {
       className: `watermark ${className}`,