@cdt5058/json-render-uswds 0.0.1 → 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2627 @@
+import {
+  uswdsComponentDefinitions
+} from "./chunk-QYJNF5RV.mjs";
+
+// src/components.tsx
+import { useState, useId } from "react";
+import {
+  useBoundProp,
+  useStateBinding,
+  useFieldValidation
+} from "@json-render/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function safeHref(url) {
+  if (!url) return void 0;
+  if (/^\s*(javascript|vbscript|data):/i.test(url)) return "#";
+  return url;
+}
+function safeCssUrl(url) {
+  if (!url) return void 0;
+  return url.replace(/['"()\\\n\r]/g, "");
+}
+function getPaginationRange(current, total) {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const pages = [];
+  pages.push(1);
+  if (current > 3) pages.push("ellipsis");
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+  for (let i = start; i <= end; i++) pages.push(i);
+  if (current < total - 2) pages.push("ellipsis");
+  pages.push(total);
+  return pages;
+}
+function getButtonClass(variant) {
+  const base = "usa-button";
+  switch (variant) {
+    case "secondary":
+      return `${base} usa-button--secondary`;
+    case "accent-cool":
+      return `${base} usa-button--accent-cool`;
+    case "accent-warm":
+      return `${base} usa-button--accent-warm`;
+    case "base":
+      return `${base} usa-button--base`;
+    case "outline":
+      return `${base} usa-button--outline`;
+    case "outline-inverse":
+      return `${base} usa-button--outline usa-button--inverse`;
+    case "big":
+      return `${base} usa-button--big`;
+    case "unstyled":
+      return `${base} usa-button--unstyled`;
+    default:
+      return base;
+  }
+}
+var uswdsComponents = {
+  // ── Layout ────────────────────────────────────────────────────────────
+  Grid: ({ props, children }) => {
+    const cols = Math.max(1, Math.min(12, props.columns ?? 1));
+    const gapMap = {
+      sm: "grid-gap-sm",
+      md: "grid-gap",
+      lg: "grid-gap-lg"
+    };
+    const gapClass = gapMap[props.gap ?? "md"] ?? "grid-gap";
+    return /* @__PURE__ */ jsx("div", { className: `grid-row ${gapClass}`, children: Array.isArray(children) ? children.map((child, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `tablet:grid-col-${Math.floor(12 / cols)}`,
+        children: child
+      },
+      i
+    )) : /* @__PURE__ */ jsx("div", { className: `tablet:grid-col-${Math.floor(12 / cols)}`, children }) });
+  },
+  Card: ({ props, children }) => {
+    return /* @__PURE__ */ jsx("div", { className: `usa-card${props.flag ? " usa-card--flag" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "usa-card__container", children: [
+      props.mediaUrl && /* @__PURE__ */ jsx("div", { className: "usa-card__media", children: /* @__PURE__ */ jsx("div", { className: "usa-card__img", children: /* @__PURE__ */ jsx("img", { src: props.mediaUrl, alt: props.mediaAlt ?? "" }) }) }),
+      (props.title || props.description) && /* @__PURE__ */ jsx("div", { className: "usa-card__header", children: props.title && /* @__PURE__ */ jsx("h2", { className: "usa-card__heading", children: props.title }) }),
+      /* @__PURE__ */ jsxs("div", { className: "usa-card__body", children: [
+        props.description && /* @__PURE__ */ jsx("p", { children: props.description }),
+        children
+      ] })
+    ] }) });
+  },
+  Divider: (_) => {
+    return /* @__PURE__ */ jsx("hr", { className: "usa-divider" });
+  },
+  CardGroup: ({ props }) => {
+    const cards = props.cards ?? [];
+    return /* @__PURE__ */ jsx("ul", { className: "usa-card-group", children: cards.map((card, i) => /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: `usa-card tablet:grid-col-4${props.flag ? " usa-card--flag" : ""}`,
+        children: /* @__PURE__ */ jsxs("div", { className: "usa-card__container", children: [
+          card.mediaUrl && /* @__PURE__ */ jsx("div", { className: "usa-card__media", children: /* @__PURE__ */ jsx("div", { className: "usa-card__img", children: /* @__PURE__ */ jsx("img", { src: card.mediaUrl, alt: card.mediaAlt ?? "" }) }) }),
+          card.title && /* @__PURE__ */ jsx("div", { className: "usa-card__header", children: /* @__PURE__ */ jsx("h2", { className: "usa-card__heading", children: card.title }) }),
+          card.description && /* @__PURE__ */ jsx("div", { className: "usa-card__body", children: /* @__PURE__ */ jsx("p", { children: card.description }) }),
+          card.footer && /* @__PURE__ */ jsx("div", { className: "usa-card__footer", children: /* @__PURE__ */ jsx("p", { children: card.footer }) })
+        ] })
+      },
+      i
+    )) });
+  },
+  Footer: ({ props }) => {
+    const variant = props.variant ?? "medium";
+    const groups = props.navGroups ?? [];
+    const contact = props.contactInfo ?? [];
+    const socialIcons = {
+      facebook: "M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z",
+      twitter: "M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z",
+      youtube: "M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.95C5.12 20 12 20 12 20s6.88 0 8.59-.47a2.78 2.78 0 0 0 1.95-1.95A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58zM9.75 15.02V8.98L15.5 12l-5.75 3.02z",
+      instagram: "M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37zm1.5-4.87h.01M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9A5.5 5.5 0 0 1 16.5 22h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2z",
+      linkedin: "M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z M4 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
+      github: "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22",
+      rss: "M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16 M5 19a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
+    };
+    const returnToTopEl = props.returnToTop ? /* @__PURE__ */ jsx("div", { className: "grid-container usa-footer__return-to-top", children: /* @__PURE__ */ jsx("a", { href: "#top", children: "Return to top" }) }) : null;
+    const logoEl = /* @__PURE__ */ jsxs("div", { className: "usa-footer__logo grid-row grid-gap-2", children: [
+      props.logoUrl && /* @__PURE__ */ jsx("div", { className: "grid-col-auto", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: "usa-footer__logo-img",
+          src: props.logoUrl,
+          alt: props.logoAlt ?? ""
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "grid-col-auto", children: /* @__PURE__ */ jsx("p", { className: "usa-footer__logo-heading", children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "usa-footer__logo-anchor",
+          href: safeHref(props.agencyUrl) ?? "/",
+          children: props.agencyName
+        }
+      ) }) })
+    ] });
+    const contactEl = contact.length > 0 ? /* @__PURE__ */ jsxs("address", { className: "usa-footer__address", children: [
+      props.contactHeading && /* @__PURE__ */ jsx("p", { className: "usa-footer__contact-heading", children: props.contactHeading }),
+      /* @__PURE__ */ jsx("div", { className: "usa-footer__contact-info grid-row grid-gap", children: contact.map((item, i) => /* @__PURE__ */ jsx("div", { className: "grid-col-auto", children: item.type === "email" ? /* @__PURE__ */ jsx("a", { href: `mailto:${item.value}`, children: item.value }) : item.type === "phone" ? /* @__PURE__ */ jsx("a", { href: `tel:${item.value.replace(/\D/g, "")}`, children: item.value }) : /* @__PURE__ */ jsx("p", { children: item.value }) }, i)) })
+    ] }) : null;
+    const socialEl = (props.socialLinks ?? []).length > 0 ? /* @__PURE__ */ jsx("div", { className: "usa-footer__social-links grid-row grid-gap-1", children: (props.socialLinks ?? []).map((s) => /* @__PURE__ */ jsx("div", { className: "grid-col-auto", children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: "usa-social-link",
+        href: safeHref(s.href),
+        "aria-label": s.label,
+        rel: "noreferrer",
+        target: "_blank",
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "usa-icon",
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            width: "24",
+            height: "24",
+            children: /* @__PURE__ */ jsx("path", { d: socialIcons[s.platform] ?? "" })
+          }
+        )
+      }
+    ) }, s.platform)) }) : null;
+    if (variant === "slim") {
+      const links2 = groups[0]?.links ?? [];
+      return /* @__PURE__ */ jsxs("footer", { className: "usa-footer usa-footer--slim", children: [
+        returnToTopEl,
+        /* @__PURE__ */ jsx("div", { className: "usa-footer__primary-section", children: /* @__PURE__ */ jsx("div", { className: "grid-container", children: /* @__PURE__ */ jsxs("div", { className: "grid-row grid-gap", children: [
+          /* @__PURE__ */ jsx("div", { className: "tablet:grid-col-fill usa-footer__primary-content", children: logoEl }),
+          links2.length > 0 && /* @__PURE__ */ jsx("div", { className: "tablet:grid-col-auto usa-footer__primary-content usa-footer__primary-content--collapsible", children: /* @__PURE__ */ jsx("nav", { "aria-label": "Footer navigation", children: /* @__PURE__ */ jsx("ul", { className: "grid-row grid-gap", children: links2.map((link, i) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: "mobile-lg:grid-col-auto usa-footer__primary-content",
+              children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: safeHref(link.href),
+                  className: "usa-footer__primary-link",
+                  children: link.label
+                }
+              )
+            },
+            i
+          )) }) }) })
+        ] }) }) }),
+        (contact.length > 0 || socialEl) && /* @__PURE__ */ jsx("div", { className: "usa-footer__secondary-section", children: /* @__PURE__ */ jsx("div", { className: "grid-container", children: /* @__PURE__ */ jsx("div", { className: "grid-row grid-gap", children: /* @__PURE__ */ jsxs("div", { className: "usa-footer__contact-links mobile-lg:grid-col-12", children: [
+          socialEl,
+          contactEl
+        ] }) }) }) })
+      ] });
+    }
+    if (variant === "big") {
+      return /* @__PURE__ */ jsxs("footer", { className: "usa-footer usa-footer--big", children: [
+        returnToTopEl,
+        /* @__PURE__ */ jsx("div", { className: "usa-footer__primary-section", children: /* @__PURE__ */ jsx("div", { className: "grid-container", children: /* @__PURE__ */ jsx("div", { className: "grid-row grid-gap-4", children: groups.map((group, i) => /* @__PURE__ */ jsxs("div", { className: "tablet:grid-col-4", children: [
+          group.heading && /* @__PURE__ */ jsx("p", { className: "usa-footer__primary-link", children: group.heading }),
+          /* @__PURE__ */ jsx("ul", { className: "usa-list usa-list--unstyled", children: group.links.map((link, j) => /* @__PURE__ */ jsx("li", { className: "usa-footer__secondary-link", children: /* @__PURE__ */ jsx("a", { href: safeHref(link.href), children: link.label }) }, j)) })
+        ] }, i)) }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "usa-footer__secondary-section", children: /* @__PURE__ */ jsx("div", { className: "grid-container", children: /* @__PURE__ */ jsxs("div", { className: "grid-row grid-gap", children: [
+          /* @__PURE__ */ jsx("div", { className: "tablet:grid-col-4", children: logoEl }),
+          (contact.length > 0 || socialEl) && /* @__PURE__ */ jsxs("div", { className: "tablet:grid-col-8 usa-footer__contact-links", children: [
+            socialEl,
+            contactEl
+          ] })
+        ] }) }) })
+      ] });
+    }
+    const links = groups[0]?.links ?? [];
+    return /* @__PURE__ */ jsxs("footer", { className: "usa-footer", children: [
+      returnToTopEl,
+      /* @__PURE__ */ jsx("div", { className: "usa-footer__primary-section", children: /* @__PURE__ */ jsx("nav", { className: "usa-footer__nav", "aria-label": "Footer navigation", children: /* @__PURE__ */ jsx("ul", { className: "grid-row grid-gap", children: links.map((link, i) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          className: "mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content",
+          children: /* @__PURE__ */ jsx("a", { href: safeHref(link.href), className: "usa-footer__primary-link", children: link.label })
+        },
+        i
+      )) }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "usa-footer__secondary-section", children: /* @__PURE__ */ jsx("div", { className: "grid-container", children: /* @__PURE__ */ jsxs("div", { className: "grid-row grid-gap", children: [
+        /* @__PURE__ */ jsx("div", { className: "tablet:grid-col-4", children: logoEl }),
+        (contact.length > 0 || socialEl) && /* @__PURE__ */ jsxs("div", { className: "tablet:grid-col-8 usa-footer__contact-links", children: [
+          socialEl,
+          contactEl
+        ] })
+      ] }) }) })
+    ] });
+  },
+  // ── Navigation ────────────────────────────────────────────────────────
+  Accordion: ({ props }) => {
+    const items = props.items ?? [];
+    const [openItems, setOpenItems] = useState(() => {
+      const initial = /* @__PURE__ */ new Set();
+      items.forEach((item, i) => {
+        if (item.expanded) initial.add(i);
+      });
+      return initial;
+    });
+    const toggle = (index) => {
+      setOpenItems((prev) => {
+        const next = new Set(prev);
+        if (props.multiselectable) {
+          if (next.has(index)) {
+            next.delete(index);
+          } else {
+            next.add(index);
+          }
+        } else {
+          if (next.has(index)) {
+            next.clear();
+          } else {
+            next.clear();
+            next.add(index);
+          }
+        }
+        return next;
+      });
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `usa-accordion${props.bordered ? " usa-accordion--bordered" : ""}`,
+        children: items.map((item, i) => {
+          const isOpen = openItems.has(i);
+          const headingId = `accordion-heading-${i}`;
+          const contentId = `accordion-content-${i}`;
+          return /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h4", { className: "usa-accordion__heading", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "usa-accordion__button",
+                "aria-expanded": isOpen,
+                "aria-controls": contentId,
+                id: headingId,
+                onClick: () => toggle(i),
+                children: item.title
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: contentId,
+                className: "usa-accordion__content usa-prose",
+                hidden: !isOpen,
+                role: "region",
+                "aria-labelledby": headingId,
+                children: /* @__PURE__ */ jsx("p", { children: item.content })
+              }
+            )
+          ] }, i);
+        })
+      }
+    );
+  },
+  Pagination: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundPage, setBoundPage] = useBoundProp(
+      props.page,
+      bindings?.page
+    );
+    const [localPage, setLocalPage] = useState(props.page ?? 1);
+    const isBound = !!bindings?.page;
+    const page = isBound ? boundPage ?? 1 : localPage;
+    const setPage = isBound ? setBoundPage : setLocalPage;
+    const total = props.totalPages;
+    const range = getPaginationRange(page, total);
+    const navigate = (p) => {
+      if (p < 1 || p > total) return;
+      setPage(p);
+      emit("change");
+    };
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        "aria-label": props.ariaLabel ?? "Pagination",
+        className: "usa-pagination",
+        children: /* @__PURE__ */ jsxs("ul", { className: "usa-pagination__list", children: [
+          /* @__PURE__ */ jsx("li", { className: "usa-pagination__item usa-pagination__arrow", children: /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: "#",
+              className: "usa-pagination__link usa-pagination__previous-page",
+              "aria-label": "Previous page",
+              "aria-disabled": page <= 1,
+              onClick: (e) => {
+                e.preventDefault();
+                navigate(page - 1);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "usa-icon",
+                    "aria-hidden": "true",
+                    role: "img",
+                    viewBox: "0 0 24 24",
+                    width: "24",
+                    height: "24",
+                    children: /* @__PURE__ */ jsx("path", { d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "usa-pagination__link-text", children: "Previous" })
+              ]
+            }
+          ) }),
+          range.map(
+            (item, i) => item === "ellipsis" ? /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: "usa-pagination__item usa-pagination__overflow",
+                role: "presentation",
+                children: /* @__PURE__ */ jsx("span", { children: "\u2026" })
+              },
+              `ellipsis-${i}`
+            ) : /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: "usa-pagination__item usa-pagination__page-no",
+                children: /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: "#",
+                    className: `usa-pagination__button${page === item ? " usa-current" : ""}`,
+                    "aria-label": `Page ${item}`,
+                    "aria-current": page === item ? "page" : void 0,
+                    onClick: (e) => {
+                      e.preventDefault();
+                      navigate(item);
+                    },
+                    children: item
+                  }
+                )
+              },
+              item
+            )
+          ),
+          /* @__PURE__ */ jsx("li", { className: "usa-pagination__item usa-pagination__arrow", children: /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: "#",
+              className: "usa-pagination__link usa-pagination__next-page",
+              "aria-label": "Next page",
+              "aria-disabled": page >= total,
+              onClick: (e) => {
+                e.preventDefault();
+                navigate(page + 1);
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "usa-pagination__link-text", children: "Next" }),
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "usa-icon",
+                    "aria-hidden": "true",
+                    role: "img",
+                    viewBox: "0 0 24 24",
+                    width: "24",
+                    height: "24",
+                    children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z" })
+                  }
+                )
+              ]
+            }
+          ) })
+        ] })
+      }
+    );
+  },
+  StepIndicator: ({
+    props
+  }) => {
+    const steps = props.steps ?? [];
+    const current = Math.max(1, Math.min(steps.length, Number(props.currentStep) || 1));
+    const countersClass = props.counters === "small" ? " usa-step-indicator--counters-sm" : props.counters === "default" ? " usa-step-indicator--counters" : "";
+    const centeredClass = props.centered ? " usa-step-indicator--center" : "";
+    const noLabelsClass = props.noLabels ? " usa-step-indicator--no-labels" : "";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `usa-step-indicator${countersClass}${centeredClass}${noLabelsClass}`,
+        "aria-label": "Progress",
+        children: [
+          /* @__PURE__ */ jsx("ol", { className: "usa-step-indicator__segments", children: steps.map((label, i) => {
+            const stepNum = i + 1;
+            const isComplete = stepNum < current;
+            const isCurrent = stepNum === current;
+            const segClass = isComplete ? "usa-step-indicator__segment usa-step-indicator__segment--complete" : isCurrent ? "usa-step-indicator__segment usa-step-indicator__segment--current" : "usa-step-indicator__segment";
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: segClass,
+                "aria-current": isCurrent ? "step" : void 0,
+                children: /* @__PURE__ */ jsxs("span", { className: "usa-step-indicator__segment-label", children: [
+                  label,
+                  isComplete && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: "completed" }),
+                  isCurrent && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: "in progress" })
+                ] })
+              },
+              i
+            );
+          }) }),
+          /* @__PURE__ */ jsx("div", { className: "usa-step-indicator__header", children: /* @__PURE__ */ jsxs("h4", { className: "usa-step-indicator__heading", children: [
+            /* @__PURE__ */ jsxs("span", { className: "usa-step-indicator__heading-counter", children: [
+              /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: "Step " }),
+              /* @__PURE__ */ jsx("span", { className: "usa-step-indicator__current-step", children: current }),
+              /* @__PURE__ */ jsxs("span", { className: "usa-step-indicator__total-steps", children: [
+                " ",
+                "of ",
+                steps.length
+              ] })
+            ] }),
+            steps[current - 1] && /* @__PURE__ */ jsx("span", { className: "usa-step-indicator__heading-text", children: steps[current - 1] })
+          ] }) })
+        ]
+      }
+    );
+  },
+  Breadcrumb: ({ props }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ jsx("nav", { className: "usa-breadcrumb", "aria-label": "Breadcrumbs", children: /* @__PURE__ */ jsx("ol", { className: "usa-breadcrumb__list", children: items.map((item, i) => {
+      const isLast = i === items.length - 1;
+      return /* @__PURE__ */ jsx(
+        "li",
+        {
+          className: `usa-breadcrumb__list-item${isLast ? " usa-current" : ""}`,
+          "aria-current": isLast ? "page" : void 0,
+          children: item.href && !isLast ? /* @__PURE__ */ jsx("a", { href: safeHref(item.href), className: "usa-breadcrumb__link", children: /* @__PURE__ */ jsx("span", { children: item.label }) }) : /* @__PURE__ */ jsx("span", { children: item.label })
+        },
+        i
+      );
+    }) }) });
+  },
+  Header: ({ props }) => {
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const [openDropdown, setOpenDropdown] = useState(null);
+    const uid = useId();
+    const isExtended = props.variant === "extended";
+    const navItems = props.navItems ?? [];
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: `usa-overlay${mobileOpen ? " is-visible" : ""}` }),
+      /* @__PURE__ */ jsx(
+        "header",
+        {
+          className: `usa-header${isExtended ? " usa-header--extended" : " usa-header--basic"}`,
+          children: /* @__PURE__ */ jsxs("div", { className: "usa-nav-container", children: [
+            /* @__PURE__ */ jsxs("div", { className: "usa-navbar", children: [
+              /* @__PURE__ */ jsx("div", { className: "usa-logo", children: /* @__PURE__ */ jsx("em", { className: "usa-logo__text", children: /* @__PURE__ */ jsxs("a", { href: safeHref(props.siteUrl) ?? "/", title: "Home", children: [
+                props.logoUrl && /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    className: "usa-header__logo",
+                    src: props.logoUrl,
+                    alt: props.logoAlt ?? "",
+                    style: {
+                      maxHeight: "2.5rem",
+                      marginRight: "0.5rem",
+                      verticalAlign: "middle"
+                    }
+                  }
+                ),
+                props.siteName
+              ] }) }) }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "usa-menu-btn",
+                  onClick: () => setMobileOpen(true),
+                  children: "Menu"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "nav",
+              {
+                "aria-label": "Primary navigation",
+                className: `usa-nav${mobileOpen ? " is-visible" : ""}`,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "usa-nav__close",
+                      onClick: () => {
+                        setMobileOpen(false);
+                        setOpenDropdown(null);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "svg",
+                          {
+                            className: "usa-icon",
+                            "aria-hidden": "true",
+                            focusable: false,
+                            role: "img",
+                            viewBox: "0 0 24 24",
+                            width: "24",
+                            height: "24",
+                            children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+                          }
+                        ),
+                        "Close"
+                      ]
+                    }
+                  ),
+                  props.showSearch && /* @__PURE__ */ jsxs("div", { role: "search", className: "usa-search usa-search--small", children: [
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        className: "usa-sr-only",
+                        htmlFor: `${uid}-header-search`,
+                        children: "Search"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        className: "usa-input",
+                        id: `${uid}-header-search`,
+                        type: "search",
+                        name: "search"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("button", { className: "usa-button", type: "submit", children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: "usa-icon",
+                          "aria-hidden": "true",
+                          role: "img",
+                          viewBox: "0 0 24 24",
+                          width: "24",
+                          height: "24",
+                          children: /* @__PURE__ */ jsx("path", { d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: "Search" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("ul", { className: "usa-nav__primary usa-accordion", children: navItems.map((item, i) => {
+                    const hasDropdown = item.items && item.items.length > 0;
+                    const isOpen = openDropdown === i;
+                    const dropdownId = `${uid}-nav-dropdown-${i}`;
+                    return /* @__PURE__ */ jsx(
+                      "li",
+                      {
+                        className: `usa-nav__primary-item${item.current ? " usa-current" : ""}`,
+                        children: hasDropdown ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: `usa-accordion__button usa-nav__link${item.current ? " usa-current" : ""}`,
+                              "aria-expanded": isOpen,
+                              "aria-controls": dropdownId,
+                              onClick: () => setOpenDropdown(isOpen ? null : i),
+                              children: /* @__PURE__ */ jsx("span", { children: item.label })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "ul",
+                            {
+                              id: dropdownId,
+                              className: "usa-nav__submenu",
+                              hidden: !isOpen,
+                              children: (item.items ?? []).map((sub, j) => /* @__PURE__ */ jsx("li", { className: "usa-nav__submenu-item", children: /* @__PURE__ */ jsx("a", { href: safeHref(sub.href), children: sub.label }) }, j))
+                            }
+                          )
+                        ] }) : /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: safeHref(item.href),
+                            className: `usa-nav__link${item.current ? " usa-current" : ""}`,
+                            "aria-current": item.current ? "page" : void 0,
+                            children: /* @__PURE__ */ jsx("span", { children: item.label })
+                          }
+                        )
+                      },
+                      i
+                    );
+                  }) })
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+  },
+  SkipNav: ({ props }) => {
+    return /* @__PURE__ */ jsx("a", { className: "usa-skipnav", href: safeHref(props.href) ?? "#main-content", children: props.label ?? "Skip to main content" });
+  },
+  SideNav: ({ props }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ jsx("nav", { "aria-label": props.ariaLabel ?? "Side navigation", children: /* @__PURE__ */ jsx("ul", { className: "usa-sidenav", children: items.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "usa-sidenav__item", children: [
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: safeHref(item.href),
+          className: item.current ? "usa-current" : void 0,
+          "aria-current": item.current ? "page" : void 0,
+          children: item.label
+        }
+      ),
+      item.children && item.children.length > 0 && /* @__PURE__ */ jsx("ul", { className: "usa-sidenav__sublist", children: item.children.map((child, j) => /* @__PURE__ */ jsx("li", { className: "usa-sidenav__item", children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: safeHref(child.href),
+          className: child.current ? "usa-current" : void 0,
+          "aria-current": child.current ? "page" : void 0,
+          children: child.label
+        }
+      ) }, j)) })
+    ] }, i)) }) });
+  },
+  LanguageSelector: ({
+    props
+  }) => {
+    const [open, setOpen] = useState(false);
+    const uid = useId();
+    const submenuId = `${uid}-language-submenu`;
+    const languages = props.languages ?? [];
+    const current = props.currentLang ?? "";
+    return /* @__PURE__ */ jsx("nav", { "aria-label": "Language selector", className: "usa-language-container", children: /* @__PURE__ */ jsx("ul", { className: "usa-language__primary", children: /* @__PURE__ */ jsxs("li", { className: "usa-language__primary-item", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "usa-accordion__button usa-language__link",
+          "aria-expanded": open,
+          "aria-controls": submenuId,
+          onClick: () => setOpen((v) => !v),
+          children: languages.find((l) => l.lang === current)?.label ?? "Language"
+        }
+      ),
+      /* @__PURE__ */ jsx("ul", { id: submenuId, className: "usa-language__submenu", hidden: !open, children: languages.filter((l) => l.lang !== current).map((lang) => /* @__PURE__ */ jsx("li", { className: "usa-language__submenu-item", children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: safeHref(lang.href),
+          lang: lang.lang,
+          hrefLang: lang.lang,
+          className: "usa-language__submenu-link",
+          children: lang.localLabel ?? lang.label
+        }
+      ) }, lang.lang)) })
+    ] }) }) });
+  },
+  Link: ({ props, emit }) => {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: safeHref(props.href),
+        className: props.variant === "nav" ? "usa-nav__link" : "usa-link",
+        target: props.external ? "_blank" : void 0,
+        rel: props.external ? "noreferrer" : void 0,
+        onClick: () => emit("press"),
+        children: [
+          props.label,
+          props.external && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "usa-icon",
+              "aria-label": "(external link)",
+              role: "img",
+              viewBox: "0 0 24 24",
+              width: "16",
+              height: "16",
+              style: { marginLeft: "0.25em", verticalAlign: "middle" },
+              children: /* @__PURE__ */ jsx("path", { d: "M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3z" })
+            }
+          )
+        ]
+      }
+    );
+  },
+  InPageNavigation: ({
+    props
+  }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        "aria-label": props.heading ?? "On this page",
+        className: "usa-in-page-nav",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "usa-in-page-nav__header", children: /* @__PURE__ */ jsx("p", { className: "usa-in-page-nav__title", children: props.heading ?? "On this page" }) }),
+          /* @__PURE__ */ jsx("ul", { className: "usa-in-page-nav__list", children: items.map((item, i) => /* @__PURE__ */ jsx("li", { className: "usa-in-page-nav__item", children: /* @__PURE__ */ jsx("a", { href: safeHref(item.href), className: "usa-in-page-nav__link", children: item.label }) }, i)) })
+        ]
+      }
+    );
+  },
+  // ── Data Display ──────────────────────────────────────────────────────
+  Table: ({ props }) => {
+    const columns = props.columns ?? [];
+    const rows = (props.rows ?? []).map((row) => row.map(String));
+    const tableClass = [
+      "usa-table",
+      props.borderless ? "usa-table--borderless" : "",
+      props.striped ? "usa-table--striped" : "",
+      props.compact ? "usa-table--compact" : ""
+    ].filter(Boolean).join(" ");
+    const table = /* @__PURE__ */ jsxs("table", { className: tableClass, children: [
+      props.caption && /* @__PURE__ */ jsx("caption", { children: props.caption }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx("th", { scope: "col", children: col }, col)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, j) => /* @__PURE__ */ jsx("td", { children: cell }, j)) }, i)) })
+    ] });
+    if (props.scrollable) {
+      return /* @__PURE__ */ jsx("div", { className: "usa-table-container--scrollable", tabIndex: 0, children: table });
+    }
+    return table;
+  },
+  Heading: ({ props }) => {
+    const level = props.level ?? "h2";
+    if (level === "h1") return /* @__PURE__ */ jsx("h1", { className: "usa-prose", children: props.text });
+    if (level === "h3") return /* @__PURE__ */ jsx("h3", { className: "usa-prose", children: props.text });
+    if (level === "h4") return /* @__PURE__ */ jsx("h4", { className: "usa-prose", children: props.text });
+    if (level === "h5") return /* @__PURE__ */ jsx("h5", { className: "usa-prose", children: props.text });
+    if (level === "h6") return /* @__PURE__ */ jsx("h6", { className: "usa-prose", children: props.text });
+    return /* @__PURE__ */ jsx("h2", { className: "usa-prose", children: props.text });
+  },
+  Text: ({ props }) => {
+    if (props.variant === "lead") {
+      return /* @__PURE__ */ jsx("p", { className: "usa-intro", children: props.text });
+    }
+    if (props.variant === "small") {
+      return /* @__PURE__ */ jsx("small", { className: "usa-prose", children: props.text });
+    }
+    if (props.variant === "code") {
+      return /* @__PURE__ */ jsx("code", { className: "usa-prose", children: props.text });
+    }
+    return /* @__PURE__ */ jsx("p", { className: "usa-prose", children: props.text });
+  },
+  Alert: ({ props }) => {
+    const typeClass = props.type === "success" ? "usa-alert--success" : props.type === "warning" ? "usa-alert--warning" : props.type === "error" ? "usa-alert--error" : props.type === "emergency" ? "usa-alert--emergency" : "usa-alert--info";
+    const slimClass = props.slim ? " usa-alert--slim" : "";
+    const noIconClass = props.noIcon ? " usa-alert--no-icon" : "";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `usa-alert ${typeClass}${slimClass}${noIconClass}`,
+        role: "alert",
+        children: /* @__PURE__ */ jsxs("div", { className: "usa-alert__body", children: [
+          props.heading && /* @__PURE__ */ jsx("h4", { className: "usa-alert__heading", children: props.heading }),
+          /* @__PURE__ */ jsx("p", { className: "usa-alert__text", children: props.message })
+        ] })
+      }
+    );
+  },
+  SiteAlert: ({ props }) => {
+    const typeClass = props.type === "emergency" ? "usa-site-alert--emergency" : "usa-site-alert--info";
+    const slimClass = props.slim ? " usa-site-alert--slim" : "";
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        className: `usa-site-alert ${typeClass}${slimClass}`,
+        "aria-label": "Site alert",
+        children: /* @__PURE__ */ jsx("div", { className: "usa-alert", children: /* @__PURE__ */ jsxs("div", { className: "usa-alert__body", children: [
+          props.heading && /* @__PURE__ */ jsx("h3", { className: "usa-alert__heading", children: props.heading }),
+          /* @__PURE__ */ jsx("p", { className: "usa-alert__text", children: props.message })
+        ] }) })
+      }
+    );
+  },
+  Tag: ({ props }) => {
+    return /* @__PURE__ */ jsx("span", { className: `usa-tag${props.big ? " usa-tag--big" : ""}`, children: props.text });
+  },
+  SummaryBox: ({ props }) => {
+    const uid = useId();
+    const headingId = `${uid}-summary-heading`;
+    const items = props.items ?? [];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "usa-summary-box",
+        role: "region",
+        "aria-labelledby": headingId,
+        children: /* @__PURE__ */ jsxs("div", { className: "usa-summary-box__body", children: [
+          /* @__PURE__ */ jsx("h3", { className: "usa-summary-box__heading", id: headingId, children: props.heading }),
+          /* @__PURE__ */ jsx("div", { className: "usa-summary-box__text", children: /* @__PURE__ */ jsx("ul", { className: "usa-list", children: items.map((item, i) => /* @__PURE__ */ jsx("li", { className: "usa-summary-box__list-item", children: item }, i)) }) })
+        ] })
+      }
+    );
+  },
+  ProcessList: ({ props }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ jsx("ol", { className: "usa-process-list", children: items.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "usa-process-list__item", children: [
+      /* @__PURE__ */ jsx("h4", { className: "usa-process-list__heading", children: item.heading }),
+      /* @__PURE__ */ jsx("p", { className: "margin-top-05", children: item.content })
+    ] }, i)) });
+  },
+  GovBanner: ({ props }) => {
+    const [expanded, setExpanded] = useState(props.expanded ?? false);
+    const tld = props.tld ?? ".gov";
+    const isMil = tld === ".mil";
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        className: `usa-banner${expanded ? " usa-banner--expanded" : ""}`,
+        "aria-label": "Official website of the United States government",
+        children: /* @__PURE__ */ jsxs("div", { className: "usa-accordion", children: [
+          /* @__PURE__ */ jsx("header", { className: "usa-banner__header", children: /* @__PURE__ */ jsxs("div", { className: "usa-banner__inner", children: [
+            /* @__PURE__ */ jsx("div", { className: "grid-col-auto", children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: "usa-banner__header-flag",
+                width: "16",
+                height: "11",
+                viewBox: "0 0 16 11",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                  /* @__PURE__ */ jsx("rect", { width: "16", height: "11", fill: "#B22234" }),
+                  /* @__PURE__ */ jsx("rect", { y: "0.846", width: "16", height: "0.846", fill: "white" }),
+                  /* @__PURE__ */ jsx("rect", { y: "2.539", width: "16", height: "0.846", fill: "white" }),
+                  /* @__PURE__ */ jsx("rect", { y: "4.231", width: "16", height: "0.846", fill: "white" }),
+                  /* @__PURE__ */ jsx("rect", { y: "5.923", width: "16", height: "0.846", fill: "white" }),
+                  /* @__PURE__ */ jsx("rect", { y: "7.615", width: "16", height: "0.846", fill: "white" }),
+                  /* @__PURE__ */ jsx("rect", { y: "9.307", width: "16", height: "0.846", fill: "white" }),
+                  /* @__PURE__ */ jsx("rect", { width: "6.4", height: "5.923", fill: "#3C3B6E" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "grid-col-fill tablet:grid-col-auto",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("p", { className: "usa-banner__header-text", children: "An official website of the United States government" }),
+                  /* @__PURE__ */ jsx("p", { className: "usa-banner__header-action", children: "Here's how you know" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "usa-accordion__button usa-banner__button",
+                "aria-expanded": expanded,
+                "aria-controls": "gov-banner-content",
+                onClick: () => setExpanded((v) => !v),
+                children: /* @__PURE__ */ jsx("span", { className: "usa-banner__button-text", children: "Here's how you know" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "usa-banner__content usa-accordion__content",
+              id: "gov-banner-content",
+              hidden: !expanded,
+              children: /* @__PURE__ */ jsxs("div", { className: "grid-row grid-gap-lg", children: [
+                /* @__PURE__ */ jsxs("div", { className: "usa-banner__guidance tablet:grid-col-6", children: [
+                  /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      className: "usa-banner__icon usa-media-block__img",
+                      "aria-hidden": "true",
+                      width: "40",
+                      height: "40",
+                      viewBox: "0 0 40 40",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: [
+                        /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "20", fill: "#005ea2" }),
+                        /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            fill: "white",
+                            d: "M20 9l11 6.5V17H9v-1.5L20 9zM11 19h3v11h-3V19zm7.5 0h3v11h-3V19zm7 0h3v11h-3V19zM9 31h22v2H9V31z"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "usa-media-block__body", children: /* @__PURE__ */ jsxs("p", { children: [
+                    /* @__PURE__ */ jsxs("strong", { children: [
+                      "Official ",
+                      isMil ? ".mil" : ".gov",
+                      " websites use HTTPS"
+                    ] }),
+                    /* @__PURE__ */ jsx("br", {}),
+                    "A ",
+                    /* @__PURE__ */ jsx("strong", { children: "lock" }),
+                    " or ",
+                    /* @__PURE__ */ jsx("strong", { children: "https://" }),
+                    " ",
+                    "means you've safely connected to the",
+                    " ",
+                    isMil ? ".mil" : ".gov",
+                    " website."
+                  ] }) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "usa-banner__guidance tablet:grid-col-6", children: [
+                  /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      className: "usa-banner__icon usa-media-block__img",
+                      "aria-hidden": "true",
+                      width: "40",
+                      height: "40",
+                      viewBox: "0 0 40 40",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: [
+                        /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "20", fill: "#005ea2" }),
+                        /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            fill: "white",
+                            d: "M20 10c-3.9 0-7 3.1-7 7v2h-2v13h18V19h-2v-2c0-3.9-3.1-7-7-7zm0 3c2.2 0 4 1.8 4 4v2h-8v-2c0-2.2 1.8-4 4-4zm0 11a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "usa-media-block__body", children: /* @__PURE__ */ jsxs("p", { children: [
+                    /* @__PURE__ */ jsxs("strong", { children: [
+                      "Secure ",
+                      isMil ? ".mil" : ".gov",
+                      " websites use HTTPS"
+                    ] }),
+                    /* @__PURE__ */ jsx("br", {}),
+                    "Share sensitive information only on official, secure websites."
+                  ] }) })
+                ] })
+              ] })
+            }
+          )
+        ] })
+      }
+    );
+  },
+  Identifier: ({ props }) => {
+    const links = props.links ?? [];
+    return /* @__PURE__ */ jsxs("section", { className: "usa-identifier", children: [
+      /* @__PURE__ */ jsx(
+        "section",
+        {
+          className: "usa-identifier__section usa-identifier__section--masthead",
+          "aria-label": "Agency identifier",
+          children: /* @__PURE__ */ jsxs("div", { className: "usa-identifier__container", children: [
+            props.logoUrl && /* @__PURE__ */ jsx("div", { className: "usa-identifier__logos", children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: safeHref(props.agencyUrl) ?? "/",
+                className: "usa-identifier__logo",
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    className: "usa-identifier__logo-img",
+                    src: props.logoUrl,
+                    alt: props.logoAlt ?? `${props.agencyName} logo`,
+                    role: "img"
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              "section",
+              {
+                className: "usa-identifier__identity",
+                "aria-label": "Agency description",
+                children: [
+                  /* @__PURE__ */ jsx("p", { className: "usa-identifier__identity-domain", children: props.domain }),
+                  /* @__PURE__ */ jsx("p", { className: "usa-identifier__identity-disclaimer", children: props.disclaimer ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "An official website of the",
+                    " ",
+                    /* @__PURE__ */ jsx("a", { className: "usa-link", href: safeHref(props.agencyUrl) ?? "/", children: props.agencyName })
+                  ] }) })
+                ]
+              }
+            )
+          ] })
+        }
+      ),
+      links.length > 0 && /* @__PURE__ */ jsx(
+        "nav",
+        {
+          className: "usa-identifier__section usa-identifier__section--required-links",
+          "aria-label": "Important links",
+          children: /* @__PURE__ */ jsx("div", { className: "usa-identifier__container", children: /* @__PURE__ */ jsx("ul", { className: "usa-identifier__required-links-list", children: links.map((link, i) => /* @__PURE__ */ jsx("li", { className: "usa-identifier__required-links-item", children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: safeHref(link.href),
+              className: "usa-identifier__required-link usa-link",
+              children: link.label
+            }
+          ) }, i)) }) })
+        }
+      ),
+      (props.showUsagov ?? true) && /* @__PURE__ */ jsx(
+        "section",
+        {
+          className: "usa-identifier__section usa-identifier__section--usagov",
+          "aria-label": "U.S. government information and services",
+          children: /* @__PURE__ */ jsx("div", { className: "usa-identifier__container", children: /* @__PURE__ */ jsxs("div", { className: "usa-identifier__usagov-description", children: [
+            "Looking for U.S. government information and services?",
+            " ",
+            /* @__PURE__ */ jsx("a", { className: "usa-link", href: "https://www.usa.gov/", children: "Visit USA.gov" })
+          ] }) })
+        }
+      )
+    ] });
+  },
+  IconList: ({ props }) => {
+    const items = props.items ?? [];
+    const sizeClass = props.size ? ` usa-icon-list--size-${props.size}` : "";
+    const colorMap = {
+      success: "text-green",
+      error: "text-red",
+      warning: "text-gold",
+      info: "text-blue",
+      default: ""
+    };
+    const iconPaths = {
+      check_circle: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5l-4.5-4.5 1.41-1.41L10 13.67l7.09-7.09 1.41 1.41L10 16.5z",
+      cancel: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",
+      info: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",
+      warning: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
+      error: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z",
+      star: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z",
+      arrow_forward: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+    };
+    return /* @__PURE__ */ jsxs("ul", { className: `usa-icon-list${sizeClass}`, children: [
+      props.title && /* @__PURE__ */ jsx("li", { className: "usa-icon-list__item", children: /* @__PURE__ */ jsx("p", { className: "usa-icon-list__title", children: props.title }) }),
+      items.map((item, i) => {
+        const color = colorMap[item.color ?? "default"] ?? "";
+        const path = iconPaths[item.icon] ?? iconPaths["info"];
+        return /* @__PURE__ */ jsxs("li", { className: "usa-icon-list__item", children: [
+          /* @__PURE__ */ jsx("div", { className: `usa-icon-list__icon${color ? ` ${color}` : ""}`, children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "usa-icon",
+              "aria-hidden": "true",
+              role: "img",
+              viewBox: "0 0 24 24",
+              width: "24",
+              height: "24",
+              children: /* @__PURE__ */ jsx("path", { d: path })
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "usa-icon-list__content", children: item.content })
+        ] }, i);
+      })
+    ] });
+  },
+  Collection: ({ props }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ jsx("ul", { className: "usa-collection", children: items.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "usa-collection__item", children: [
+      item.thumbnailUrl && /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: "usa-collection__thumbnail",
+          src: item.thumbnailUrl,
+          alt: item.thumbnailAlt ?? ""
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "usa-collection__body", children: [
+        /* @__PURE__ */ jsx("h3", { className: "usa-collection__heading", children: item.href ? /* @__PURE__ */ jsx("a", { className: "usa-link", href: safeHref(item.href), children: item.heading }) : item.heading }),
+        item.description && /* @__PURE__ */ jsx("p", { className: "usa-collection__description", children: item.description }),
+        (item.date || item.tags && item.tags.length > 0) && /* @__PURE__ */ jsxs("ul", { className: "usa-collection__meta", "aria-label": "Topics", children: [
+          item.date && /* @__PURE__ */ jsx("li", { className: "usa-collection__meta-item usa-collection__calendar-date", children: /* @__PURE__ */ jsx("time", { dateTime: item.date, children: item.dateLabel ?? item.date }) }),
+          (item.tags ?? []).map((tag) => /* @__PURE__ */ jsx("li", { className: "usa-collection__meta-item usa-tag", children: tag }, tag))
+        ] })
+      ] })
+    ] }, i)) });
+  },
+  Tooltip: ({ props }) => {
+    const [visible, setVisible] = useState(false);
+    const uid = useId();
+    const tooltipId = `${uid}-tooltip`;
+    const position = props.position ?? "top";
+    const positionClass = `usa-tooltip__body--${position}`;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "usa-tooltip",
+        style: { position: "relative", display: "inline-block" },
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
+        onFocus: () => setVisible(true),
+        onBlur: () => setVisible(false),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              tabIndex: 0,
+              className: "usa-tooltip__trigger",
+              "aria-describedby": tooltipId,
+              children: props.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: tooltipId,
+              className: `usa-tooltip__body ${positionClass}${visible ? " is-set is-visible" : ""}`,
+              role: "tooltip",
+              "aria-hidden": !visible,
+              children: props.content
+            }
+          )
+        ]
+      }
+    );
+  },
+  // ── Form Inputs ───────────────────────────────────────────────────────
+  Button: ({ props, emit }) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: props.type ?? "button",
+        className: getButtonClass(props.variant),
+        disabled: props.disabled ?? false,
+        onClick: () => emit("press"),
+        children: props.label
+      }
+    );
+  },
+  ButtonGroup: ({
+    props,
+    emit
+  }) => {
+    const buttons = props.buttons ?? [];
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: `usa-button-group${props.segmented ? " usa-button-group--segmented" : ""}`,
+        children: buttons.map((btn) => /* @__PURE__ */ jsx("li", { className: "usa-button-group__item", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getButtonClass(btn.variant ?? "default"),
+            onClick: () => emit("press"),
+            "data-value": btn.value,
+            children: btn.label
+          }
+        ) }, btn.value))
+      }
+    );
+  },
+  Input: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState("");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const validateOn = props.validateOn ?? "blur";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = useFieldValidation(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const hasError = errors.length > 0;
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    const errorId = hasError ? `${inputId}-error` : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ jsx("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: `usa-input${hasError ? " usa-input--error" : ""}`,
+              id: inputId,
+              name: props.name,
+              type: props.type ?? "text",
+              placeholder: props.placeholder ?? void 0,
+              required: props.required ?? void 0,
+              disabled: props.disabled ?? void 0,
+              value,
+              "aria-describedby": [hintId, errorId].filter(Boolean).join(" ") || void 0,
+              onChange: (e) => {
+                setValue(e.target.value);
+                if (hasValidation && validateOn === "change") validate();
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") emit("submit");
+              },
+              onFocus: () => emit("focus"),
+              onBlur: () => {
+                if (hasValidation && validateOn === "blur") validate();
+                emit("blur");
+              }
+            }
+          )
+        ]
+      }
+    );
+  },
+  Textarea: ({
+    props,
+    bindings
+  }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState("");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const validateOn = props.validateOn ?? "blur";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = useFieldValidation(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const hasError = errors.length > 0;
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    const errorId = hasError ? `${inputId}-error` : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ jsx("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              className: `usa-textarea${hasError ? " usa-input--error" : ""}`,
+              id: inputId,
+              name: props.name,
+              placeholder: props.placeholder ?? void 0,
+              required: props.required ?? void 0,
+              rows: props.rows ?? 4,
+              value,
+              "aria-describedby": [hintId, errorId].filter(Boolean).join(" ") || void 0,
+              onChange: (e) => {
+                setValue(e.target.value);
+                if (hasValidation && validateOn === "change") validate();
+              },
+              onBlur: () => {
+                if (hasValidation && validateOn === "blur") validate();
+              }
+            }
+          )
+        ]
+      }
+    );
+  },
+  Select: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState("");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const validateOn = props.validateOn ?? "change";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = useFieldValidation(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const hasError = errors.length > 0;
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    const errorId = hasError ? `${inputId}-error` : void 0;
+    const options = (props.options ?? []).map(
+      (opt) => typeof opt === "string" ? { label: opt, value: opt } : opt
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ jsx("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: `usa-select${hasError ? " usa-input--error" : ""}`,
+              id: inputId,
+              name: props.name,
+              required: props.required ?? void 0,
+              value,
+              "aria-describedby": [hintId, errorId].filter(Boolean).join(" ") || void 0,
+              onChange: (e) => {
+                setValue(e.target.value);
+                if (hasValidation && validateOn === "change") validate();
+                emit("change");
+              },
+              children: [
+                props.placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: props.placeholder }),
+                options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+              ]
+            }
+          )
+        ]
+      }
+    );
+  },
+  Checkbox: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundChecked, setBoundChecked] = useBoundProp(
+      props.checked,
+      bindings?.checked
+    );
+    const [localChecked, setLocalChecked] = useState(false);
+    const isBound = !!bindings?.checked;
+    const checked = isBound ? boundChecked ?? false : localChecked;
+    const setChecked = isBound ? setBoundChecked : setLocalChecked;
+    const validateOn = props.validateOn ?? "change";
+    const hasValidation = !!(bindings?.checked && props.checks?.length);
+    const { errors, validate } = useFieldValidation(
+      bindings?.checked ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `usa-form-group${errors.length > 0 ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `usa-checkbox${props.tile ? " usa-checkbox--tile" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: "usa-checkbox__input",
+                    id: inputId,
+                    type: "checkbox",
+                    name: props.name,
+                    checked,
+                    "aria-describedby": hintId,
+                    onChange: (e) => {
+                      setChecked(e.target.checked);
+                      if (hasValidation && validateOn === "change") validate();
+                      emit("change");
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("label", { className: "usa-checkbox__label", htmlFor: inputId, children: [
+                  props.label,
+                  props.hint && /* @__PURE__ */ jsx("span", { className: "usa-checkbox__label-description", id: hintId, children: props.hint })
+                ] })
+              ]
+            }
+          ),
+          errors.length > 0 && /* @__PURE__ */ jsx("span", { className: "usa-error-message", role: "alert", children: errors[0] })
+        ]
+      }
+    );
+  },
+  CheckboxGroup: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValues, setBoundValues] = useBoundProp(
+      props.values,
+      bindings?.values
+    );
+    const [localValues, setLocalValues] = useState([]);
+    const isBound = !!bindings?.values;
+    const values = isBound ? boundValues ?? [] : localValues;
+    const setValues = isBound ? setBoundValues : setLocalValues;
+    const options = props.options ?? [];
+    const toggle = (val) => {
+      const next = values.includes(val) ? values.filter((v) => v !== val) : [...values, val];
+      setValues(next);
+      emit("change");
+    };
+    return /* @__PURE__ */ jsxs("fieldset", { className: "usa-fieldset", children: [
+      /* @__PURE__ */ jsx("legend", { className: "usa-legend", children: props.legend }),
+      options.map((opt) => {
+        const optId = `${props.name}-${opt.value}`;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `usa-checkbox${props.tile ? " usa-checkbox--tile" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: "usa-checkbox__input",
+                  id: optId,
+                  type: "checkbox",
+                  name: props.name,
+                  value: opt.value,
+                  checked: values.includes(opt.value),
+                  onChange: () => toggle(opt.value)
+                }
+              ),
+              /* @__PURE__ */ jsxs("label", { className: "usa-checkbox__label", htmlFor: optId, children: [
+                opt.label,
+                opt.hint && /* @__PURE__ */ jsx("span", { className: "usa-checkbox__label-description", children: opt.hint })
+              ] })
+            ]
+          },
+          opt.value
+        );
+      })
+    ] });
+  },
+  Radio: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState("");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const validateOn = props.validateOn ?? "change";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = useFieldValidation(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const options = props.options ?? [];
+    return /* @__PURE__ */ jsxs(
+      "fieldset",
+      {
+        className: `usa-fieldset${errors.length > 0 ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx("legend", { className: "usa-legend", children: props.legend }),
+          errors.length > 0 && /* @__PURE__ */ jsx("span", { className: "usa-error-message", role: "alert", children: errors[0] }),
+          options.map((opt) => {
+            const optId = `${props.name}-${opt.value}`;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `usa-radio${props.tile ? " usa-radio--tile" : ""}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      className: "usa-radio__input usa-radio__input--tile",
+                      id: optId,
+                      type: "radio",
+                      name: props.name,
+                      value: opt.value,
+                      checked: value === opt.value,
+                      onChange: () => {
+                        setValue(opt.value);
+                        if (hasValidation && validateOn === "change") validate();
+                        emit("change");
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("label", { className: "usa-radio__label", htmlFor: optId, children: [
+                    opt.label,
+                    opt.hint && /* @__PURE__ */ jsx("span", { className: "usa-radio__label-description", children: opt.hint })
+                  ] })
+                ]
+              },
+              opt.value
+            );
+          })
+        ]
+      }
+    );
+  },
+  FileInput: ({ props, emit }) => {
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    return /* @__PURE__ */ jsxs("div", { className: "usa-form-group", children: [
+      /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: inputId, children: [
+        props.label,
+        props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+      ] }),
+      props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: inputId,
+          className: "usa-file-input",
+          type: "file",
+          name: props.name,
+          accept: props.accept ?? void 0,
+          multiple: props.multiple ?? void 0,
+          required: props.required ?? void 0,
+          "aria-describedby": hintId,
+          onChange: () => emit("change")
+        }
+      )
+    ] });
+  },
+  Search: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState("");
+    const uid = useId();
+    const fieldId = `${uid}-search-field`;
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const sizeClass = props.size === "small" ? " usa-search--small" : props.size === "big" ? " usa-search--big" : "";
+    return /* @__PURE__ */ jsxs("div", { role: "search", className: `usa-search${sizeClass}`, children: [
+      props.label && /* @__PURE__ */ jsx("label", { className: "usa-sr-only", htmlFor: fieldId, children: props.label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "usa-input",
+          id: fieldId,
+          type: "search",
+          name: "search",
+          placeholder: props.placeholder ?? void 0,
+          value,
+          onChange: (e) => {
+            setValue(e.target.value);
+            emit("change");
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") emit("submit");
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "usa-button",
+          type: "submit",
+          onClick: () => emit("submit"),
+          children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "usa-icon",
+                "aria-hidden": "true",
+                role: "img",
+                viewBox: "0 0 24 24",
+                width: "24",
+                height: "24",
+                children: /* @__PURE__ */ jsx("path", { d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "usa-search__submit-text", children: "Search" })
+          ]
+        }
+      )
+    ] });
+  },
+  RangeInput: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState(props.value ?? props.min ?? 0);
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? 0 : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const inputId = props.name;
+    return /* @__PURE__ */ jsxs("div", { className: "usa-form-group", children: [
+      props.label && /* @__PURE__ */ jsx("label", { className: "usa-label", htmlFor: inputId, children: props.label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "usa-range",
+          id: inputId,
+          name: props.name,
+          type: "range",
+          min: props.min ?? 0,
+          max: props.max ?? 100,
+          step: props.step ?? 1,
+          value,
+          onChange: (e) => {
+            setValue(Number(e.target.value));
+            emit("change");
+          }
+        }
+      )
+    ] });
+  },
+  DateInputGroup: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundMonth, setBoundMonth] = useBoundProp(
+      props.monthValue,
+      bindings?.monthValue
+    );
+    const [boundDay, setBoundDay] = useBoundProp(
+      props.dayValue,
+      bindings?.dayValue
+    );
+    const [boundYear, setBoundYear] = useBoundProp(
+      props.yearValue,
+      bindings?.yearValue
+    );
+    const [localMonth, setLocalMonth] = useState(props.monthValue ?? "");
+    const [localDay, setLocalDay] = useState(props.dayValue ?? "");
+    const [localYear, setLocalYear] = useState(props.yearValue ?? "");
+    const monthVal = bindings?.monthValue ? boundMonth ?? "" : localMonth;
+    const dayVal = bindings?.dayValue ? boundDay ?? "" : localDay;
+    const yearVal = bindings?.yearValue ? boundYear ?? "" : localYear;
+    const hintId = props.hint ? `${props.name}-hint` : void 0;
+    return /* @__PURE__ */ jsxs("fieldset", { className: "usa-fieldset", children: [
+      /* @__PURE__ */ jsx("legend", { className: "usa-legend", children: props.label }),
+      props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint }),
+      /* @__PURE__ */ jsxs("div", { className: "usa-memorable-date", children: [
+        /* @__PURE__ */ jsxs("div", { className: "usa-form-group usa-form-group--month", children: [
+          /* @__PURE__ */ jsx("label", { className: "usa-label", htmlFor: `${props.name}-month`, children: "Month" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "usa-input usa-input--inline",
+              id: `${props.name}-month`,
+              name: `${props.name}_month`,
+              type: "text",
+              inputMode: "numeric",
+              minLength: 1,
+              maxLength: 2,
+              pattern: "[0-9]*",
+              placeholder: "MM",
+              required: props.required ?? void 0,
+              value: monthVal,
+              "aria-describedby": hintId,
+              onChange: (e) => {
+                const v = e.target.value.replace(/\D/g, "").slice(0, 2);
+                if (bindings?.monthValue) setBoundMonth(v);
+                else setLocalMonth(v);
+                emit("change");
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "usa-form-group usa-form-group--day", children: [
+          /* @__PURE__ */ jsx("label", { className: "usa-label", htmlFor: `${props.name}-day`, children: "Day" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "usa-input usa-input--inline",
+              id: `${props.name}-day`,
+              name: `${props.name}_day`,
+              type: "text",
+              inputMode: "numeric",
+              minLength: 1,
+              maxLength: 2,
+              pattern: "[0-9]*",
+              placeholder: "DD",
+              required: props.required ?? void 0,
+              value: dayVal,
+              onChange: (e) => {
+                const v = e.target.value.replace(/\D/g, "").slice(0, 2);
+                if (bindings?.dayValue) setBoundDay(v);
+                else setLocalDay(v);
+                emit("change");
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "usa-form-group usa-form-group--year", children: [
+          /* @__PURE__ */ jsx("label", { className: "usa-label", htmlFor: `${props.name}-year`, children: "Year" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "usa-input usa-input--inline",
+              id: `${props.name}-year`,
+              name: `${props.name}_year`,
+              type: "text",
+              inputMode: "numeric",
+              minLength: 4,
+              maxLength: 4,
+              pattern: "[0-9]*",
+              placeholder: "YYYY",
+              required: props.required ?? void 0,
+              value: yearVal,
+              onChange: (e) => {
+                const v = e.target.value.replace(/\D/g, "").slice(0, 4);
+                if (bindings?.yearValue) setBoundYear(v);
+                else setLocalYear(v);
+                emit("change");
+              }
+            }
+          )
+        ] })
+      ] })
+    ] });
+  },
+  DateRangePicker: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundStart, setBoundStart] = useBoundProp(
+      props.startValue,
+      bindings?.startValue
+    );
+    const [boundEnd, setBoundEnd] = useBoundProp(
+      props.endValue,
+      bindings?.endValue
+    );
+    const [localStart, setLocalStart] = useState(props.startValue ?? "");
+    const [localEnd, setLocalEnd] = useState(props.endValue ?? "");
+    const startVal = bindings?.startValue ? boundStart ?? "" : localStart;
+    const endVal = bindings?.endValue ? boundEnd ?? "" : localEnd;
+    const hintId = props.hint ? `${props.startName}-hint` : void 0;
+    return /* @__PURE__ */ jsxs("div", { className: "usa-date-range-picker", children: [
+      props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint }),
+      /* @__PURE__ */ jsx("div", { className: "usa-date-range-picker__range-start", children: /* @__PURE__ */ jsxs("div", { className: "usa-form-group", children: [
+        /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: props.startName, children: [
+          props.startLabel,
+          props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "usa-date-picker", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "usa-input",
+            id: props.startName,
+            name: props.startName,
+            type: "date",
+            required: props.required ?? void 0,
+            min: props.minDate ?? void 0,
+            max: endVal || props.maxDate || void 0,
+            value: startVal,
+            "aria-describedby": hintId,
+            onChange: (e) => {
+              const v = e.target.value;
+              if (bindings?.startValue) setBoundStart(v);
+              else setLocalStart(v);
+              emit("change");
+            }
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "usa-date-range-picker__range-end", children: /* @__PURE__ */ jsxs("div", { className: "usa-form-group", children: [
+        /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: props.endName, children: [
+          props.endLabel,
+          props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "usa-date-picker", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "usa-input",
+            id: props.endName,
+            name: props.endName,
+            type: "date",
+            required: props.required ?? void 0,
+            min: startVal || props.minDate || void 0,
+            max: props.maxDate ?? void 0,
+            value: endVal,
+            onChange: (e) => {
+              const v = e.target.value;
+              if (bindings?.endValue) setBoundEnd(v);
+              else setLocalEnd(v);
+              emit("change");
+            }
+          }
+        ) })
+      ] }) })
+    ] });
+  },
+  InputMask: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const PRESETS = {
+      phone: "(___) ___-____",
+      zip: "_____",
+      "zip+4": "_____-____",
+      ssn: "___-__-____"
+    };
+    const pattern = props.preset && props.preset !== "custom" ? PRESETS[props.preset] ?? "" : props.pattern ?? "";
+    function applyMask(raw) {
+      const digits = raw.replace(/\D/g, "");
+      let result = "";
+      let di = 0;
+      for (const ch of pattern) {
+        if (di >= digits.length) break;
+        if (ch === "_") {
+          result += digits[di++];
+        } else {
+          result += ch;
+        }
+      }
+      return result;
+    }
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState(
+      props.value ? applyMask(props.value) : ""
+    );
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const validateOn = props.validateOn ?? "blur";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = useFieldValidation(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const hasError = errors.length > 0;
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    const errorId = hasError ? `${inputId}-error` : void 0;
+    const placeholder = pattern.length > 0 ? pattern : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ jsx("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ jsx("div", { className: "usa-input-mask", "data-mask": pattern, children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: `usa-masked usa-input${hasError ? " usa-input--error" : ""}`,
+              id: inputId,
+              name: props.name,
+              type: "text",
+              inputMode: "numeric",
+              placeholder,
+              required: props.required ?? void 0,
+              value,
+              "aria-describedby": [hintId, errorId].filter(Boolean).join(" ") || void 0,
+              onChange: (e) => {
+                const masked = applyMask(e.target.value);
+                setValue(masked);
+                if (hasValidation && validateOn === "change") validate();
+                emit("change");
+              },
+              onBlur: () => {
+                if (hasValidation && validateOn === "blur") validate();
+                emit("blur");
+              }
+            }
+          ) })
+        ]
+      }
+    );
+  },
+  Password: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState("");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const [visible, setVisible] = useState(false);
+    const validateOn = props.validateOn ?? "blur";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = useFieldValidation(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const hasError = errors.length > 0;
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    const errorId = hasError ? `${inputId}-error` : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ jsx("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ jsxs("div", { className: "usa-input-group", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `usa-input${hasError ? " usa-input--error" : ""}`,
+                id: inputId,
+                name: props.name,
+                type: visible ? "text" : "password",
+                autoComplete: "current-password",
+                required: props.required ?? void 0,
+                value,
+                "aria-describedby": [hintId, errorId].filter(Boolean).join(" ") || void 0,
+                onChange: (e) => {
+                  setValue(e.target.value);
+                  if (hasValidation && validateOn === "change") validate();
+                  emit("change");
+                },
+                onBlur: () => {
+                  if (hasValidation && validateOn === "blur") validate();
+                  emit("blur");
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "usa-input-group__append", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "usa-show-password usa-button usa-button--unstyled",
+                "aria-controls": inputId,
+                "aria-label": visible ? "Hide password" : "Show password",
+                onClick: () => setVisible((v) => !v),
+                children: visible ? "Hide password" : "Show password"
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  },
+  ComboBox: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState("");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const [query, setQuery] = useState("");
+    const [open, setOpen] = useState(false);
+    const validateOn = props.validateOn ?? "change";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = useFieldValidation(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const allOptions = (props.options ?? []).map(
+      (opt) => typeof opt === "string" ? { label: opt, value: opt } : opt
+    );
+    const filtered = query ? allOptions.filter(
+      (o) => o.label.toLowerCase().includes(query.toLowerCase())
+    ) : allOptions;
+    const selectedLabel = allOptions.find((o) => o.value === value)?.label ?? value;
+    const hasError = errors.length > 0;
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    const errorId = hasError ? `${inputId}-error` : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: `${inputId}-combo`, children: [
+            props.label,
+            props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ jsx("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `usa-combo-box${value ? " usa-combo-box--pristine" : ""}`,
+              style: { position: "relative" },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    className: "usa-select usa-sr-only",
+                    name: props.name,
+                    id: inputId,
+                    "aria-hidden": "true",
+                    tabIndex: -1,
+                    value,
+                    onChange: () => {
+                    },
+                    required: props.required ?? void 0,
+                    children: [
+                      props.placeholder && /* @__PURE__ */ jsx("option", { value: "", children: props.placeholder }),
+                      allOptions.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    id: `${inputId}-combo`,
+                    className: `usa-combo-box__input${hasError ? " usa-input--error" : ""}`,
+                    type: "text",
+                    autoComplete: "off",
+                    role: "combobox",
+                    "aria-owns": `${inputId}-list`,
+                    "aria-expanded": open,
+                    "aria-autocomplete": "list",
+                    "aria-describedby": [hintId, errorId].filter(Boolean).join(" ") || void 0,
+                    placeholder: props.placeholder ?? void 0,
+                    value: open ? query : selectedLabel,
+                    onFocus: () => {
+                      setOpen(true);
+                      setQuery("");
+                    },
+                    onBlur: () => setTimeout(() => setOpen(false), 150),
+                    onChange: (e) => setQuery(e.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "usa-combo-box__toggle-list__wrapper", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "usa-combo-box__toggle-list",
+                    "aria-label": "Toggle the dropdown list",
+                    tabIndex: -1,
+                    onClick: () => setOpen((v) => !v),
+                    children: "\xA0"
+                  }
+                ) }),
+                open && filtered.length > 0 && /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    id: `${inputId}-list`,
+                    className: "usa-combo-box__list",
+                    role: "listbox",
+                    "aria-label": props.label,
+                    style: {
+                      position: "absolute",
+                      zIndex: 100,
+                      width: "100%",
+                      background: "#fff",
+                      border: "1px solid #565c65",
+                      maxHeight: 220,
+                      overflowY: "auto",
+                      margin: 0,
+                      padding: 0,
+                      listStyle: "none"
+                    },
+                    children: filtered.map((opt) => /* @__PURE__ */ jsx(
+                      "li",
+                      {
+                        className: `usa-combo-box__list-option${value === opt.value ? " usa-combo-box__list-option--selected" : ""}`,
+                        role: "option",
+                        "aria-selected": value === opt.value,
+                        "aria-setsize": filtered.length,
+                        style: { padding: "0.5rem 1rem", cursor: "pointer" },
+                        onMouseDown: () => {
+                          setValue(opt.value);
+                          setQuery("");
+                          setOpen(false);
+                          if (hasValidation && validateOn === "change") validate();
+                          emit("change");
+                        },
+                        children: opt.label
+                      },
+                      opt.value
+                    ))
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  },
+  DatePicker: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState(props.value ?? "");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const validateOn = props.validateOn ?? "change";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = useFieldValidation(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const hasError = errors.length > 0;
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    const errorId = hasError ? `${inputId}-error` : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint ?? "mm/dd/yyyy" }),
+          hasError && /* @__PURE__ */ jsx("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ jsx("div", { className: "usa-date-picker", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: `usa-input${hasError ? " usa-input--error" : ""}`,
+              id: inputId,
+              name: props.name,
+              type: "date",
+              required: props.required ?? void 0,
+              min: props.minDate ?? void 0,
+              max: props.maxDate ?? void 0,
+              value,
+              "aria-describedby": [hintId, errorId].filter(Boolean).join(" ") || void 0,
+              onChange: (e) => {
+                setValue(e.target.value);
+                if (hasValidation && validateOn === "change") validate();
+                emit("change");
+              },
+              onBlur: () => {
+                if (hasValidation && validateOn === "blur") validate();
+              }
+            }
+          ) })
+        ]
+      }
+    );
+  },
+  TimePicker: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState(props.value ?? "");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const step = props.step ?? 30;
+    const toMinutes = (t) => {
+      const [h, m] = t.split(":").map(Number);
+      return (h ?? 0) * 60 + (m ?? 0);
+    };
+    const toTime = (mins) => {
+      const h = Math.floor(mins / 60);
+      const m = mins % 60;
+      return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+    };
+    const minMins = props.minTime ? toMinutes(props.minTime) : 0;
+    const maxMins = props.maxTime ? toMinutes(props.maxTime) : 23 * 60 + 59;
+    const options = [];
+    for (let m = minMins; m <= maxMins; m += step) {
+      options.push(toTime(m));
+    }
+    const formatDisplay = (t) => {
+      if (!t) return "";
+      const [h, m] = t.split(":").map(Number);
+      const hour = h ?? 0;
+      const suffix = hour >= 12 ? "p.m." : "a.m.";
+      const displayH = hour % 12 || 12;
+      return `${displayH}:${String(m ?? 0).padStart(2, "0")} ${suffix}`;
+    };
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    return /* @__PURE__ */ jsxs("div", { className: "usa-form-group", children: [
+      /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: inputId, children: [
+        props.label,
+        props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+      ] }),
+      props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint }),
+      /* @__PURE__ */ jsx("div", { className: "usa-time-picker", children: /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: "usa-select",
+          id: inputId,
+          name: props.name,
+          required: props.required ?? void 0,
+          value,
+          "aria-describedby": hintId,
+          onChange: (e) => {
+            setValue(e.target.value);
+            emit("change");
+          },
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "- Select -" }),
+            options.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: formatDisplay(t) }, t))
+          ]
+        }
+      ) })
+    ] });
+  },
+  CharacterCount: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState(props.value ?? "");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const validateOn = props.validateOn ?? "change";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = useFieldValidation(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const remaining = props.maxLength - value.length;
+    const isOver = remaining < 0;
+    const hasError = errors.length > 0 || isOver;
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    const statusId = `${inputId}-status`;
+    const errorId = hasError ? `${inputId}-error` : void 0;
+    const sharedProps = {
+      id: inputId,
+      name: props.name,
+      className: `usa-${props.multiline ? "textarea" : "input"}${hasError ? " usa-input--error" : ""}`,
+      maxLength: props.maxLength,
+      required: props.required ?? void 0,
+      value,
+      "aria-describedby": [hintId, statusId, errorId].filter(Boolean).join(" "),
+      onChange: (e) => {
+        setValue(e.target.value);
+        if (hasValidation && validateOn === "change") validate();
+        emit("change");
+      },
+      onBlur: () => {
+        if (hasValidation && validateOn === "blur") validate();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `usa-form-group usa-character-count${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          isOver && /* @__PURE__ */ jsx("span", { className: "usa-error-message", id: errorId, role: "alert", children: `${Math.abs(remaining)} characters over limit` }),
+          !isOver && errors.length > 0 && /* @__PURE__ */ jsx("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          props.multiline ? /* @__PURE__ */ jsx("textarea", { ...sharedProps, rows: props.rows ?? 4 }) : /* @__PURE__ */ jsx("input", { ...sharedProps, type: "text" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: statusId,
+              className: `usa-character-count__status${isOver ? " usa-character-count__status--invalid" : ""}`,
+              "aria-live": "polite",
+              children: isOver ? `${Math.abs(remaining)} characters over limit` : `${remaining} characters allowed`
+            }
+          )
+        ]
+      }
+    );
+  },
+  // ── Additional Display ────────────────────────────────────────────────
+  Icon: ({ props }) => {
+    const sizeClass = props.size ? ` usa-icon--size-${props.size}` : "";
+    const colorClass = props.color ? ` ${props.color}` : "";
+    const iconPaths = {
+      check: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
+      check_circle: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5l-4.5-4.5 1.41-1.41L10 13.67l7.09-7.09 1.41 1.41L10 16.5z",
+      close: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+      cancel: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",
+      search: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14",
+      arrow_forward: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z",
+      arrow_back: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z",
+      info: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",
+      warning: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
+      error: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z",
+      star: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z",
+      menu: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z",
+      expand_more: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z",
+      expand_less: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z",
+      lock: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z",
+      mail: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z",
+      phone: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z",
+      home: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z",
+      person: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z",
+      settings: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"
+    };
+    const path = iconPaths[props.name] ?? iconPaths["info"];
+    const isAriaHidden = !props.ariaLabel;
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: `usa-icon${sizeClass}${colorClass}`,
+        "aria-hidden": isAriaHidden ? true : void 0,
+        "aria-label": props.ariaLabel ?? void 0,
+        role: props.ariaLabel ? "img" : void 0,
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx("path", { d: path })
+      }
+    );
+  },
+  InputGroup: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState("");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const validateOn = props.validateOn ?? "blur";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = useFieldValidation(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const hasError = errors.length > 0;
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    const errorId = hasError ? `${inputId}-error` : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ jsx("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ jsx("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ jsx("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `usa-input-group${hasError ? " usa-input-group--error" : ""}`,
+              children: [
+                props.prefix && /* @__PURE__ */ jsx("div", { className: "usa-input-prefix", "aria-hidden": "true", children: props.prefix }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: `usa-input${hasError ? " usa-input--error" : ""}`,
+                    id: inputId,
+                    name: props.name,
+                    type: props.type ?? "text",
+                    placeholder: props.placeholder ?? void 0,
+                    required: props.required ?? void 0,
+                    disabled: props.disabled ?? void 0,
+                    value,
+                    "aria-describedby": [hintId, errorId].filter(Boolean).join(" ") || void 0,
+                    onChange: (e) => {
+                      setValue(e.target.value);
+                      if (hasValidation && validateOn === "change") validate();
+                      emit("change");
+                    },
+                    onBlur: () => {
+                      if (hasValidation && validateOn === "blur") validate();
+                      emit("blur");
+                    }
+                  }
+                ),
+                props.suffix && /* @__PURE__ */ jsx("div", { className: "usa-input-suffix", "aria-hidden": "true", children: props.suffix })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  },
+  List: ({ props }) => {
+    const items = props.items ?? [];
+    const variant = props.variant ?? "unordered";
+    const className = variant === "unstyled" ? "usa-list usa-list--unstyled" : "usa-list";
+    if (variant === "ordered") {
+      return /* @__PURE__ */ jsx("ol", { className, children: items.map((item, i) => /* @__PURE__ */ jsx("li", { children: item }, i)) });
+    }
+    return /* @__PURE__ */ jsx("ul", { className, children: items.map((item, i) => /* @__PURE__ */ jsx("li", { children: item }, i)) });
+  },
+  ValidationChecklist: ({
+    props
+  }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ jsxs("div", { children: [
+      props.heading && /* @__PURE__ */ jsx("p", { className: "usa-prose", children: /* @__PURE__ */ jsx("strong", { children: props.heading }) }),
+      /* @__PURE__ */ jsx("ul", { className: "usa-checklist", children: items.map((item, i) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          className: `usa-checklist__item${item.checked ? " usa-checklist__item--checked" : ""}`,
+          children: item.label
+        },
+        i
+      )) })
+    ] });
+  },
+  // ── Page-level / Layout Components ───────────────────────────────────
+  Form: ({ props, children, emit }) => {
+    return /* @__PURE__ */ jsx(
+      "form",
+      {
+        className: `usa-form${props.large ? " usa-form--large" : ""}`,
+        onSubmit: (e) => {
+          e.preventDefault();
+          emit("submit");
+        },
+        children
+      }
+    );
+  },
+  Section: ({ props, children }) => {
+    const variantClass = props.variant === "light" ? " usa-section--light" : props.variant === "dark" ? " usa-section--dark" : "";
+    return /* @__PURE__ */ jsx("section", { className: `usa-section${variantClass}`, children: /* @__PURE__ */ jsxs("div", { className: "grid-container", children: [
+      props.title && /* @__PURE__ */ jsx("h2", { className: "usa-prose", children: props.title }),
+      props.text && /* @__PURE__ */ jsx("p", { className: "usa-prose", children: props.text }),
+      children
+    ] }) });
+  },
+  Prose: ({ props, children }) => {
+    const element = props.element ?? "div";
+    if (element === "article")
+      return /* @__PURE__ */ jsx("article", { className: "usa-prose", children });
+    if (element === "section")
+      return /* @__PURE__ */ jsx("section", { children });
+    if (element === "main")
+      return /* @__PURE__ */ jsx("main", { children });
+    return /* @__PURE__ */ jsx("div", { children });
+  },
+  Hero: ({ props }) => {
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        className: "usa-hero",
+        "aria-label": props.ariaLabel ?? "Introduction",
+        style: props.backgroundUrl ? { backgroundImage: `url(${safeCssUrl(props.backgroundUrl)})` } : void 0,
+        children: /* @__PURE__ */ jsx("div", { className: "grid-container", children: /* @__PURE__ */ jsxs("div", { className: "usa-hero__callout", children: [
+          /* @__PURE__ */ jsxs("h1", { className: "usa-hero__heading", children: [
+            props.eyebrow && /* @__PURE__ */ jsx("span", { className: "usa-hero__heading--alt", children: props.eyebrow }),
+            props.heading
+          ] }),
+          props.body && /* @__PURE__ */ jsx("p", { children: props.body })
+        ] }) })
+      }
+    );
+  },
+  GraphicList: ({ props }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ jsx("section", { className: "usa-graphic-list usa-section", children: /* @__PURE__ */ jsxs("div", { className: "grid-container", children: [
+      props.heading && /* @__PURE__ */ jsx("h2", { className: "usa-graphic-list__heading", children: props.heading }),
+      /* @__PURE__ */ jsx("div", { className: "usa-graphic-list__row grid-row grid-gap", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "usa-media-block tablet:grid-col", children: [
+        item.imageUrl && /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "usa-media-block__img",
+            src: item.imageUrl,
+            alt: item.imageAlt ?? ""
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "usa-media-block__body", children: [
+          /* @__PURE__ */ jsx("h3", { className: "usa-graphic-list__heading", children: item.heading }),
+          /* @__PURE__ */ jsx("p", { children: item.content })
+        ] })
+      ] }, i)) })
+    ] }) });
+  },
+  EmbedContainer: ({
+    props
+  }) => {
+    return /* @__PURE__ */ jsx("div", { className: "usa-embed-container", children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: safeHref(props.src),
+        title: props.title,
+        sandbox: "allow-scripts allow-same-origin allow-fullscreen allow-forms allow-popups",
+        allowFullScreen: true,
+        loading: "lazy",
+        referrerPolicy: "no-referrer-when-downgrade"
+      }
+    ) });
+  },
+  // ── Overlay / Modal ───────────────────────────────────────────────────
+  Modal: ({ props, children }) => {
+    const [open, setOpen] = useStateBinding(props.openPath ?? "");
+    const isOpen = open ?? false;
+    const uid = useId();
+    const modalId = `${uid}-modal`;
+    return /* @__PURE__ */ jsx(Fragment, { children: isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "usa-modal-overlay",
+        "aria-controls": modalId,
+        "data-open-modal": true,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) setOpen(false);
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `usa-modal${props.large ? " usa-modal--lg" : ""}`,
+            id: modalId,
+            "aria-labelledby": `${modalId}-heading`,
+            "aria-describedby": `${modalId}-description`,
+            role: "dialog",
+            children: /* @__PURE__ */ jsxs("div", { className: "usa-modal__content", children: [
+              /* @__PURE__ */ jsxs("div", { className: "usa-modal__main", children: [
+                /* @__PURE__ */ jsx("h2", { className: "usa-modal__heading", id: `${modalId}-heading`, children: props.heading }),
+                /* @__PURE__ */ jsxs("div", { className: "usa-prose", id: `${modalId}-description`, children: [
+                  props.description && /* @__PURE__ */ jsx("p", { children: props.description }),
+                  children
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "usa-button usa-modal__close",
+                  "aria-label": "Close this window",
+                  onClick: () => setOpen(false),
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: "usa-icon",
+                      "aria-hidden": "true",
+                      focusable: "false",
+                      role: "img",
+                      viewBox: "0 0 24 24",
+                      width: "24",
+                      height: "24",
+                      children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        )
+      }
+    ) });
+  }
+};
+export {
+  uswdsComponentDefinitions,
+  uswdsComponents
+};
+//# sourceMappingURL=index.mjs.map