@cdt5058/json-render-uswds 0.0.1 → 0.1.0

package/dist/index.js

@@ -0,0 +1,3789 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  uswdsComponentDefinitions: () => uswdsComponentDefinitions,
+  uswdsComponents: () => uswdsComponents
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components.tsx
+var import_react = require("react");
+var import_react2 = require("@json-render/react");
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)("div", { className: `grid-row ${gapClass}`, children: Array.isArray(children) ? children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: `tablet:grid-col-${Math.floor(12 / cols)}`,
+        children: child
+      },
+      i
+    )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `tablet:grid-col-${Math.floor(12 / cols)}`, children }) });
+  },
+  Card: ({ props, children }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `usa-card${props.flag ? " usa-card--flag" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-card__container", children: [
+      props.mediaUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-card__media", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-card__img", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: props.mediaUrl, alt: props.mediaAlt ?? "" }) }) }),
+      (props.title || props.description) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-card__header", children: props.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "usa-card__heading", children: props.title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-card__body", children: [
+        props.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: props.description }),
+        children
+      ] })
+    ] }) });
+  },
+  Divider: (_) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "usa-divider" });
+  },
+  CardGroup: ({ props }) => {
+    const cards = props.cards ?? [];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "usa-card-group", children: cards.map((card, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "li",
+      {
+        className: `usa-card tablet:grid-col-4${props.flag ? " usa-card--flag" : ""}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-card__container", children: [
+          card.mediaUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-card__media", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-card__img", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: card.mediaUrl, alt: card.mediaAlt ?? "" }) }) }),
+          card.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-card__header", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "usa-card__heading", children: card.title }) }),
+          card.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-card__body", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: card.description }) }),
+          card.footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-card__footer", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-container usa-footer__return-to-top", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: "#top", children: "Return to top" }) }) : null;
+    const logoEl = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-footer__logo grid-row grid-gap-2", children: [
+      props.logoUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-col-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          className: "usa-footer__logo-img",
+          src: props.logoUrl,
+          alt: props.logoAlt ?? ""
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-col-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-footer__logo-heading", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "a",
+        {
+          className: "usa-footer__logo-anchor",
+          href: safeHref(props.agencyUrl) ?? "/",
+          children: props.agencyName
+        }
+      ) }) })
+    ] });
+    const contactEl = contact.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("address", { className: "usa-footer__address", children: [
+      props.contactHeading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-footer__contact-heading", children: props.contactHeading }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-footer__contact-info grid-row grid-gap", children: contact.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-col-auto", children: item.type === "email" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: `mailto:${item.value}`, children: item.value }) : item.type === "phone" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: `tel:${item.value.replace(/\D/g, "")}`, children: item.value }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: item.value }) }, i)) })
+    ] }) : null;
+    const socialEl = (props.socialLinks ?? []).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-footer__social-links grid-row grid-gap-1", children: (props.socialLinks ?? []).map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-col-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "a",
+      {
+        className: "usa-social-link",
+        href: safeHref(s.href),
+        "aria-label": s.label,
+        rel: "noreferrer",
+        target: "_blank",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            className: "usa-icon",
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            width: "24",
+            height: "24",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: socialIcons[s.platform] ?? "" })
+          }
+        )
+      }
+    ) }, s.platform)) }) : null;
+    if (variant === "slim") {
+      const links2 = groups[0]?.links ?? [];
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("footer", { className: "usa-footer usa-footer--slim", children: [
+        returnToTopEl,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-footer__primary-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid-row grid-gap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tablet:grid-col-fill usa-footer__primary-content", children: logoEl }),
+          links2.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tablet:grid-col-auto usa-footer__primary-content usa-footer__primary-content--collapsible", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": "Footer navigation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "grid-row grid-gap", children: links2.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "li",
+            {
+              className: "mobile-lg:grid-col-auto usa-footer__primary-content",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "a",
+                {
+                  href: safeHref(link.href),
+                  className: "usa-footer__primary-link",
+                  children: link.label
+                }
+              )
+            },
+            i
+          )) }) }) })
+        ] }) }) }),
+        (contact.length > 0 || socialEl) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-footer__secondary-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-row grid-gap", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-footer__contact-links mobile-lg:grid-col-12", children: [
+          socialEl,
+          contactEl
+        ] }) }) }) })
+      ] });
+    }
+    if (variant === "big") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("footer", { className: "usa-footer usa-footer--big", children: [
+        returnToTopEl,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-footer__primary-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-row grid-gap-4", children: groups.map((group, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tablet:grid-col-4", children: [
+          group.heading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-footer__primary-link", children: group.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "usa-list usa-list--unstyled", children: group.links.map((link, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-footer__secondary-link", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: safeHref(link.href), children: link.label }) }, j)) })
+        ] }, i)) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-footer__secondary-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid-row grid-gap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tablet:grid-col-4", children: logoEl }),
+          (contact.length > 0 || socialEl) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tablet:grid-col-8 usa-footer__contact-links", children: [
+            socialEl,
+            contactEl
+          ] })
+        ] }) }) })
+      ] });
+    }
+    const links = groups[0]?.links ?? [];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("footer", { className: "usa-footer", children: [
+      returnToTopEl,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-footer__primary-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "usa-footer__nav", "aria-label": "Footer navigation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "grid-row grid-gap", children: links.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "li",
+        {
+          className: "mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: safeHref(link.href), className: "usa-footer__primary-link", children: link.label })
+        },
+        i
+      )) }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-footer__secondary-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid-row grid-gap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tablet:grid-col-4", children: logoEl }),
+        (contact.length > 0 || socialEl) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tablet:grid-col-8 usa-footer__contact-links", children: [
+          socialEl,
+          contactEl
+        ] })
+      ] }) }) })
+    ] });
+  },
+  // ── Navigation ────────────────────────────────────────────────────────
+  Accordion: ({ props }) => {
+    const items = props.items ?? [];
+    const [openItems, setOpenItems] = (0, import_react.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "usa-accordion__heading", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "usa-accordion__button",
+                "aria-expanded": isOpen,
+                "aria-controls": contentId,
+                id: headingId,
+                onClick: () => toggle(i),
+                children: item.title
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                id: contentId,
+                className: "usa-accordion__content usa-prose",
+                hidden: !isOpen,
+                role: "region",
+                "aria-labelledby": headingId,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: item.content })
+              }
+            )
+          ] }, i);
+        })
+      }
+    );
+  },
+  Pagination: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundPage, setBoundPage] = (0, import_react2.useBoundProp)(
+      props.page,
+      bindings?.page
+    );
+    const [localPage, setLocalPage] = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
+      "nav",
+      {
+        "aria-label": props.ariaLabel ?? "Pagination",
+        className: "usa-pagination",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { className: "usa-pagination__list", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-pagination__item usa-pagination__arrow", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+                  "svg",
+                  {
+                    className: "usa-icon",
+                    "aria-hidden": "true",
+                    role: "img",
+                    viewBox: "0 0 24 24",
+                    width: "24",
+                    height: "24",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-pagination__link-text", children: "Previous" })
+              ]
+            }
+          ) }),
+          range.map(
+            (item, i) => item === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "li",
+              {
+                className: "usa-pagination__item usa-pagination__overflow",
+                role: "presentation",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u2026" })
+              },
+              `ellipsis-${i}`
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "li",
+              {
+                className: "usa-pagination__item usa-pagination__page-no",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-pagination__item usa-pagination__arrow", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-pagination__link-text", children: "Next" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "svg",
+                  {
+                    className: "usa-icon",
+                    "aria-hidden": "true",
+                    role: "img",
+                    viewBox: "0 0 24 24",
+                    width: "24",
+                    height: "24",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `usa-step-indicator${countersClass}${centeredClass}${noLabelsClass}`,
+        "aria-label": "Progress",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+              "li",
+              {
+                className: segClass,
+                "aria-current": isCurrent ? "step" : void 0,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "usa-step-indicator__segment-label", children: [
+                  label,
+                  isComplete && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: "completed" }),
+                  isCurrent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: "in progress" })
+                ] })
+              },
+              i
+            );
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-step-indicator__header", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h4", { className: "usa-step-indicator__heading", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "usa-step-indicator__heading-counter", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: "Step " }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-step-indicator__current-step", children: current }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "usa-step-indicator__total-steps", children: [
+                " ",
+                "of ",
+                steps.length
+              ] })
+            ] }),
+            steps[current - 1] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-step-indicator__heading-text", children: steps[current - 1] })
+          ] }) })
+        ]
+      }
+    );
+  },
+  Breadcrumb: ({ props }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "usa-breadcrumb", "aria-label": "Breadcrumbs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "usa-breadcrumb__list", children: items.map((item, i) => {
+      const isLast = i === items.length - 1;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "li",
+        {
+          className: `usa-breadcrumb__list-item${isLast ? " usa-current" : ""}`,
+          "aria-current": isLast ? "page" : void 0,
+          children: item.href && !isLast ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: safeHref(item.href), className: "usa-breadcrumb__link", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: item.label }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: item.label })
+        },
+        i
+      );
+    }) }) });
+  },
+  Header: ({ props }) => {
+    const [mobileOpen, setMobileOpen] = (0, import_react.useState)(false);
+    const [openDropdown, setOpenDropdown] = (0, import_react.useState)(null);
+    const uid = (0, import_react.useId)();
+    const isExtended = props.variant === "extended";
+    const navItems = props.navItems ?? [];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `usa-overlay${mobileOpen ? " is-visible" : ""}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "header",
+        {
+          className: `usa-header${isExtended ? " usa-header--extended" : " usa-header--basic"}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-nav-container", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-navbar", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-logo", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { className: "usa-logo__text", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { href: safeHref(props.siteUrl) ?? "/", title: "Home", children: [
+                props.logoUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "img",
+                  {
+                    className: "usa-header__logo",
+                    src: props.logoUrl,
+                    alt: props.logoAlt ?? "",
+                    style: {
+                      maxHeight: "2.5rem",
+                      marginRight: "0.5rem",
+                      verticalAlign: "middle"
+                    }
+                  }
+                ),
+                props.siteName
+              ] }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "usa-menu-btn",
+                  onClick: () => setMobileOpen(true),
+                  children: "Menu"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "nav",
+              {
+                "aria-label": "Primary navigation",
+                className: `usa-nav${mobileOpen ? " is-visible" : ""}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "usa-nav__close",
+                      onClick: () => {
+                        setMobileOpen(false);
+                        setOpenDropdown(null);
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "svg",
+                          {
+                            className: "usa-icon",
+                            "aria-hidden": "true",
+                            focusable: false,
+                            role: "img",
+                            viewBox: "0 0 24 24",
+                            width: "24",
+                            height: "24",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { role: "search", className: "usa-search usa-search--small", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "label",
+                      {
+                        className: "usa-sr-only",
+                        htmlFor: `${uid}-header-search`,
+                        children: "Search"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "input",
+                      {
+                        className: "usa-input",
+                        id: `${uid}-header-search`,
+                        type: "search",
+                        name: "search"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "usa-button", type: "submit", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "svg",
+                        {
+                          className: "usa-icon",
+                          "aria-hidden": "true",
+                          role: "img",
+                          viewBox: "0 0 24 24",
+                          width: "24",
+                          height: "24",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: "Search" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+                      "li",
+                      {
+                        className: `usa-nav__primary-item${item.current ? " usa-current" : ""}`,
+                        children: hasDropdown ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { children: item.label })
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "ul",
+                            {
+                              id: dropdownId,
+                              className: "usa-nav__submenu",
+                              hidden: !isOpen,
+                              children: (item.items ?? []).map((sub, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-nav__submenu-item", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: safeHref(sub.href), children: sub.label }) }, j))
+                            }
+                          )
+                        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "a",
+                          {
+                            href: safeHref(item.href),
+                            className: `usa-nav__link${item.current ? " usa-current" : ""}`,
+                            "aria-current": item.current ? "page" : void 0,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: item.label })
+                          }
+                        )
+                      },
+                      i
+                    );
+                  }) })
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+  },
+  SkipNav: ({ props }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": props.ariaLabel ?? "Side navigation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "usa-sidenav", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "usa-sidenav__item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("ul", { className: "usa-sidenav__sublist", children: item.children.map((child, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-sidenav__item", children: /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react.useState)(false);
+    const uid = (0, import_react.useId)();
+    const submenuId = `${uid}-language-submenu`;
+    const languages = props.languages ?? [];
+    const current = props.currentLang ?? "";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": "Language selector", className: "usa-language-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "usa-language__primary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "usa-language__primary-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("ul", { id: submenuId, className: "usa-language__submenu", hidden: !open, children: languages.filter((l) => l.lang !== current).map((lang) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-language__submenu-item", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+      "nav",
+      {
+        "aria-label": props.heading ?? "On this page",
+        className: "usa-in-page-nav",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-in-page-nav__header", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-in-page-nav__title", children: props.heading ?? "On this page" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "usa-in-page-nav__list", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-in-page-nav__item", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("table", { className: tableClass, children: [
+      props.caption && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { children: props.caption }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: col }, col)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: row.map((cell, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: cell }, j)) }, i)) })
+    ] });
+    if (props.scrollable) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("h1", { className: "usa-prose", children: props.text });
+    if (level === "h3") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "usa-prose", children: props.text });
+    if (level === "h4") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "usa-prose", children: props.text });
+    if (level === "h5") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "usa-prose", children: props.text });
+    if (level === "h6") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { className: "usa-prose", children: props.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "usa-prose", children: props.text });
+  },
+  Text: ({ props }) => {
+    if (props.variant === "lead") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-intro", children: props.text });
+    }
+    if (props.variant === "small") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "usa-prose", children: props.text });
+    }
+    if (props.variant === "code") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "usa-prose", children: props.text });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: `usa-alert ${typeClass}${slimClass}${noIconClass}`,
+        role: "alert",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-alert__body", children: [
+          props.heading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "usa-alert__heading", children: props.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+      "section",
+      {
+        className: `usa-site-alert ${typeClass}${slimClass}`,
+        "aria-label": "Site alert",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-alert", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-alert__body", children: [
+          props.heading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "usa-alert__heading", children: props.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-alert__text", children: props.message })
+        ] }) })
+      }
+    );
+  },
+  Tag: ({ props }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `usa-tag${props.big ? " usa-tag--big" : ""}`, children: props.text });
+  },
+  SummaryBox: ({ props }) => {
+    const uid = (0, import_react.useId)();
+    const headingId = `${uid}-summary-heading`;
+    const items = props.items ?? [];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "usa-summary-box",
+        role: "region",
+        "aria-labelledby": headingId,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-summary-box__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "usa-summary-box__heading", id: headingId, children: props.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-summary-box__text", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "usa-list", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-summary-box__list-item", children: item }, i)) }) })
+        ] })
+      }
+    );
+  },
+  ProcessList: ({ props }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "usa-process-list", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "usa-process-list__item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "usa-process-list__heading", children: item.heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "margin-top-05", children: item.content })
+    ] }, i)) });
+  },
+  GovBanner: ({ props }) => {
+    const [expanded, setExpanded] = (0, import_react.useState)(props.expanded ?? false);
+    const tld = props.tld ?? ".gov";
+    const isMil = tld === ".mil";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "section",
+      {
+        className: `usa-banner${expanded ? " usa-banner--expanded" : ""}`,
+        "aria-label": "Official website of the United States government",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-accordion", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: "usa-banner__header", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-banner__inner", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-col-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("rect", { width: "16", height: "11", fill: "#B22234" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { y: "0.846", width: "16", height: "0.846", fill: "white" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { y: "2.539", width: "16", height: "0.846", fill: "white" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { y: "4.231", width: "16", height: "0.846", fill: "white" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { y: "5.923", width: "16", height: "0.846", fill: "white" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { y: "7.615", width: "16", height: "0.846", fill: "white" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { y: "9.307", width: "16", height: "0.846", fill: "white" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "6.4", height: "5.923", fill: "#3C3B6E" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                className: "grid-col-fill tablet:grid-col-auto",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-banner__header-text", children: "An official website of the United States government" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-banner__header-action", children: "Here's how you know" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-banner__button-text", children: "Here's how you know" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "usa-banner__content usa-accordion__content",
+              id: "gov-banner-content",
+              hidden: !expanded,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid-row grid-gap-lg", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-banner__guidance tablet:grid-col-6", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "20", r: "20", fill: "#005ea2" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "path",
+                          {
+                            fill: "white",
+                            d: "M20 9l11 6.5V17H9v-1.5L20 9zM11 19h3v11h-3V19zm7.5 0h3v11h-3V19zm7 0h3v11h-3V19zM9 31h22v2H9V31z"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-media-block__body", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+                      "Official ",
+                      isMil ? ".mil" : ".gov",
+                      " websites use HTTPS"
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+                    "A ",
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "lock" }),
+                    " or ",
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "https://" }),
+                    " ",
+                    "means you've safely connected to the",
+                    " ",
+                    isMil ? ".mil" : ".gov",
+                    " website."
+                  ] }) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-banner__guidance tablet:grid-col-6", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "20", r: "20", fill: "#005ea2" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-media-block__body", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+                      "Secure ",
+                      isMil ? ".mil" : ".gov",
+                      " websites use HTTPS"
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+                    "Share sensitive information only on official, secure websites."
+                  ] }) })
+                ] })
+              ] })
+            }
+          )
+        ] })
+      }
+    );
+  },
+  Identifier: ({ props }) => {
+    const links = props.links ?? [];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "usa-identifier", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "section",
+        {
+          className: "usa-identifier__section usa-identifier__section--masthead",
+          "aria-label": "Agency identifier",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-identifier__container", children: [
+            props.logoUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-identifier__logos", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "a",
+              {
+                href: safeHref(props.agencyUrl) ?? "/",
+                className: "usa-identifier__logo",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "img",
+                  {
+                    className: "usa-identifier__logo-img",
+                    src: props.logoUrl,
+                    alt: props.logoAlt ?? `${props.agencyName} logo`,
+                    role: "img"
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "section",
+              {
+                className: "usa-identifier__identity",
+                "aria-label": "Agency description",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-identifier__identity-domain", children: props.domain }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-identifier__identity-disclaimer", children: props.disclaimer ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    "An official website of the",
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "usa-link", href: safeHref(props.agencyUrl) ?? "/", children: props.agencyName })
+                  ] }) })
+                ]
+              }
+            )
+          ] })
+        }
+      ),
+      links.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "nav",
+        {
+          className: "usa-identifier__section usa-identifier__section--required-links",
+          "aria-label": "Important links",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-identifier__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "usa-identifier__required-links-list", children: links.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-identifier__required-links-item", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "a",
+            {
+              href: safeHref(link.href),
+              className: "usa-identifier__required-link usa-link",
+              children: link.label
+            }
+          ) }, i)) }) })
+        }
+      ),
+      (props.showUsagov ?? true) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "section",
+        {
+          className: "usa-identifier__section usa-identifier__section--usagov",
+          "aria-label": "U.S. government information and services",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-identifier__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-identifier__usagov-description", children: [
+            "Looking for U.S. government information and services?",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("ul", { className: `usa-icon-list${sizeClass}`, children: [
+      props.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-icon-list__item", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("li", { className: "usa-icon-list__item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `usa-icon-list__icon${color ? ` ${color}` : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "svg",
+            {
+              className: "usa-icon",
+              "aria-hidden": "true",
+              role: "img",
+              viewBox: "0 0 24 24",
+              width: "24",
+              height: "24",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: path })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-icon-list__content", children: item.content })
+        ] }, i);
+      })
+    ] });
+  },
+  Collection: ({ props }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "usa-collection", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "usa-collection__item", children: [
+      item.thumbnailUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          className: "usa-collection__thumbnail",
+          src: item.thumbnailUrl,
+          alt: item.thumbnailAlt ?? ""
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-collection__body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "usa-collection__heading", children: item.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "usa-link", href: safeHref(item.href), children: item.heading }) : item.heading }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-collection__description", children: item.description }),
+        (item.date || item.tags && item.tags.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { className: "usa-collection__meta", "aria-label": "Topics", children: [
+          item.date && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-collection__meta-item usa-collection__calendar-date", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("time", { dateTime: item.date, children: item.dateLabel ?? item.date }) }),
+          (item.tags ?? []).map((tag) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-collection__meta-item usa-tag", children: tag }, tag))
+        ] })
+      ] })
+    ] }, i)) });
+  },
+  Tooltip: ({ props }) => {
+    const [visible, setVisible] = (0, import_react.useState)(false);
+    const uid = (0, import_react.useId)();
+    const tooltipId = `${uid}-tooltip`;
+    const position = props.position ?? "top";
+    const positionClass = `usa-tooltip__body--${position}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              tabIndex: 0,
+              className: "usa-tooltip__trigger",
+              "aria-describedby": tooltipId,
+              children: props.label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+      "ul",
+      {
+        className: `usa-button-group${props.segmented ? " usa-button-group--segmented" : ""}`,
+        children: buttons.map((btn) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "usa-button-group__item", children: /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.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 } = (0, import_react2.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__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.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 } = (0, import_react2.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__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.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 } = (0, import_react2.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__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("option", { value: "", disabled: true, children: props.placeholder }),
+                options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+              ]
+            }
+          )
+        ]
+      }
+    );
+  },
+  Checkbox: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundChecked, setBoundChecked] = (0, import_react2.useBoundProp)(
+      props.checked,
+      bindings?.checked
+    );
+    const [localChecked, setLocalChecked] = (0, import_react.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 } = (0, import_react2.useFieldValidation)(
+      bindings?.checked ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const inputId = props.name;
+    const hintId = props.hint ? `${inputId}-hint` : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `usa-form-group${errors.length > 0 ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              className: `usa-checkbox${props.tile ? " usa-checkbox--tile" : ""}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-checkbox__label", htmlFor: inputId, children: [
+                  props.label,
+                  props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-checkbox__label-description", id: hintId, children: props.hint })
+                ] })
+              ]
+            }
+          ),
+          errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-error-message", role: "alert", children: errors[0] })
+        ]
+      }
+    );
+  },
+  CheckboxGroup: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValues, setBoundValues] = (0, import_react2.useBoundProp)(
+      props.values,
+      bindings?.values
+    );
+    const [localValues, setLocalValues] = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "usa-fieldset", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { className: "usa-legend", children: props.legend }),
+      options.map((opt) => {
+        const optId = `${props.name}-${opt.value}`;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: `usa-checkbox${props.tile ? " usa-checkbox--tile" : ""}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-checkbox__label", htmlFor: optId, children: [
+                opt.label,
+                opt.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-checkbox__label-description", children: opt.hint })
+              ] })
+            ]
+          },
+          opt.value
+        );
+      })
+    ] });
+  },
+  Radio: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.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 } = (0, import_react2.useFieldValidation)(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    const options = props.options ?? [];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "fieldset",
+      {
+        className: `usa-fieldset${errors.length > 0 ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { className: "usa-legend", children: props.legend }),
+          errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-error-message", role: "alert", children: errors[0] }),
+          options.map((opt) => {
+            const optId = `${props.name}-${opt.value}`;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                className: `usa-radio${props.tile ? " usa-radio--tile" : ""}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-radio__label", htmlFor: optId, children: [
+                    opt.label,
+                    opt.hint && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-form-group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: inputId, children: [
+        props.label,
+        props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+      ] }),
+      props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint }),
+      /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.useState)("");
+    const uid = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)("div", { role: "search", className: `usa-search${sizeClass}`, children: [
+      props.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "usa-sr-only", htmlFor: fieldId, children: props.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          className: "usa-button",
+          type: "submit",
+          onClick: () => emit("submit"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "svg",
+              {
+                className: "usa-icon",
+                "aria-hidden": "true",
+                role: "img",
+                viewBox: "0 0 24 24",
+                width: "24",
+                height: "24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-search__submit-text", children: "Search" })
+          ]
+        }
+      )
+    ] });
+  },
+  RangeInput: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-form-group", children: [
+      props.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "usa-label", htmlFor: inputId, children: props.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react2.useBoundProp)(
+      props.monthValue,
+      bindings?.monthValue
+    );
+    const [boundDay, setBoundDay] = (0, import_react2.useBoundProp)(
+      props.dayValue,
+      bindings?.dayValue
+    );
+    const [boundYear, setBoundYear] = (0, import_react2.useBoundProp)(
+      props.yearValue,
+      bindings?.yearValue
+    );
+    const [localMonth, setLocalMonth] = (0, import_react.useState)(props.monthValue ?? "");
+    const [localDay, setLocalDay] = (0, import_react.useState)(props.dayValue ?? "");
+    const [localYear, setLocalYear] = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "usa-fieldset", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { className: "usa-legend", children: props.label }),
+      props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-memorable-date", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-form-group usa-form-group--month", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "usa-label", htmlFor: `${props.name}-month`, children: "Month" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-form-group usa-form-group--day", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "usa-label", htmlFor: `${props.name}-day`, children: "Day" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-form-group usa-form-group--year", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "usa-label", htmlFor: `${props.name}-year`, children: "Year" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react2.useBoundProp)(
+      props.startValue,
+      bindings?.startValue
+    );
+    const [boundEnd, setBoundEnd] = (0, import_react2.useBoundProp)(
+      props.endValue,
+      bindings?.endValue
+    );
+    const [localStart, setLocalStart] = (0, import_react.useState)(props.startValue ?? "");
+    const [localEnd, setLocalEnd] = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-date-range-picker", children: [
+      props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-date-range-picker__range-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-form-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: props.startName, children: [
+          props.startLabel,
+          props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-date-picker", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-date-range-picker__range-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-form-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: props.endName, children: [
+          props.endLabel,
+          props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-date-picker", children: /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.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 } = (0, import_react2.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__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-input-mask", "data-mask": pattern, children: /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.useState)("");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const [visible, setVisible] = (0, import_react.useState)(false);
+    const validateOn = props.validateOn ?? "blur";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = (0, import_react2.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__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-input-group", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-input-group__append", children: /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.useState)("");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const [query, setQuery] = (0, import_react.useState)("");
+    const [open, setOpen] = (0, import_react.useState)(false);
+    const validateOn = props.validateOn ?? "change";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = (0, import_react2.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__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: `${inputId}-combo`, children: [
+            props.label,
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              className: `usa-combo-box${value ? " usa-combo-box--pristine" : ""}`,
+              style: { position: "relative" },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: props.placeholder }),
+                      allOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-combo-box__toggle-list__wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.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 } = (0, import_react2.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__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint ?? "mm/dd/yyyy" }),
+          hasError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-date-picker", children: /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-form-group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: inputId, children: [
+        props.label,
+        props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+      ] }),
+      props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-time-picker", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "- Select -" }),
+            options.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: t, children: formatDisplay(t) }, t))
+          ]
+        }
+      ) })
+    ] });
+  },
+  CharacterCount: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.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 } = (0, import_react2.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__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `usa-form-group usa-character-count${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          isOver && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-error-message", id: errorId, role: "alert", children: `${Math.abs(remaining)} characters over limit` }),
+          !isOver && errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          props.multiline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { ...sharedProps, rows: props.rows ?? 4 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...sharedProps, type: "text" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: path })
+      }
+    );
+  },
+  InputGroup: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.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 } = (0, import_react2.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__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `usa-form-group${hasError ? " usa-form-group--error" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "usa-label", htmlFor: inputId, children: [
+            props.label,
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-sr-only", children: " (required)" })
+          ] }),
+          props.hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hint", id: hintId, children: props.hint }),
+          hasError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-error-message", id: errorId, role: "alert", children: errors[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              className: `usa-input-group${hasError ? " usa-input-group--error" : ""}`,
+              children: [
+                props.prefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-input-prefix", "aria-hidden": "true", children: props.prefix }),
+                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("ol", { className, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: item }, i)) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: item }, i)) });
+  },
+  ValidationChecklist: ({
+    props
+  }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      props.heading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-prose", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: props.heading }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "usa-checklist", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("section", { className: `usa-section${variantClass}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid-container", children: [
+      props.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "usa-prose", children: props.title }),
+      props.text && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "usa-prose", children: props.text }),
+      children
+    ] }) });
+  },
+  Prose: ({ props, children }) => {
+    const element = props.element ?? "div";
+    if (element === "article")
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("article", { className: "usa-prose", children });
+    if (element === "section")
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { children });
+    if (element === "main")
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children });
+  },
+  Hero: ({ props }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "section",
+      {
+        className: "usa-hero",
+        "aria-label": props.ariaLabel ?? "Introduction",
+        style: props.backgroundUrl ? { backgroundImage: `url(${safeCssUrl(props.backgroundUrl)})` } : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-hero__callout", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", { className: "usa-hero__heading", children: [
+            props.eyebrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "usa-hero__heading--alt", children: props.eyebrow }),
+            props.heading
+          ] }),
+          props.body && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: props.body })
+        ] }) })
+      }
+    );
+  },
+  GraphicList: ({ props }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: "usa-graphic-list usa-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid-container", children: [
+      props.heading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "usa-graphic-list__heading", children: props.heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-graphic-list__row grid-row grid-gap", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-media-block tablet:grid-col", children: [
+        item.imageUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            className: "usa-media-block__img",
+            src: item.imageUrl,
+            alt: item.imageAlt ?? ""
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-media-block__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "usa-graphic-list__heading", children: item.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: item.content })
+        ] })
+      ] }, i)) })
+    ] }) });
+  },
+  EmbedContainer: ({
+    props
+  }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "usa-embed-container", children: /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react2.useStateBinding)(props.openPath ?? "");
+    const isOpen = open ?? false;
+    const uid = (0, import_react.useId)();
+    const modalId = `${uid}-modal`;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "usa-modal-overlay",
+        "aria-controls": modalId,
+        "data-open-modal": true,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) setOpen(false);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: `usa-modal${props.large ? " usa-modal--lg" : ""}`,
+            id: modalId,
+            "aria-labelledby": `${modalId}-heading`,
+            "aria-describedby": `${modalId}-description`,
+            role: "dialog",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-modal__content", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-modal__main", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "usa-modal__heading", id: `${modalId}-heading`, children: props.heading }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "usa-prose", id: `${modalId}-description`, children: [
+                  props.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: props.description }),
+                  children
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "usa-button usa-modal__close",
+                  "aria-label": "Close this window",
+                  onClick: () => setOpen(false),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "svg",
+                    {
+                      className: "usa-icon",
+                      "aria-hidden": "true",
+                      focusable: "false",
+                      role: "img",
+                      viewBox: "0 0 24 24",
+                      width: "24",
+                      height: "24",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.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" })
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        )
+      }
+    ) });
+  }
+};
+
+// src/catalog.ts
+var import_zod = require("zod");
+var validationCheckSchema = import_zod.z.array(
+  import_zod.z.object({
+    type: import_zod.z.string(),
+    message: import_zod.z.string(),
+    args: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()).optional()
+  })
+).nullable();
+var validateOnSchema = import_zod.z.enum(["change", "blur", "submit"]).nullable();
+var uswdsComponentDefinitions = {
+  // ==========================================================================
+  // Layout Components
+  // ==========================================================================
+  Grid: {
+    props: import_zod.z.object({
+      columns: import_zod.z.number().nullable(),
+      gap: import_zod.z.enum(["sm", "md", "lg"]).nullable()
+    }),
+    slots: ["default"],
+    description: "USWDS grid row with equal-width columns. columns: 1-12. gap: spacing between columns.",
+    example: { columns: 3, gap: "md" }
+  },
+  CardGroup: {
+    props: import_zod.z.object({
+      cards: import_zod.z.array(
+        import_zod.z.object({
+          title: import_zod.z.string().nullable(),
+          description: import_zod.z.string().nullable(),
+          mediaUrl: import_zod.z.string().nullable(),
+          mediaAlt: import_zod.z.string().nullable(),
+          footer: import_zod.z.string().nullable()
+        })
+      ),
+      flag: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS group of cards in a responsive grid. cards: [{title, description, mediaUrl?, mediaAlt?, footer?}]. flag for horizontal card layout.",
+    example: {
+      cards: [
+        {
+          title: "Card One",
+          description: "Description one.",
+          mediaUrl: null,
+          mediaAlt: null,
+          footer: null
+        },
+        {
+          title: "Card Two",
+          description: "Description two.",
+          mediaUrl: null,
+          mediaAlt: null,
+          footer: null
+        }
+      ]
+    }
+  },
+  Card: {
+    props: import_zod.z.object({
+      title: import_zod.z.string().nullable(),
+      description: import_zod.z.string().nullable(),
+      headerFirst: import_zod.z.boolean().nullable(),
+      mediaUrl: import_zod.z.string().nullable(),
+      mediaAlt: import_zod.z.string().nullable(),
+      flag: import_zod.z.boolean().nullable()
+    }),
+    slots: ["default"],
+    description: "USWDS card container. Use title/description for header, mediaUrl for an image, flag for horizontal layout.",
+    example: { title: "Card Title", description: "Supporting text." }
+  },
+  Divider: {
+    props: import_zod.z.object({}),
+    description: "USWDS horizontal rule divider (usa-divider)."
+  },
+  Footer: {
+    props: import_zod.z.object({
+      variant: import_zod.z.enum(["slim", "medium", "big"]).nullable(),
+      agencyName: import_zod.z.string(),
+      agencyUrl: import_zod.z.string().nullable(),
+      logoUrl: import_zod.z.string().nullable(),
+      logoAlt: import_zod.z.string().nullable(),
+      navGroups: import_zod.z.array(
+        import_zod.z.object({
+          heading: import_zod.z.string().nullable(),
+          links: import_zod.z.array(import_zod.z.object({ label: import_zod.z.string(), href: import_zod.z.string() }))
+        })
+      ).nullable(),
+      contactHeading: import_zod.z.string().nullable(),
+      contactInfo: import_zod.z.array(
+        import_zod.z.object({
+          type: import_zod.z.enum(["address", "phone", "email"]),
+          value: import_zod.z.string()
+        })
+      ).nullable(),
+      socialLinks: import_zod.z.array(
+        import_zod.z.object({
+          platform: import_zod.z.enum([
+            "facebook",
+            "twitter",
+            "youtube",
+            "instagram",
+            "rss",
+            "linkedin",
+            "github"
+          ]),
+          href: import_zod.z.string(),
+          label: import_zod.z.string()
+        })
+      ).nullable(),
+      returnToTop: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS site footer. variant: slim (compact), medium (default), big (multi-column nav). navGroups: [{heading?, links: [{label, href}]}]. For big variant, each group becomes a column.",
+    example: {
+      variant: "medium",
+      agencyName: "Agency Name",
+      agencyUrl: "/",
+      logoUrl: null,
+      logoAlt: null,
+      navGroups: [
+        {
+          heading: null,
+          links: [
+            { label: "Home", href: "/" },
+            { label: "About", href: "/about" },
+            { label: "Contact", href: "/contact" }
+          ]
+        }
+      ],
+      contactHeading: "Contact",
+      contactInfo: [
+        { type: "address", value: "1800 F Street NW, Washington, DC 20405" },
+        { type: "phone", value: "1-800-FED-INFO" },
+        { type: "email", value: "info@agency.gov" }
+      ],
+      socialLinks: null,
+      returnToTop: true
+    }
+  },
+  // ==========================================================================
+  // Navigation Components
+  // ==========================================================================
+  Accordion: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          title: import_zod.z.string(),
+          content: import_zod.z.string(),
+          expanded: import_zod.z.boolean().nullable()
+        })
+      ),
+      bordered: import_zod.z.boolean().nullable(),
+      multiselectable: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS accordion. Items as [{title, content, expanded?}]. bordered adds border styling. multiselectable allows multiple open panels.",
+    example: {
+      items: [
+        { title: "First item", content: "Content for first item." },
+        { title: "Second item", content: "Content for second item." }
+      ]
+    }
+  },
+  Pagination: {
+    props: import_zod.z.object({
+      totalPages: import_zod.z.number(),
+      page: import_zod.z.number().nullable(),
+      ariaLabel: import_zod.z.string().nullable()
+    }),
+    events: ["change"],
+    description: "USWDS pagination navigation. Use { $bindState } on page for current page number.",
+    example: { totalPages: 10, page: 1 }
+  },
+  StepIndicator: {
+    props: import_zod.z.object({
+      steps: import_zod.z.array(import_zod.z.string()),
+      currentStep: import_zod.z.number(),
+      counters: import_zod.z.enum(["default", "small"]).nullable(),
+      centered: import_zod.z.boolean().nullable(),
+      noLabels: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS step indicator for multi-step forms. steps: array of step labels. currentStep: 1-based index of active step.",
+    example: {
+      steps: ["Personal info", "Household", "Review"],
+      currentStep: 1
+    }
+  },
+  Header: {
+    props: import_zod.z.object({
+      variant: import_zod.z.enum(["basic", "extended"]).nullable(),
+      siteName: import_zod.z.string(),
+      siteUrl: import_zod.z.string().nullable(),
+      logoUrl: import_zod.z.string().nullable(),
+      logoAlt: import_zod.z.string().nullable(),
+      navItems: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          href: import_zod.z.string(),
+          current: import_zod.z.boolean().nullable(),
+          items: import_zod.z.array(
+            import_zod.z.object({
+              label: import_zod.z.string(),
+              href: import_zod.z.string()
+            })
+          ).nullable()
+        })
+      ).nullable(),
+      showSearch: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS site header with primary navigation. variant: basic (default) or extended (taller with logo). navItems: [{label, href, current?, items?}] \u2014 items creates a dropdown. showSearch adds a search bar.",
+    example: {
+      variant: "basic",
+      siteName: "Agency Name",
+      siteUrl: "/",
+      logoUrl: null,
+      logoAlt: null,
+      navItems: [
+        { label: "Home", href: "/", current: true, items: null },
+        { label: "About", href: "/about", current: false, items: null },
+        {
+          label: "Topics",
+          href: "/topics",
+          current: false,
+          items: [
+            { label: "Topic One", href: "/topics/one" },
+            { label: "Topic Two", href: "/topics/two" }
+          ]
+        }
+      ],
+      showSearch: false
+    }
+  },
+  SkipNav: {
+    props: import_zod.z.object({
+      href: import_zod.z.string().nullable(),
+      label: import_zod.z.string().nullable()
+    }),
+    description: "USWDS skip navigation link. Renders an off-screen anchor that appears on focus, letting keyboard users jump past repeated navigation. href defaults to '#main-content'.",
+    example: { href: "#main-content", label: "Skip to main content" }
+  },
+  SideNav: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          href: import_zod.z.string(),
+          current: import_zod.z.boolean().nullable(),
+          children: import_zod.z.array(
+            import_zod.z.object({
+              label: import_zod.z.string(),
+              href: import_zod.z.string(),
+              current: import_zod.z.boolean().nullable()
+            })
+          ).nullable()
+        })
+      ),
+      ariaLabel: import_zod.z.string().nullable()
+    }),
+    description: "USWDS side navigation. items: [{label, href, current?, children?}]. Mark the active page with current: true.",
+    example: {
+      ariaLabel: "Side navigation",
+      items: [
+        {
+          label: "Overview",
+          href: "/overview",
+          current: false,
+          children: null
+        },
+        {
+          label: "Getting started",
+          href: "/getting-started",
+          current: true,
+          children: [
+            {
+              label: "Installation",
+              href: "/getting-started/install",
+              current: false
+            },
+            {
+              label: "Configuration",
+              href: "/getting-started/config",
+              current: false
+            }
+          ]
+        }
+      ]
+    }
+  },
+  LanguageSelector: {
+    props: import_zod.z.object({
+      languages: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          href: import_zod.z.string(),
+          lang: import_zod.z.string(),
+          localLabel: import_zod.z.string().nullable()
+        })
+      ),
+      currentLang: import_zod.z.string().nullable()
+    }),
+    description: "USWDS language selector. languages: [{label, href, lang, localLabel?}]. currentLang: BCP-47 code of the active language (e.g. 'en').",
+    example: {
+      currentLang: "en",
+      languages: [
+        { label: "English", href: "/en", lang: "en", localLabel: null },
+        { label: "Spanish", href: "/es", lang: "es", localLabel: "Espa\xF1ol" },
+        { label: "French", href: "/fr", lang: "fr", localLabel: "Fran\xE7ais" }
+      ]
+    }
+  },
+  Link: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      href: import_zod.z.string(),
+      external: import_zod.z.boolean().nullable(),
+      variant: import_zod.z.enum(["default", "nav"]).nullable()
+    }),
+    events: ["press"],
+    description: "USWDS anchor link. external adds an external-link indicator. variant: default or nav (for navigation contexts).",
+    example: { label: "Learn more", href: "/about" }
+  },
+  InPageNavigation: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          href: import_zod.z.string()
+        })
+      ),
+      heading: import_zod.z.string().nullable()
+    }),
+    description: "USWDS in-page navigation with jump links to sections. items: [{label, href}] where href is an anchor like '#section-1'.",
+    example: {
+      heading: "On this page",
+      items: [
+        { label: "Introduction", href: "#introduction" },
+        { label: "Requirements", href: "#requirements" },
+        { label: "How to apply", href: "#how-to-apply" }
+      ]
+    }
+  },
+  Breadcrumb: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          href: import_zod.z.string().nullable()
+        })
+      )
+    }),
+    description: "USWDS breadcrumb navigation. items: array of {label, href?}. Last item is current page (no link).",
+    example: {
+      items: [
+        { label: "Home", href: "/" },
+        { label: "Components", href: "/components" },
+        { label: "Breadcrumb", href: null }
+      ]
+    }
+  },
+  // ==========================================================================
+  // Data Display Components
+  // ==========================================================================
+  Identifier: {
+    props: import_zod.z.object({
+      domain: import_zod.z.string(),
+      agencyName: import_zod.z.string(),
+      agencyUrl: import_zod.z.string().nullable(),
+      logoUrl: import_zod.z.string().nullable(),
+      logoAlt: import_zod.z.string().nullable(),
+      disclaimer: import_zod.z.string().nullable(),
+      links: import_zod.z.array(import_zod.z.object({ label: import_zod.z.string(), href: import_zod.z.string() })).nullable(),
+      showUsagov: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS agency identifier section. Shows domain, agency name, logo, required links, and USA.gov footer. Place at the bottom of .gov pages.",
+    example: {
+      domain: "agency.gov",
+      agencyName: "U.S. Department of Example",
+      agencyUrl: "/",
+      logoUrl: null,
+      logoAlt: null,
+      disclaimer: null,
+      links: [
+        { label: "About agency.gov", href: "/about" },
+        { label: "Accessibility statement", href: "/accessibility" },
+        { label: "Privacy policy", href: "/privacy" },
+        { label: "No FEAR Act data", href: "/no-fear" },
+        { label: "Office of the Inspector General", href: "/oig" },
+        { label: "Performance reports", href: "/performance" },
+        { label: "FOIA requests", href: "/foia" }
+      ],
+      showUsagov: true
+    }
+  },
+  GovBanner: {
+    props: import_zod.z.object({
+      tld: import_zod.z.enum([".gov", ".mil"]).nullable(),
+      expanded: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS government site banner ('An official website of the United States government'). tld: '.gov' (default) or '.mil'. expanded: show expanded explanation by default.",
+    example: { tld: ".gov" }
+  },
+  Collection: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          heading: import_zod.z.string(),
+          href: import_zod.z.string().nullable(),
+          description: import_zod.z.string().nullable(),
+          date: import_zod.z.string().nullable(),
+          dateLabel: import_zod.z.string().nullable(),
+          tags: import_zod.z.array(import_zod.z.string()).nullable(),
+          thumbnailUrl: import_zod.z.string().nullable(),
+          thumbnailAlt: import_zod.z.string().nullable()
+        })
+      )
+    }),
+    description: "USWDS collection list of content items. items: [{heading, href?, description?, date?, dateLabel?, tags?, thumbnailUrl?, thumbnailAlt?}].",
+    example: {
+      items: [
+        {
+          heading: "Article Title",
+          href: "/articles/1",
+          description: "A short description of the article.",
+          date: "2024-01-15",
+          dateLabel: "January 15, 2024",
+          tags: ["Policy", "Health"],
+          thumbnailUrl: null,
+          thumbnailAlt: null
+        }
+      ]
+    }
+  },
+  IconList: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          icon: import_zod.z.string(),
+          content: import_zod.z.string(),
+          color: import_zod.z.enum(["default", "success", "warning", "error", "info"]).nullable()
+        })
+      ),
+      title: import_zod.z.string().nullable(),
+      size: import_zod.z.enum(["sm", "lg", "xl", "2xl", "3xl"]).nullable()
+    }),
+    description: "USWDS icon list. items: [{icon, content, color?}]. icon is a USWDS icon name (e.g. 'check_circle', 'cancel', 'info'). size controls icon size.",
+    example: {
+      title: "Requirements",
+      items: [
+        {
+          icon: "check_circle",
+          content: "Requirement one is met.",
+          color: "success"
+        },
+        {
+          icon: "check_circle",
+          content: "Requirement two is met.",
+          color: "success"
+        },
+        {
+          icon: "cancel",
+          content: "Requirement three is not met.",
+          color: "error"
+        }
+      ]
+    }
+  },
+  Tooltip: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      content: import_zod.z.string(),
+      position: import_zod.z.enum(["top", "bottom", "left", "right"]).nullable()
+    }),
+    description: "USWDS tooltip shown on hover. label: the visible trigger text. content: tooltip text. position: top (default), bottom, left, right.",
+    example: {
+      label: "Hover me",
+      content: "This is a tooltip",
+      position: "top"
+    }
+  },
+  Table: {
+    props: import_zod.z.object({
+      columns: import_zod.z.array(import_zod.z.string()),
+      rows: import_zod.z.array(import_zod.z.array(import_zod.z.string())),
+      caption: import_zod.z.string().nullable(),
+      borderless: import_zod.z.boolean().nullable(),
+      striped: import_zod.z.boolean().nullable(),
+      compact: import_zod.z.boolean().nullable(),
+      scrollable: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS data table. columns: header labels. rows: 2D array of cell strings. borderless/striped/compact for styling variants.",
+    example: {
+      columns: ["Name", "Role", "Status"],
+      rows: [
+        ["Alice", "Admin", "Active"],
+        ["Bob", "User", "Inactive"]
+      ]
+    }
+  },
+  Heading: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      level: import_zod.z.enum(["h1", "h2", "h3", "h4", "h5", "h6"]).nullable()
+    }),
+    description: "USWDS heading text (h1\u2013h6) with usa-prose styling.",
+    example: { text: "Page Title", level: "h1" }
+  },
+  Text: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      variant: import_zod.z.enum(["body", "lead", "small", "code"]).nullable()
+    }),
+    description: "USWDS paragraph text. variant: body (default), lead, small, code.",
+    example: { text: "Supporting paragraph text." }
+  },
+  Alert: {
+    props: import_zod.z.object({
+      heading: import_zod.z.string().nullable(),
+      message: import_zod.z.string(),
+      type: import_zod.z.enum(["info", "success", "warning", "error", "emergency"]).nullable(),
+      slim: import_zod.z.boolean().nullable(),
+      noIcon: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS alert banner. type: info (default), success, warning, error, emergency. slim for compact variant.",
+    example: {
+      heading: "Success",
+      message: "Your form has been submitted.",
+      type: "success"
+    }
+  },
+  SiteAlert: {
+    props: import_zod.z.object({
+      heading: import_zod.z.string().nullable(),
+      message: import_zod.z.string(),
+      type: import_zod.z.enum(["info", "emergency"]).nullable(),
+      slim: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS site-wide alert banner for important announcements. type: info (default) or emergency.",
+    example: {
+      heading: "Official website of the United States government",
+      message: "Here's how you know this is a government site.",
+      type: "info"
+    }
+  },
+  Tag: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      big: import_zod.z.boolean().nullable()
+    }),
+    description: "USWDS tag/label badge. big for larger variant.",
+    example: { text: "New" }
+  },
+  SummaryBox: {
+    props: import_zod.z.object({
+      heading: import_zod.z.string(),
+      items: import_zod.z.array(import_zod.z.string())
+    }),
+    description: "USWDS summary box with a heading and bullet list of key information.",
+    example: {
+      heading: "Key information",
+      items: ["Item one", "Item two", "Item three"]
+    }
+  },
+  ProcessList: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          heading: import_zod.z.string(),
+          content: import_zod.z.string()
+        })
+      )
+    }),
+    description: "USWDS numbered process list for step-by-step instructions. items: [{heading, content}].",
+    example: {
+      items: [
+        { heading: "Apply", content: "Submit your application online." },
+        { heading: "Review", content: "We review your application." },
+        { heading: "Approval", content: "Receive your decision letter." }
+      ]
+    }
+  },
+  // ==========================================================================
+  // Form Input Components
+  // ==========================================================================
+  Button: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      variant: import_zod.z.enum([
+        "default",
+        "secondary",
+        "accent-cool",
+        "accent-warm",
+        "base",
+        "outline",
+        "outline-inverse",
+        "big",
+        "unstyled"
+      ]).nullable(),
+      disabled: import_zod.z.boolean().nullable(),
+      type: import_zod.z.enum(["button", "submit", "reset"]).nullable()
+    }),
+    events: ["press"],
+    description: "USWDS button. variant: default (primary), secondary, accent-cool, accent-warm, base, outline, outline-inverse, big, unstyled.",
+    example: { label: "Submit", variant: "default" }
+  },
+  ButtonGroup: {
+    props: import_zod.z.object({
+      buttons: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          value: import_zod.z.string(),
+          variant: import_zod.z.enum(["default", "secondary", "outline"]).nullable()
+        })
+      ),
+      segmented: import_zod.z.boolean().nullable()
+    }),
+    events: ["press"],
+    description: "USWDS button group. buttons: [{label, value, variant?}]. segmented renders as a connected group.",
+    example: {
+      buttons: [
+        { label: "Back", value: "back", variant: "outline" },
+        { label: "Continue", value: "continue", variant: "default" }
+      ]
+    }
+  },
+  Input: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      type: import_zod.z.enum(["text", "email", "password", "number", "search", "tel", "url"]).nullable(),
+      placeholder: import_zod.z.string().nullable(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      disabled: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["submit", "focus", "blur"],
+    description: "USWDS text input. Use { $bindState } on value for two-way binding. hint adds helper text below label. Use checks for validation.",
+    example: {
+      label: "Email address",
+      name: "email",
+      type: "email",
+      hint: "e.g. name@example.gov"
+    }
+  },
+  Textarea: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      placeholder: import_zod.z.string().nullable(),
+      hint: import_zod.z.string().nullable(),
+      rows: import_zod.z.number().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    description: "USWDS multi-line textarea. Use { $bindState } on value for binding. hint adds helper text below label.",
+    example: { label: "Message", name: "message", rows: 4 }
+  },
+  Select: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      options: import_zod.z.array(
+        import_zod.z.union([
+          import_zod.z.string(),
+          import_zod.z.object({ label: import_zod.z.string(), value: import_zod.z.string() })
+        ])
+      ),
+      placeholder: import_zod.z.string().nullable(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change"],
+    description: "USWDS select dropdown. options: array of strings or {label, value} objects. Use { $bindState } on value for binding.",
+    example: {
+      label: "State",
+      name: "state",
+      options: ["Alabama", "Alaska", "Arizona"]
+    }
+  },
+  Checkbox: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      checked: import_zod.z.boolean().nullable(),
+      tile: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change"],
+    description: "USWDS checkbox. Use { $bindState } on checked for binding. tile renders as a large tile variant.",
+    example: { label: "I agree to the terms", name: "terms" }
+  },
+  CheckboxGroup: {
+    props: import_zod.z.object({
+      legend: import_zod.z.string(),
+      name: import_zod.z.string(),
+      options: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          value: import_zod.z.string(),
+          hint: import_zod.z.string().nullable()
+        })
+      ),
+      tile: import_zod.z.boolean().nullable(),
+      values: import_zod.z.array(import_zod.z.string()).nullable()
+    }),
+    events: ["change"],
+    description: "USWDS group of checkboxes in a fieldset. Use { $bindState } on values for selected values array.",
+    example: {
+      legend: "Select all that apply",
+      name: "interests",
+      options: [
+        { label: "Technology", value: "tech", hint: null },
+        { label: "Science", value: "science", hint: null }
+      ]
+    }
+  },
+  Radio: {
+    props: import_zod.z.object({
+      legend: import_zod.z.string(),
+      name: import_zod.z.string(),
+      options: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          value: import_zod.z.string(),
+          hint: import_zod.z.string().nullable()
+        })
+      ),
+      tile: import_zod.z.boolean().nullable(),
+      value: import_zod.z.string().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change"],
+    description: "USWDS radio button group. Use { $bindState } on value for binding. tile renders as tile variant.",
+    example: {
+      legend: "Select an option",
+      name: "option",
+      options: [
+        { label: "Yes", value: "yes", hint: null },
+        { label: "No", value: "no", hint: null }
+      ]
+    }
+  },
+  FileInput: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      accept: import_zod.z.string().nullable(),
+      multiple: import_zod.z.boolean().nullable(),
+      required: import_zod.z.boolean().nullable()
+    }),
+    events: ["change"],
+    description: "USWDS file input. accept: MIME types (e.g. '.pdf,.doc'). multiple allows selecting multiple files.",
+    example: {
+      label: "Upload document",
+      name: "document",
+      hint: "Accepted formats: PDF, DOC",
+      accept: ".pdf,.doc,.docx"
+    }
+  },
+  Search: {
+    props: import_zod.z.object({
+      label: import_zod.z.string().nullable(),
+      placeholder: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      size: import_zod.z.enum(["small", "medium", "big"]).nullable()
+    }),
+    events: ["submit", "change"],
+    description: "USWDS search bar. Use { $bindState } on value for the input value. size: small, medium (default), big.",
+    example: { placeholder: "Search...", size: "medium" }
+  },
+  RangeInput: {
+    props: import_zod.z.object({
+      label: import_zod.z.string().nullable(),
+      name: import_zod.z.string(),
+      min: import_zod.z.number().nullable(),
+      max: import_zod.z.number().nullable(),
+      step: import_zod.z.number().nullable(),
+      value: import_zod.z.number().nullable()
+    }),
+    events: ["change"],
+    description: "USWDS range slider input. Use { $bindState } on value for binding.",
+    example: { label: "Select a value", name: "range", min: 0, max: 100 }
+  },
+  DateInputGroup: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      monthValue: import_zod.z.string().nullable(),
+      dayValue: import_zod.z.string().nullable(),
+      yearValue: import_zod.z.string().nullable()
+    }),
+    events: ["change"],
+    description: "USWDS three-field date input (separate month, day, year inputs). Use { $bindState } on monthValue/dayValue/yearValue for individual field bindings.",
+    example: {
+      label: "Date of birth",
+      name: "dob",
+      hint: "For example: January 19 2000"
+    }
+  },
+  DateRangePicker: {
+    props: import_zod.z.object({
+      startLabel: import_zod.z.string(),
+      endLabel: import_zod.z.string(),
+      startName: import_zod.z.string(),
+      endName: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      startValue: import_zod.z.string().nullable(),
+      endValue: import_zod.z.string().nullable(),
+      minDate: import_zod.z.string().nullable(),
+      maxDate: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable()
+    }),
+    events: ["change"],
+    description: "USWDS date range picker with start and end date inputs. Values are ISO date strings (YYYY-MM-DD). Use { $bindState } on startValue/endValue.",
+    example: {
+      startLabel: "Start date",
+      endLabel: "End date",
+      startName: "start_date",
+      endName: "end_date",
+      hint: "mm/dd/yyyy"
+    }
+  },
+  InputMask: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      preset: import_zod.z.enum(["phone", "zip", "zip+4", "ssn", "custom"]).nullable(),
+      pattern: import_zod.z.string().nullable(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change", "blur"],
+    description: "USWDS input with automatic formatting mask. preset: phone '(___) ___-____', zip '_____', zip+4 '_____-____', ssn '___-__-____'. Or supply a custom pattern where '_' = digit.",
+    example: {
+      label: "Phone number",
+      name: "phone",
+      preset: "phone",
+      hint: "(___) ___-____"
+    }
+  },
+  Password: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change", "blur"],
+    description: "USWDS password input with show/hide toggle button. Use { $bindState } on value for binding. Supports validation checks.",
+    example: {
+      label: "Password",
+      name: "password",
+      hint: "Must be at least 12 characters"
+    }
+  },
+  ComboBox: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      options: import_zod.z.array(
+        import_zod.z.union([
+          import_zod.z.string(),
+          import_zod.z.object({ label: import_zod.z.string(), value: import_zod.z.string() })
+        ])
+      ),
+      placeholder: import_zod.z.string().nullable(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change"],
+    description: "USWDS combo box \u2014 a searchable/filterable select dropdown. options: strings or {label, value}. Use { $bindState } on value for binding.",
+    example: {
+      label: "Select a fruit",
+      name: "fruit",
+      options: ["Apple", "Banana", "Cherry", "Date", "Elderberry"],
+      placeholder: "- Select -"
+    }
+  },
+  DatePicker: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      minDate: import_zod.z.string().nullable(),
+      maxDate: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change"],
+    description: "USWDS date picker. value/minDate/maxDate are ISO date strings (YYYY-MM-DD). Use { $bindState } on value for binding.",
+    example: {
+      label: "Date of birth",
+      name: "dob",
+      hint: "mm/dd/yyyy"
+    }
+  },
+  TimePicker: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      minTime: import_zod.z.string().nullable(),
+      maxTime: import_zod.z.string().nullable(),
+      step: import_zod.z.number().nullable(),
+      required: import_zod.z.boolean().nullable()
+    }),
+    events: ["change"],
+    description: "USWDS time picker. value/minTime/maxTime use 'HH:MM' 24-hour format. step is in minutes (default 30). Use { $bindState } on value.",
+    example: {
+      label: "Appointment time",
+      name: "appt_time",
+      hint: "Select a time",
+      step: 30
+    }
+  },
+  CharacterCount: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      maxLength: import_zod.z.number(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      multiline: import_zod.z.boolean().nullable(),
+      rows: import_zod.z.number().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change"],
+    description: "USWDS input or textarea with a live character count indicator. maxLength: character limit. multiline: renders as textarea. Use { $bindState } on value.",
+    example: {
+      label: "Brief description",
+      name: "description",
+      maxLength: 150,
+      hint: "Enter a short summary",
+      multiline: true
+    }
+  },
+  // ==========================================================================
+  // Overlay / Modal Components
+  // ==========================================================================
+  Modal: {
+    props: import_zod.z.object({
+      heading: import_zod.z.string(),
+      description: import_zod.z.string().nullable(),
+      openPath: import_zod.z.string(),
+      large: import_zod.z.boolean().nullable()
+    }),
+    slots: ["default"],
+    description: "USWDS modal dialog. Set openPath to a boolean state path. Use setState to toggle open/close.",
+    example: {
+      heading: "Are you sure?",
+      description: "This action cannot be undone.",
+      openPath: "/modal/open"
+    }
+  },
+  // ==========================================================================
+  // Additional Display Components
+  // ==========================================================================
+  Icon: {
+    props: import_zod.z.object({
+      name: import_zod.z.string(),
+      size: import_zod.z.enum(["sm", "md", "lg", "xl", "2xl", "3xl"]).nullable(),
+      color: import_zod.z.string().nullable(),
+      ariaLabel: import_zod.z.string().nullable()
+    }),
+    description: "USWDS standalone SVG icon from the USWDS icon set. name: USWDS icon name (e.g. 'check', 'close', 'search', 'arrow_forward'). size: sm\u20133xl. color: a USWDS text-color utility class (e.g. 'text-primary').",
+    example: { name: "check_circle", size: "lg", color: "text-green" }
+  },
+  InputGroup: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      type: import_zod.z.enum(["text", "email", "password", "number", "search", "tel", "url"]).nullable(),
+      prefix: import_zod.z.string().nullable(),
+      suffix: import_zod.z.string().nullable(),
+      placeholder: import_zod.z.string().nullable(),
+      hint: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      required: import_zod.z.boolean().nullable(),
+      disabled: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
+    }),
+    events: ["change", "blur"],
+    description: "USWDS input group \u2014 a text input with an optional prefix and/or suffix add-on (e.g. currency symbol, unit label). Use { $bindState } on value for two-way binding.",
+    example: {
+      label: "Amount",
+      name: "amount",
+      prefix: "$",
+      suffix: ".00",
+      type: "number",
+      placeholder: "0"
+    }
+  },
+  List: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(import_zod.z.string()),
+      variant: import_zod.z.enum(["unordered", "ordered", "unstyled"]).nullable()
+    }),
+    description: "USWDS list. variant: unordered (default, bullet list), ordered (numbered list), unstyled (no bullets/numbers).",
+    example: {
+      variant: "unordered",
+      items: ["First item", "Second item", "Third item"]
+    }
+  },
+  ValidationChecklist: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          checked: import_zod.z.boolean().nullable()
+        })
+      ),
+      heading: import_zod.z.string().nullable()
+    }),
+    description: "USWDS validation checklist (usa-checklist). Displays a list of password/input requirements with checked/unchecked states.",
+    example: {
+      heading: "Password must contain:",
+      items: [
+        { label: "At least 12 characters", checked: true },
+        { label: "At least one uppercase letter", checked: false },
+        { label: "At least one number", checked: false }
+      ]
+    }
+  },
+  Prose: {
+    props: import_zod.z.object({
+      element: import_zod.z.enum(["div", "article", "section", "main"]).nullable()
+    }),
+    slots: ["default"],
+    description: "USWDS prose typography wrapper (usa-prose). Applies USWDS text styles \u2014 headings, paragraphs, lists, links, blockquotes, code blocks \u2014 to nested content. element: div (default), article, section, or main.",
+    example: { element: "article" }
+  },
+  Hero: {
+    props: import_zod.z.object({
+      heading: import_zod.z.string(),
+      eyebrow: import_zod.z.string().nullable(),
+      body: import_zod.z.string().nullable(),
+      backgroundUrl: import_zod.z.string().nullable(),
+      ariaLabel: import_zod.z.string().nullable()
+    }),
+    description: "USWDS hero section \u2014 full-width landing page callout with optional background image. heading: headline text. eyebrow: smaller label above the headline. body: supporting paragraph. backgroundUrl: CSS background image URL (user-supplied).",
+    example: {
+      heading: "A tagline that explains your agency\u2019s focus",
+      eyebrow: null,
+      body: "Support the text about your agency with a brief, relevant sentence or two.",
+      backgroundUrl: null,
+      ariaLabel: "Introduction"
+    }
+  },
+  GraphicList: {
+    props: import_zod.z.object({
+      heading: import_zod.z.string().nullable(),
+      items: import_zod.z.array(
+        import_zod.z.object({
+          imageUrl: import_zod.z.string().nullable(),
+          imageAlt: import_zod.z.string().nullable(),
+          heading: import_zod.z.string(),
+          content: import_zod.z.string()
+        })
+      )
+    }),
+    description: "USWDS graphic list \u2014 a responsive grid of image+text media blocks for showcasing values, programs, or features. items: [{imageUrl?, imageAlt?, heading, content}].",
+    example: {
+      heading: null,
+      items: [
+        {
+          imageUrl: null,
+          imageAlt: null,
+          heading: "Graphic heading",
+          content: "A short description of what this item represents."
+        },
+        {
+          imageUrl: null,
+          imageAlt: null,
+          heading: "Graphic heading",
+          content: "A short description of what this item represents."
+        }
+      ]
+    }
+  },
+  EmbedContainer: {
+    props: import_zod.z.object({
+      src: import_zod.z.string(),
+      title: import_zod.z.string(),
+      ratio: import_zod.z.enum(["16x9", "4x3"]).nullable()
+    }),
+    description: "USWDS embed container \u2014 a responsive aspect-ratio wrapper for iframe embeds such as YouTube videos. ratio: 16x9 (default) or 4x3. Provide a descriptive title for accessibility.",
+    example: {
+      src: "https://www.youtube.com/embed/example",
+      title: "An example video",
+      ratio: "16x9"
+    }
+  },
+  Form: {
+    props: import_zod.z.object({
+      large: import_zod.z.boolean().nullable()
+    }),
+    slots: ["default"],
+    events: ["submit"],
+    description: "USWDS form container (usa-form). Applies USWDS form layout \u2014 constrained max-width and consistent label/input spacing \u2014 to nested form elements. large: wider form variant. Wrap Input, Select, Checkbox, Radio, and other form components as children.",
+    example: { large: false }
+  },
+  Section: {
+    props: import_zod.z.object({
+      title: import_zod.z.string().nullable(),
+      text: import_zod.z.string().nullable(),
+      variant: import_zod.z.enum(["default", "light", "dark"]).nullable()
+    }),
+    slots: ["default"],
+    description: "USWDS page section (usa-section). Applies consistent vertical padding to a full-width page section inside a grid-container. variant: default, light (lighter background), dark (darker background). title and text are optional \u2014 use children slots for richer content.",
+    example: {
+      title: "Section title",
+      text: "Supporting section description text.",
+      variant: null
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  uswdsComponentDefinitions,
+  uswdsComponents
+});
+//# sourceMappingURL=index.js.map