@holmdigital/components 1.2.4 → 2.1.0

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AccessibilityStatement: () => AccessibilityStatement,
   Accordion: () => Accordion,
   AccordionContent: () => AccordionContent,
   AccordionItem: () => AccordionItem,
@@ -37,17 +38,28 @@ __export(index_exports, {
   BreadcrumbItem: () => BreadcrumbItem,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
+  Card: () => Card,
   Checkbox: () => Checkbox,
+  Combobox: () => Combobox,
+  DataTable: () => DataTable,
+  DatePicker: () => DatePicker,
   Dialog: () => Dialog,
+  ErrorSummary: () => ErrorSummary,
   FormField: () => FormField,
   Heading: () => Heading,
+  HelpText: () => HelpText,
+  LiveRegion: () => LiveRegion,
   Modal: () => Modal,
+  MultiSelect: () => MultiSelect,
   NavigationMenu: () => NavigationMenu,
+  Pagination: () => Pagination,
+  ProgressBar: () => ProgressBar,
   RadioGroup: () => RadioGroup,
   Select: () => Select,
   SelectContent: () => SelectContent,
   SelectItem: () => SelectItem,
   SelectTrigger: () => SelectTrigger,
+  Skeleton: () => Skeleton,
   SkipLink: () => SkipLink,
   Switch: () => Switch,
   TabTrigger: () => TabTrigger,
@@ -59,6 +71,7 @@ __export(index_exports, {
   TooltipContent: () => TooltipContent,
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
+  TreeView: () => TreeView,
   useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
@@ -142,7 +155,7 @@ var Button = (0, import_react.forwardRef)(
         disabled: disabled || isLoading,
         "aria-busy": isLoading,
         tabIndex: props.tabIndex,
-        ...props,
+        className,
         children: [
           isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { marginRight: "8px" }, children: "\u23F3" }) : null,
           children
@@ -1158,7 +1171,7 @@ var Tooltip = ({ children }) => {
   const id = (0, import_react14.useRef)(`tooltip-${Math.random().toString(36).substr(2, 9)}`).current;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipContext.Provider, { value: { open, setOpen, id }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative inline-block group", onMouseLeave: () => setOpen(false), children }) });
 };
-var TooltipTrigger = ({ children, asChild = false, ...props }) => {
+var TooltipTrigger = ({ children, asChild: _asChild = false, ...props }) => {
   const context = (0, import_react14.useContext)(TooltipContext);
   if (!context) throw new Error("TooltipTrigger must be used within Tooltip");
   const { setOpen, id } = context;
@@ -1233,8 +1246,1854 @@ var Heading = import_react15.default.forwardRef(
   }
 );
 Heading.displayName = "Heading";
+
+// src/AccessibilityStatement/AccessibilityStatement.tsx
+var import_standards = require("@holmdigital/standards");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var TEMPLATES = {
+  sv: {
+    title: "Tillg\xE4nglighet f\xF6r {<webbplats>}",
+    intro: "{<organisation>} st\xE5r bakom den h\xE4r webbplatsen. Vi vill att s\xE5 m\xE5nga som m\xF6jligt ska kunna anv\xE4nda den. Det h\xE4r dokumentet beskriver hur {<webbplats>} uppfyller lagen om tillg\xE4nglighet till digital offentlig service, eventuella k\xE4nda tillg\xE4nglighetsproblem och hur du kan rapportera brister till oss s\xE5 att vi kan \xE5tg\xE4rda dem.",
+    sections: [
+      { id: "how-accessible", title: "Hur tillg\xE4nglig \xE4r webbplatsen?", content: "{Vi har inga k\xE4nda brister i tillg\xE4ngligheten f\xF6r den h\xE4r webbplatsen./Vi \xE4r medvetna om att delar av webbplatsen inte \xE4r helt tillg\xE4ngliga. Se avsnittet om inneh\xE5ll som inte \xE4r tillg\xE4ngligt nedan f\xF6r mer information./Vi \xE4r medvetna om att delar av webbplatsen inte \xE4r helt tillg\xE4ngliga. Se avsnittet om inneh\xE5ll som inte \xE4r tillg\xE4ngligt nedan f\xF6r mer information.}" },
+      { id: "what-to-do", title: "Vad kan du g\xF6ra om du inte kan anv\xE4nda delar av webbplatsen?", content: "Om du beh\xF6ver inneh\xE5ll fr\xE5n {<webbplats>} som inte \xE4r tillg\xE4ngligt f\xF6r dig, men som \xE4r undantaget fr\xE5n lagens till\xE4mpningsomr\xE5de enligt beskrivning nedan, kan du meddela oss.\n\n[Svarstiden \xE4r normalt {<svarstid>}.]\n\n[Du kan ocks\xE5 kontakta oss p\xE5 f\xF6ljande s\xE4tt:\n\n* skicka e-post till {<e-postadress>}\n* ring {<telefonnummer>}]" },
+      { id: "reporting", title: "Rapportera brister i webbplatsens tillg\xE4nglighet", content: "Vi str\xE4var hela tiden efter att f\xF6rb\xE4ttra webbplatsens tillg\xE4nglighet. Om du uppt\xE4cker problem som inte \xE4r beskrivna p\xE5 den h\xE4r sidan, eller om du anser att vi inte uppfyller lagens krav, meddela oss s\xE5 att vi f\xE5r veta att problemet finns." },
+      { id: "enforcement", title: "Tillsyn", content: "{<enforcement_body>} har ansvaret f\xF6r tillsyn \xF6ver lagen om tillg\xE4nglighet till digital offentlig service. Du kan anm\xE4la till {<enforcement_body>} om du tycker att v\xE5r digitala service har brister i tillg\xE4nglighet.\n\nDu kan ocks\xE5 anm\xE4la till {<enforcement_body>} om du tycker att v\xE5r bed\xF6mning av vad som \xE4r osk\xE4ligt betungande ska granskas, om du tycker att v\xE5r tillg\xE4nglighetsredog\xF6relse har brister eller om du tycker att vi inte har hanterat din beg\xE4ran om tillg\xE4ngligg\xF6rande korrekt." },
+      { id: "technical", title: "Teknisk information om webbplatsens tillg\xE4nglighet", content: "{Den h\xE4r webbplatsen \xE4r helt f\xF6renlig med lagen om tillg\xE4nglighet till digital offentlig service./Den h\xE4r webbplatsen \xE4r delvis f\xF6renlig med lagen om tillg\xE4nglighet till digital offentlig service, p\xE5 grund av de brister som beskrivs nedan./Den h\xE4r webbplatsen \xE4r inte f\xF6renlig med lagen om tillg\xE4nglighet till digital offentlig service. Otillg\xE4ngliga delar beskrivs nedan.}" },
+      { id: "non-accessible", title: "Inneh\xE5ll som inte \xE4r tillg\xE4ngligt", content: "Det inneh\xE5ll som beskrivs nedan \xE4r p\xE5 ett eller annat s\xE4tt inte helt tillg\xE4ngligt.\n\n[\n### Bristande f\xF6renlighet med lagkraven\n{<brister>}\n]" },
+      { id: "testing", title: "Hur vi testat webbplatsen", content: "{Vi har gjort en sj\xE4lvskattning (intern testning) av {<webbplats>}./{<extern akt\xF6r>} har gjort en oberoende granskning av {<webbplats>}./Vi har uppskattat tillg\xE4ngligheten utan granskning.}\n\nSenaste bed\xF6mningen gjordes den {<bed\xF6mningsdatum>}.\n\n[Granskningsmetod: {<metod>}]\n\nWebbplatsen publicerades den {<publiceringsdatum>}.\n\nRedog\xF6relsen uppdaterades senast den {<uppdateringsdatum>}." }
+    ]
+  },
+  en: {
+    title: "Accessibility of {<website>}",
+    intro: "This website is run by {<organisation>}. We want as many people as possible to be able to use it, and this document describes how {<website>} complies with the accessibility regulations, any known accessibility issues, and how you can report problems so that we can fix them.",
+    sections: [
+      { id: "how-accessible", title: "How accessible is the website?", content: "{There are no known accessibility issues with this website./We know some parts of this website aren\u2019t fully accessible. See the section on non-accessible content below for more information./We know some parts of this website aren\u2019t fully accessible. See the section on non-accessible content below for more information.}" },
+      { id: "what-to-do", title: "What to do if you can\u2019t access parts of this website?", content: "If you need content from this website that is not accessible for you, but is not within the scope of the accessibility regulations as described below, please contact us.\n\n[Our normal response time is {<response time>}.]\n\n[You can also contact us in the following ways:\n\n* email {<email address>}\n* call {<telephone number>}]" },
+      { id: "reporting", title: "Reporting accessibility problems with this website", content: "We\u2019re always looking to improve the accessibility of this website. If you find any problems that aren\u2019t listed on this page or if we\u2019re not meeting the requirements of the accessibility regulations, contact us and let us know about the problem." },
+      { id: "enforcement", title: "Enforcement procedure", content: "The {<enforcement_body>} is responsible for enforcing the web accessibility regulations. If you experience accessibility issues on our website, you can submit a complaint to {<enforcement_body>}.\n\nYou can also submit a complaint to {<enforcement_body>} if you think that our assessment of what constitutes a disproportionate burden should be reviewed, if you think that our accessibility statement is inadequate, or it you think that your request for excluded content in an accessible format has not been handled correctly." },
+      { id: "technical", title: "Technical information about this website\u2019s accessibility", content: "{This website is fully compliant with the accessibility regulations./This website is partially compliant with the accessibility regulations, due to the non-compliances listed below./This website is not compliant with the accessibility regulations. The non-accessible sections are listed below.}" },
+      { id: "non-accessible", title: "Non-accessible content", content: "The content described below is, in one way or another, not fully accessible.\n\n[\n### Non-compliance with the accessibility regulations\n\n{<issues>}\n]" },
+      { id: "testing", title: "How we tested this website", content: "{We have performed a self-assessment (internal testing) of {<website>}./{<third party>} has tested {<website>}./We have estimated the accessibility without testing.}\n\nThe last assessment was made on {<assessment date>}.\n\n[Assessment method: {<method>}]\n\nThe website was published on {<publish date>}.\n\nThe statement was last updated on {<update date>}." }
+    ]
+  },
+  no: {
+    title: "Tilgjengelighet for {<nettsted>}",
+    intro: "{<organisasjon>} st\xE5r bak dette nettstedet. Vi \xF8nsker at flest mulig skal kunne bruke det. Dette dokumentet beskriver hvordan {<nettsted>} oppfyller lov om universell utforming av IKT-l\xF8sninger, eventuelle kjente tilgjengelighetsproblemer og hvordan du kan rapportere mangler til oss slik at vi kan utbedre dem.",
+    sections: [
+      { id: "how-accessible", title: "Hvor tilgjengelig er nettstedet?", content: "{Vi har ingen kjente mangler i tilgjengeligheten for dette nettstedet./Vi er klar over at deler av nettstedet ikke er fullt ut tilgjengelig. See avsnittet om innhold som ikke er tilgjengelig nedenfor for mer informasjon./Vi er klar over at deler av nettstedet ikke er fullt ut tilgjengelig. See avsnittet om innhold som ikke er tilgjengelig nedenfor for mer informasjon.}" },
+      { id: "what-to-do", title: "Hva kan du gj\xF8re hvis du ikke kan bruke deler av nettstedet?", content: "Hvis du trenger innhold fra {<nettsted>} som ikke er tilgjengelig for deg, men som er unntatt fra lovens anvendelsesomr\xE5de som beskrevet nedenfor, kan du melde fra til oss.\n\n[Svartiden er normalt {<svartid>}.]\n\n[Du kan ogs\xE5 kontakte oss p\xE5 f\xF8lgende m\xE5ter:\n\n* send e-post til {<e-postadresse>}\n* ring {<telefonnummer>}]" },
+      { id: "reporting", title: "Rapporter mangler ved nettstedets tilgjengelighet", content: "Vi jobber kontinuerlig med \xE5 forbedre nettstedets tilgjengelighet. Hvis du oppdager problemer som ikke er beskrevet p\xE5 denne siden, eller hvis du mener at vi ikke oppfyller lovens krav, meld fra til oss slik at vi f\xE5r vite om problemet." },
+      { id: "enforcement", title: "Tillsyn", content: "{<enforcement_body>} har ansvaret for tilsyn med lov om universell utforming av IKT-l\xF8sninger. Du kan klage til {<enforcement_body>} hvis du mener at v\xE5r digitale tjeneste har mangler i tilgjengelighet.\n\nDu kan ogs\xE5 klage til {<enforcement_body>} hvis du mener at v\xE5r vurdering av hva som er uforholdsmessig byrdefullt b\xF8r overproves, hvis du mener at v\xE5r tilgjengelighetserkl\xE6ring har mangler eller hvis du mener at vi ikke har h\xE5ndtert din foresp\xF8rsel om tilgjengeliggj\xF8ring korrekt." },
+      { id: "technical", title: "Teknisk informasjon om nettstedets tilgjengelighet", content: "{Dette nettstedet er helt i samsvar med lov om universell utforming av IKT-l\xF8sninger./Dette nettstedet er delvis i samsvar med lov om universell utforming av IKT-l\xF8sninger, p\xE5 grunn av manglene beskrevet nedenfor./Dette nettstedet er ikke i samsvar med lov om universell utforming av IKT-l\xF8sninger. Utilgjengelige deler er beskrevet nedenfor.}" },
+      { id: "non-accessible", title: "Innhold som ikke er tilgjengelig", content: "Innholdet som er beskrevet nedenfor er p\xE5 en eller annen m\xE5te ikke fullt ut tilgjengelig.\n\n[\n### Manglende samsvar med lovkravene\n{<mangler>}\n]" },
+      { id: "testing", title: "Hvordan vi har testet nettstedet", content: "{Vi har gjort en egenevaluering (intern testing) av {<nettsted>}./{<ekstern aktor>} har gjort en uavhengig revisjon av {<nettsted>}./Vi har ansl\xE5tt tilgjengeligheten uten testing.}\n\nSiste vurdering ble gjort den {<vurderingsdato>}.\n\n[Vurderingsmetode: {<metode>}]\n\nNettstedet ble publisert den {<publiseringsdato>}.\n\nErkl\xE6ringen ble sist oppdatert den {<oppdateringsdato>}." }
+    ]
+  }
+};
+var formatDiggDate = (date, locale) => {
+  const localeMap = {
+    sv: "sv-SE",
+    no: "no-NO",
+    nb: "no-NO",
+    da: "da-DK",
+    fi: "fi-FI",
+    nl: "nl-NL",
+    de: "de-DE",
+    fr: "fr-FR",
+    es: "es-ES"
+  };
+  return date.toLocaleDateString(localeMap[locale] || "en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+};
+var AccessibilityStatement = ({
+  country,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  sector: _sector,
+  organizationName,
+  websiteUrl: _websiteUrl,
+  complianceLevel,
+  lastReviewDate,
+  contactEmail,
+  assessmentDate,
+  evaluationMethod,
+  generatorTool,
+  logoUrl,
+  nonComplianceItems = [],
+  locale = "en",
+  className = "",
+  phoneNumber,
+  responseTime,
+  badgeUrl,
+  publishDate
+}) => {
+  const lang = locale === "sv" ? "sv" : "en";
+  const template = TEMPLATES[lang] || TEMPLATES.en;
+  const d = (date) => formatDiggDate(date, locale);
+  const enforcementBody = import_standards.ENFORCEMENT_BODIES[country] || import_standards.ENFORCEMENT_BODIES.EU;
+  const replacements = {
+    "{<webbplats>}": organizationName,
+    // Or websiteUrl, but usually org/site name
+    "{<website>}": organizationName,
+    "{<organisation>}": organizationName,
+    "{<e-postadress>}": contactEmail,
+    "{<email address>}": contactEmail,
+    "{<telefonnummer>}": phoneNumber || "",
+    "{<telephone number>}": phoneNumber || "",
+    "{<svarstid>}": responseTime || "",
+    "{<response time>}": responseTime || "",
+    "{<bed\xF6mningsdatum>}": assessmentDate ? d(assessmentDate) : d(lastReviewDate),
+    "{<assessment date>}": assessmentDate ? d(assessmentDate) : d(lastReviewDate),
+    "{<uppdateringsdatum>}": d(lastReviewDate),
+    "{<update date>}": d(lastReviewDate),
+    "{<publiceringsdatum>}": publishDate ? d(publishDate) : "2024-01-01",
+    // Default to a realistic value if unknown
+    "{<publish date>}": publishDate ? d(publishDate) : "2024-01-01",
+    "{<metod>}": evaluationMethod || "Automated Scan",
+    "{<method>}": evaluationMethod || "Automated Scan",
+    "{<extern akt\xF6r>}": generatorTool?.name || "HolmDigital Engine",
+    "{<third party>}": generatorTool?.name || "HolmDigital Engine",
+    "{<enforcement_body>}": enforcementBody
+  };
+  let issuesContent = "";
+  if (nonComplianceItems.length > 0) {
+    issuesContent = nonComplianceItems.map((item) => `* ${item}`).join("\n");
+  } else {
+    issuesContent = lang === "sv" ? "Inga k\xE4nda brister." : lang === "no" ? "Ingen kjente mangler." : "No known issues.";
+  }
+  replacements["{<brister>}"] = issuesContent;
+  replacements["{<issues>}"] = issuesContent;
+  replacements["{<mangler>}"] = issuesContent;
+  replacements["{<nettsted>}"] = organizationName;
+  replacements["{<organisasjon>}"] = organizationName;
+  replacements["{<svartid>}"] = responseTime || "";
+  replacements["{<vurderingsdato>}"] = assessmentDate ? d(assessmentDate) : d(lastReviewDate);
+  replacements["{<publiseringsdatum>}"] = publishDate ? d(publishDate) : "2024-01-01";
+  replacements["{<ekstern aktor>}"] = generatorTool?.name || "HolmDigital Engine";
+  const renderTemplate = (tmpl) => {
+    let text = tmpl;
+    text = text.replace(/\[([\s\S]*?)\]/g, (_match, content) => {
+      if (content.includes("{<svarstid>}") || content.includes("{<response time>}")) {
+        return responseTime ? content : "";
+      }
+      if (content.includes("{<telefonnummer>}") || content.includes("{<telephone number>}")) {
+        return phoneNumber ? content : "";
+      }
+      if (content.includes("{<brister>}") || content.includes("{<issues>}")) {
+        return complianceLevel !== "full" ? content : "";
+      }
+      return "\n" + content.trim() + "\n";
+    });
+    for (const [key, value] of Object.entries(replacements)) {
+      text = text.replaceAll(key, value);
+    }
+    text = text.replace(/\{([^{}]*?)\}/g, (_match, content) => {
+      const parts = content.split("/");
+      if (parts.length >= 2) {
+        let idx = 0;
+        if (complianceLevel === "partial") idx = 1;
+        if (complianceLevel === "non-compliant") idx = parts.length > 2 ? 2 : 1;
+        return parts[idx].trim();
+      }
+      return _match;
+    });
+    return text;
+  };
+  const renderSections = (sections) => {
+    return sections.map((section, i) => {
+      const content = renderTemplate(section.content);
+      const trimmed = content.trim();
+      if (!trimmed) return null;
+      let IconNode = null;
+      if (section.id === "how-accessible" || trimmed.includes("Hur tillg\xE4nglig") || trimmed.includes("How accessible") || trimmed.includes("Hvor tilgjengelig") || trimmed.includes("Hvor tilg\xE6ngeligt") || trimmed.includes("Kuinka saavutettava") || trimmed.includes("Hoe toegankelijk") || trimmed.includes("Stand der Vereinbarkeit") || trimmed.includes("\xC9tat de conformit\xE9") || trimmed.includes("Situaci\xF3n de cumplimiento")) {
+        IconNode = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(EyeIcon, {}) });
+      } else if (section.id === "what-to-do" || trimmed.includes("Vad kan du g\xF6ra") || trimmed.includes("What to do") || trimmed.includes("Hva kan du gj\xF8re") || trimmed.includes("Hvad kan du g\xF8re") || trimmed.includes("Mit\xE4 voit tehd\xE4") || trimmed.includes("Wat kunt u doen") || trimmed.includes("Nicht barrierefreie Inhalte") || trimmed.includes("Contenus non accessibles") || trimmed.includes("Contenido no accesible")) {
+        IconNode = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HelpCircleIcon, {}) });
+      } else if (section.id === "reporting" || trimmed.includes("Rapporter brister") || trimmed.includes("Reporting accessibility") || trimmed.includes("Rapporter mangler") || trimmed.includes("Anna palautetta") || trimmed.includes("Meld toegankelijkheidsproblemen") || trimmed.includes("Feedback und Kontaktangaben") || trimmed.includes("Retour d'information") || trimmed.includes("Mecanismo de comunicaci\xF3n")) {
+        IconNode = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertOctagonIcon, {}) });
+      } else if (section.id === "enforcement" || trimmed.includes("Tillsyn") || trimmed.includes("Enforcement procedure") || trimmed.includes("Tilsyn") || trimmed.includes("H\xE5ndh\xE6velsesprocedure") || trimmed.includes("T\xE4yt\xE4nt\xF6\xF6npanomenettely") || trimmed.includes("Handhavingsprocedure") || trimmed.includes("Durchsetzungsverfahren") || trimmed.includes("Voies de recours") || trimmed.includes("Procedimiento de aplicaci\xF3n")) {
+        IconNode = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GavelIcon, {}) });
+      } else if (section.id === "technical" || trimmed.includes("Teknisk information") || trimmed.includes("Technical information")) {
+        IconNode = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CpuIcon, {}) });
+      } else if (section.id === "testing" || trimmed.includes("Hur vi testat") || trimmed.includes("How we tested") || trimmed.includes("Hvordan vi har testet") || trimmed.includes("Kuinka olemme testanneet") || trimmed.includes("Hoe wij de website hebben getest") || trimmed.includes("Erstellung dieser Erkl\xE4rung") || trimmed.includes("\xC9tablissement de cette d\xE9claration") || trimmed.includes("Preparaci\xF3n de la presente declaraci\xF3n")) {
+        IconNode = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckCircleIcon, {}) });
+      }
+      const blocks = trimmed.split("\n\n").map((block, bi) => {
+        const blockTrimmed = block.trim();
+        if (!blockTrimmed) return null;
+        if (blockTrimmed.startsWith("## ")) {
+          const title = blockTrimmed.replace("## ", "");
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("h2", { style: styles.sectionTitle, children: [
+            IconNode,
+            title
+          ] }, `${i}-${bi}`);
+        }
+        if (blockTrimmed.startsWith("### ")) {
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { ...styles.sectionTitle, fontSize: "1.4rem" }, children: blockTrimmed.replace("### ", "") }, `${i}-${bi}`);
+        }
+        if (blockTrimmed.includes("* ") || blockTrimmed.includes("\u2022 ")) {
+          const lines = blockTrimmed.split("\n");
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { style: styles.list, children: lines.map((line, li) => {
+            const cleanLine = line.trim().replace(/^[*-•]\s*/, "");
+            if (!cleanLine) return null;
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("li", { style: styles.listItem, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.listBullet }),
+              cleanLine
+            ] }, li);
+          }) }, `${i}-${bi}`);
+        }
+        const isCardSection = blockTrimmed.includes("e-post") || blockTrimmed.includes("email") || blockTrimmed.includes("ring ") || blockTrimmed.includes("call ");
+        if (isCardSection) {
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.card, children: blockTrimmed }, `${i}-${bi}`);
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: styles.paragraph, children: blockTrimmed }, `${i}-${bi}`);
+      });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("section", { style: styles.section, children: blocks }, i);
+    });
+  };
+  const statementTools = (0, import_standards.getStatementToolsByCountry)(country);
+  const usedTool = generatorTool || statementTools.find((t) => t.recommended) || statementTools[0];
+  const styles = {
+    page: {
+      fontFamily: '"Inter", system-ui, -apple-system, sans-serif',
+      color: "#334155",
+      // Slate 700
+      lineHeight: 1.6,
+      maxWidth: "100%"
+    },
+    header: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: "4.5rem",
+      paddingBottom: "2rem",
+      borderBottom: "1px solid #f1f5f9"
+    },
+    logoContainer: {
+      display: "flex",
+      alignItems: "center",
+      textDecoration: "none",
+      marginRight: "1.5rem"
+    },
+    divider: {
+      height: "2.5rem",
+      width: "1px",
+      backgroundColor: "#e2e8f0",
+      marginRight: "1.5rem",
+      display: "block"
+    },
+    websiteContainer: {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.75rem",
+      textDecoration: "none",
+      color: "#475569",
+      // Slate 600
+      fontWeight: 600,
+      fontSize: "1rem",
+      padding: "0.5rem 1rem",
+      backgroundColor: "#f8fafc",
+      borderRadius: "0.75rem",
+      border: "1px solid #f1f5f9"
+    },
+    container: {
+      maxWidth: "900px",
+      margin: "2rem auto",
+      padding: "4.5rem",
+      backgroundColor: "#ffffff",
+      borderRadius: "24px",
+      boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.05)",
+      border: "1px solid #f1f5f9",
+      fontFamily: '"Inter", system-ui, -apple-system, sans-serif',
+      color: "#1e293b",
+      // Slate 800
+      lineHeight: 1.75,
+      fontSize: "1.125rem"
+    },
+    mainHeading: {
+      fontSize: "3rem",
+      fontWeight: 900,
+      color: "#082f49",
+      // Primary 950
+      marginTop: "0",
+      marginBottom: "1rem",
+      letterSpacing: "-0.04em",
+      lineHeight: 1.1
+    },
+    metaData: {
+      color: "#64748b",
+      // Slate 500
+      fontSize: "0.925rem",
+      marginBottom: "4rem",
+      fontWeight: 500,
+      display: "flex",
+      gap: "1.5rem"
+    },
+    section: {
+      marginBottom: "4.5rem"
+    },
+    sectionTitle: {
+      fontSize: "1.75rem",
+      fontWeight: 800,
+      color: "#082f49",
+      // Primary 950
+      marginBottom: "1.5rem",
+      marginTop: 0,
+      letterSpacing: "-0.025em",
+      display: "flex",
+      alignItems: "center",
+      gap: "0.75rem"
+    },
+    card: {
+      padding: "2.5rem",
+      backgroundColor: "#f0f9ff",
+      // Primary 50
+      borderRadius: "1.5rem",
+      border: "1px solid #e0f2fe",
+      marginBottom: "2.5rem"
+    },
+    paragraph: {
+      marginBottom: "1.5rem",
+      maxWidth: "65ch",
+      whiteSpace: "pre-line"
+    },
+    link: {
+      color: "#0284c7",
+      // Primary 600
+      textDecoration: "none",
+      fontWeight: 600,
+      borderBottom: "2px solid #e0f2fe",
+      transition: "border-color 0.2s",
+      cursor: "pointer"
+    },
+    list: {
+      listStyleType: "none",
+      paddingLeft: 0,
+      marginBottom: "1.5rem"
+    },
+    listItem: {
+      marginBottom: "0.75rem",
+      paddingLeft: "1.75rem",
+      position: "relative",
+      display: "block"
+    },
+    listBullet: {
+      position: "absolute",
+      left: 0,
+      top: "0.6em",
+      width: "0.5rem",
+      height: "0.5rem",
+      borderRadius: "50%",
+      backgroundColor: "#0ea5e9"
+      // Primary 500
+    },
+    statusBadge: {
+      display: "inline-flex",
+      alignItems: "center",
+      padding: "0.375rem 1rem",
+      borderRadius: "9999px",
+      fontSize: "0.875rem",
+      fontWeight: 700,
+      backgroundColor: complianceLevel === "full" ? "#dcfce7" : complianceLevel === "partial" ? "#fef9c3" : "#fee2e2",
+      color: complianceLevel === "full" ? "#166534" : complianceLevel === "partial" ? "#854d0e" : "#991b1b",
+      boxShadow: `0 4px 6px -1px ${complianceLevel === "full" ? "rgba(34, 197, 94, 0.1)" : complianceLevel === "partial" ? "rgba(234, 179, 8, 0.1)" : "rgba(239, 68, 68, 0.1)"}`,
+      border: `1px solid ${complianceLevel === "full" ? "#bbf7d0" : complianceLevel === "partial" ? "#fef08a" : "#fecaca"}`,
+      marginLeft: "0.5rem"
+    },
+    iconWrapper: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "2.5rem",
+      height: "2.5rem",
+      borderRadius: "0.75rem",
+      backgroundColor: "#ffffff",
+      boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      border: "1px solid #f1f5f9",
+      color: "#0284c7"
+    }
+  };
+  const Logo = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { width: "32", height: "32", rx: "6", fill: "#0F172A" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M16 8L24 16L16 24L8 16L16 8Z", fill: "#38BDF8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M16 12L20 16L16 20L12 16L16 12Z", fill: "#0F172A" })
+  ] });
+  const IconWrapper = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.iconWrapper, children });
+  const EyeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+  const HelpCircleIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  ] });
+  const AlertOctagonIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("polygon", { points: "7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  ] });
+  const GavelIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "m14 13-5 5 2 2 5-5-2-2Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "m3 21 2-2 5-5-2-2-5 5-2 2Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "m15 6 5 5-11 11-5-5L15 6Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M13 2 18 7" })
+  ] });
+  const CpuIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { x: "9", y: "9", width: "6", height: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M15 2v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M15 20v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M2 15h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M2 9h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M20 15h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M20 9h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M9 2v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M9 20v2" })
+  ] });
+  const CheckCircleIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("polyline", { points: "22 4 12 14.01 9 11.01" })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "main",
+    {
+      role: "main",
+      className,
+      style: styles.container,
+      "aria-labelledby": "a11y-statement-title",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { style: styles.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { href: "https://holmdigital.se", style: styles.logoContainer, target: "_blank", rel: "noreferrer", children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { src: logoUrl, alt: "Holm Digital", style: { height: "3rem", width: "auto" } }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Logo, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { marginLeft: "0.75rem", fontWeight: 700, fontSize: "1.25rem", color: "#0c4a6e" }, children: "HolmDigital" })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.divider, "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("a", { href: "https://holmdigital.se", style: styles.websiteContainer, target: "_blank", rel: "noreferrer", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { backgroundColor: "#f1f5f9", padding: "0.25rem", borderRadius: "0.375rem", display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { color: "#64748b" }, "aria-hidden": "true", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1 4-10z" })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { children: [
+                "holmdigital",
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { color: "#0284c7" }, children: ".se" })
+              ] })
+            ] })
+          ] }),
+          badgeUrl && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { src: badgeUrl, alt: "Accessibility Badge", style: { height: "1.5rem", width: "auto" } }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "statement-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", { id: "a11y-statement-title", style: styles.mainHeading, children: renderTemplate(template.title) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: styles.paragraph, children: renderTemplate(template.intro) }),
+          renderSections(template.sections)
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("footer", { style: { marginTop: "3rem", borderTop: "1px solid #e2e8f0", paddingTop: "1.5rem", fontSize: "0.875rem", color: "#64748b" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { children: [
+          lang === "sv" ? "Genererad med hj\xE4lp av" : "Generated using",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { href: usedTool?.url || "https://holmdigital.se", style: styles.link, target: "_blank", rel: "noopener noreferrer", children: usedTool?.name || "HolmDigital Engine" })
+        ] }) })
+      ]
+    }
+  );
+};
+AccessibilityStatement.displayName = "AccessibilityStatement";
+
+// src/ErrorSummary/ErrorSummary.tsx
+var import_react16 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ErrorSummary = ({
+  errors,
+  title = "There is a problem",
+  focusOnMount = true,
+  className = ""
+}) => {
+  const headingRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
+    if (focusOnMount && errors.length > 0 && headingRef.current) {
+      headingRef.current.focus();
+    }
+  }, [focusOnMount, errors]);
+  if (errors.length === 0) {
+    return null;
+  }
+  const styles = {
+    container: {
+      border: "2px solid #dc2626",
+      // Red-600
+      borderRadius: "0.375rem",
+      padding: "1rem",
+      marginBottom: "1.5rem",
+      backgroundColor: "#fef2f2"
+      // Red-50
+    },
+    heading: {
+      color: "#991b1b",
+      // Red-800
+      fontWeight: "bold",
+      fontSize: "1.125rem",
+      marginBottom: "0.5rem",
+      outline: "none"
+      // Managed focus usually visually indicated by browser, but we can style if needed
+    },
+    list: {
+      listStyleType: "disc",
+      paddingLeft: "1.25rem",
+      margin: 0,
+      color: "#dc2626"
+      // Red-600
+    },
+    link: {
+      color: "#b91c1c",
+      // Red-700
+      textDecoration: "underline",
+      cursor: "pointer",
+      fontWeight: 500
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      className: `a11y-error-summary ${className}`,
+      role: "alert",
+      "aria-labelledby": "error-summary-title",
+      style: styles.container,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "h2",
+          {
+            id: "error-summary-title",
+            ref: headingRef,
+            tabIndex: -1,
+            style: styles.heading,
+            children: title
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { style: styles.list, children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { style: { marginBottom: "0.25rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "a",
+          {
+            href: `#${error.id}`,
+            style: styles.link,
+            onClick: (e) => {
+              e.preventDefault();
+              const element = document.getElementById(error.id);
+              if (element) {
+                element.focus();
+                element.scrollIntoView({ behavior: "smooth", block: "center" });
+              }
+            },
+            children: error.message
+          }
+        ) }, index)) })
+      ]
+    }
+  );
+};
+ErrorSummary.displayName = "ErrorSummary";
+
+// src/Combobox/Combobox.tsx
+var import_react17 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Combobox = ({
+  label,
+  description,
+  error,
+  options,
+  onChange,
+  value,
+  placeholder = "Type to search...",
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react17.useState)("");
+  const [focusedIndex, setFocusedIndex] = (0, import_react17.useState)(-1);
+  const inputRef = (0, import_react17.useRef)(null);
+  const listboxRef = (0, import_react17.useRef)(null);
+  const containerRef = (0, import_react17.useRef)(null);
+  const id = (0, import_react17.useId)();
+  const listboxId = `${id}-listbox`;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const filteredOptions = options.filter(
+    (option) => option.label.toLowerCase().includes(inputValue.toLowerCase())
+  );
+  (0, import_react17.useEffect)(() => {
+    if (value) {
+      const selectedOption = options.find((o) => o.value === value);
+      if (selectedOption) {
+        setInputValue(selectedOption.label);
+      }
+    } else {
+      setInputValue("");
+    }
+  }, [value, options]);
+  (0, import_react17.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        if (value) {
+          const selectedOption = options.find((o) => o.value === value);
+          if (selectedOption) setInputValue(selectedOption.label);
+        } else {
+          setInputValue("");
+        }
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [value, options]);
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+    setIsOpen(true);
+    setFocusedIndex(-1);
+    if (e.target.value === "") {
+      onChange(null);
+    }
+  };
+  const handleOptionSelect = (option) => {
+    onChange(option.value);
+    setInputValue(option.label);
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (!isOpen && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      setIsOpen(true);
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setFocusedIndex(
+          (prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setFocusedIndex(
+          (prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1
+        );
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen && focusedIndex >= 0) {
+          handleOptionSelect(filteredOptions[focusedIndex]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        if (value) {
+          const selectedOption = options.find((o) => o.value === value);
+          if (selectedOption) setInputValue(selectedOption.label);
+        } else {
+          setInputValue("");
+        }
+        break;
+      case "Tab":
+        setIsOpen(false);
+        break;
+    }
+  };
+  const styles = {
+    container: {
+      position: "relative",
+      marginBottom: "1rem",
+      fontFamily: "system-ui, -apple-system, sans-serif"
+    },
+    label: {
+      display: "block",
+      fontWeight: 600,
+      marginBottom: "0.25rem",
+      color: "#1e293b"
+    },
+    description: {
+      fontSize: "0.875rem",
+      color: "#64748b",
+      marginBottom: "0.5rem"
+    },
+    error: {
+      fontSize: "0.875rem",
+      color: "#dc2626",
+      marginTop: "0.25rem"
+    },
+    input: {
+      width: "100%",
+      padding: "0.5rem 0.75rem",
+      fontSize: "1rem",
+      border: `1px solid ${error ? "#dc2626" : "#cbd5e1"}`,
+      borderRadius: "0.375rem",
+      outline: "none",
+      boxSizing: "border-box"
+    },
+    listbox: {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      right: 0,
+      maxHeight: "200px",
+      overflowY: "auto",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.375rem",
+      backgroundColor: "white",
+      zIndex: 10,
+      marginTop: "0.25rem",
+      padding: 0,
+      listStyle: "none",
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+    },
+    option: {
+      padding: "0.5rem 0.75rem",
+      cursor: "pointer"
+    },
+    activeOption: {
+      backgroundColor: "#e2e8f0",
+      color: "#0f172a"
+    },
+    noResults: {
+      padding: "0.5rem 0.75rem",
+      color: "#64748b",
+      fontStyle: "italic"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref: containerRef, className, style: styles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "label",
+      {
+        id: labelId,
+        htmlFor: id,
+        style: styles.label,
+        children: label
+      }
+    ),
+    description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { id: descriptionId, style: styles.description, children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        id,
+        type: "text",
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": listboxId,
+        "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : void 0,
+        "aria-invalid": !!error,
+        "aria-describedby": [
+          description ? descriptionId : null,
+          error ? errorId : null
+        ].filter(Boolean).join(" ") || void 0,
+        value: inputValue,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        placeholder,
+        style: {
+          ...styles.input,
+          ...isOpen ? { borderColor: "#3b82f6", ring: "2px solid #93c5fd" } : {}
+        }
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { id: errorId, style: styles.error, role: "alert", children: error }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "ul",
+      {
+        ref: listboxRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-label": label,
+        style: styles.listbox,
+        children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
+          const isSelected = value === option.value;
+          const isFocused = focusedIndex === index;
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            "li",
+            {
+              id: `${id}-option-${index}`,
+              role: "option",
+              "aria-selected": isSelected,
+              onClick: () => handleOptionSelect(option),
+              onMouseEnter: () => setFocusedIndex(index),
+              style: {
+                ...styles.option,
+                ...isFocused ? styles.activeOption : {},
+                ...isSelected ? { fontWeight: "bold" } : {}
+              },
+              children: [
+                option.label,
+                isSelected && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": "true", style: { float: "right" }, children: "\u2713" })
+              ]
+            },
+            option.value
+          );
+        }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { style: styles.noResults, children: "No results found" })
+      }
+    )
+  ] });
+};
+
+// src/DatePicker/DatePicker.tsx
+var import_react18 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var DatePicker = (0, import_react18.forwardRef)(({
+  label,
+  description,
+  error,
+  className = "",
+  style,
+  id: providedId,
+  ...props
+}, ref) => {
+  const generatedId = (0, import_react18.useId)();
+  const id = providedId || generatedId;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const styles = {
+    container: {
+      marginBottom: "1rem",
+      fontFamily: "system-ui, -apple-system, sans-serif"
+    },
+    label: {
+      display: "block",
+      fontWeight: 600,
+      marginBottom: "0.25rem",
+      color: "#1e293b"
+    },
+    description: {
+      fontSize: "0.875rem",
+      color: "#64748b",
+      marginBottom: "0.5rem"
+    },
+    error: {
+      fontSize: "0.875rem",
+      color: "#dc2626",
+      marginTop: "0.25rem"
+    },
+    input: {
+      display: "block",
+      width: "100%",
+      padding: "0.5rem 0.75rem",
+      fontSize: "1rem",
+      lineHeight: 1.5,
+      color: "#0f172a",
+      backgroundColor: "#ffffff",
+      border: `1px solid ${error ? "#dc2626" : "#cbd5e1"}`,
+      borderRadius: "0.375rem",
+      outline: "none",
+      boxSizing: "border-box",
+      minHeight: "2.5rem"
+      // Ensure touch target size
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className, style: { ...styles.container, ...style }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "label",
+      {
+        htmlFor: id,
+        style: styles.label,
+        children: label
+      }
+    ),
+    description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { id: descriptionId, style: styles.description, children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "input",
+      {
+        ref,
+        id,
+        type: "date",
+        "aria-invalid": !!error,
+        "aria-describedby": [
+          description ? descriptionId : null,
+          error ? errorId : null
+        ].filter(Boolean).join(" ") || void 0,
+        style: styles.input,
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { id: errorId, style: styles.error, role: "alert", children: error })
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+
+// src/MultiSelect/MultiSelect.tsx
+var import_react19 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var MultiSelect = ({
+  label,
+  description,
+  error,
+  options,
+  selected,
+  onChange,
+  placeholder = "Select items...",
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react19.useState)("");
+  const [focusedIndex, setFocusedIndex] = (0, import_react19.useState)(-1);
+  const [activeTokenIndex] = (0, import_react19.useState)(-1);
+  const inputRef = (0, import_react19.useRef)(null);
+  const containerRef = (0, import_react19.useRef)(null);
+  const id = (0, import_react19.useId)();
+  const listboxId = `${id}-listbox`;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const availableOptions = options.filter(
+    (option) => !selected.includes(option.value) && option.label.toLowerCase().includes(inputValue.toLowerCase())
+  );
+  const handleSelect = (value) => {
+    onChange([...selected, value]);
+    setInputValue("");
+    setIsOpen(false);
+    setFocusedIndex(-1);
+    inputRef.current?.focus();
+  };
+  const handleRemove = (value) => {
+    onChange(selected.filter((v) => v !== value));
+    inputRef.current?.focus();
+  };
+  const handleKeyDown = (e) => {
+    if (activeTokenIndex !== -1) {
+      handleTokenNavigation(e);
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setIsOpen(true);
+        setFocusedIndex((prev) => prev < availableOptions.length - 1 ? prev + 1 : 0);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setIsOpen(true);
+        setFocusedIndex((prev) => prev > 0 ? prev - 1 : availableOptions.length - 1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen && focusedIndex >= 0) {
+          handleSelect(availableOptions[focusedIndex].value);
+        }
+        break;
+      case "Escape":
+        setIsOpen(false);
+        break;
+      case "Backspace":
+        if (inputValue === "" && selected.length > 0) {
+          handleRemove(selected[selected.length - 1]);
+        }
+        break;
+      case "ArrowLeft":
+        if (inputValue === "" && selected.length > 0) {
+        }
+        break;
+    }
+  };
+  const handleTokenNavigation = (_e) => {
+  };
+  const styles = {
+    container: {
+      position: "relative",
+      marginBottom: "1rem",
+      fontFamily: "system-ui, -apple-system, sans-serif"
+    },
+    label: {
+      display: "block",
+      fontWeight: 600,
+      marginBottom: "0.25rem",
+      color: "#1e293b"
+    },
+    description: {
+      fontSize: "0.875rem",
+      color: "#64748b",
+      marginBottom: "0.5rem"
+    },
+    error: {
+      fontSize: "0.875rem",
+      color: "#dc2626",
+      marginTop: "0.25rem"
+    },
+    inputWrapper: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "0.5rem",
+      padding: "0.375rem",
+      border: `1px solid ${error ? "#dc2626" : "#cbd5e1"}`,
+      borderRadius: "0.375rem",
+      backgroundColor: "white",
+      minHeight: "2.5rem"
+    },
+    input: {
+      flex: 1,
+      minWidth: "120px",
+      border: "none",
+      outline: "none",
+      padding: "0.25rem",
+      fontSize: "1rem"
+    },
+    token: {
+      display: "inline-flex",
+      alignItems: "center",
+      backgroundColor: "#e2e8f0",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.25rem",
+      padding: "0.125rem 0.5rem",
+      fontSize: "0.875rem",
+      color: "#0f172a"
+    },
+    removeButton: {
+      marginLeft: "0.25rem",
+      border: "none",
+      background: "none",
+      cursor: "pointer",
+      padding: "0 0.125rem",
+      fontSize: "1rem",
+      lineHeight: 1,
+      color: "#64748b"
+    },
+    listbox: {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      right: 0,
+      maxHeight: "200px",
+      overflowY: "auto",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.375rem",
+      backgroundColor: "white",
+      zIndex: 10,
+      marginTop: "0.25rem",
+      padding: 0,
+      listStyle: "none",
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+    },
+    option: {
+      padding: "0.5rem 0.75rem",
+      cursor: "pointer"
+    },
+    activeOption: {
+      backgroundColor: "#e2e8f0",
+      color: "#0f172a"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: containerRef, className, style: styles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { id: labelId, htmlFor: id, style: styles.label, children: label }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { id: descriptionId, style: styles.description, children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: styles.inputWrapper, children: [
+      selected.map((value) => {
+        const option = options.find((o) => o.value === value);
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: styles.token, children: [
+          option?.label || value,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "button",
+            {
+              type: "button",
+              style: styles.removeButton,
+              onClick: () => handleRemove(value),
+              "aria-label": `Remove ${option?.label || value}`,
+              children: "\xD7"
+            }
+          )
+        ] }, value);
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          id,
+          type: "text",
+          role: "combobox",
+          "aria-autocomplete": "list",
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          "aria-controls": listboxId,
+          "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : void 0,
+          "aria-invalid": !!error,
+          value: inputValue,
+          onChange: (e) => {
+            setInputValue(e.target.value);
+            setIsOpen(true);
+            setFocusedIndex(-1);
+          },
+          onKeyDown: handleKeyDown,
+          onFocus: () => setIsOpen(true),
+          placeholder: selected.length === 0 ? placeholder : "",
+          style: styles.input
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { id: errorId, style: styles.error, role: "alert", children: error }),
+    isOpen && availableOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        "aria-label": label,
+        style: styles.listbox,
+        children: availableOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "li",
+          {
+            id: `${id}-option-${index}`,
+            role: "option",
+            "aria-selected": false,
+            onClick: () => handleSelect(option.value),
+            onMouseEnter: () => setFocusedIndex(index),
+            style: {
+              ...styles.option,
+              ...focusedIndex === index ? styles.activeOption : {}
+            },
+            children: option.label
+          },
+          option.value
+        ))
+      }
+    )
+  ] });
+};
+
+// src/DataTable/DataTable.tsx
+var import_react20 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function DataTable({
+  data,
+  columns,
+  caption,
+  className = ""
+}) {
+  const [sortConfig, setSortConfig] = (0, import_react20.useState)({ key: null, direction: "ascending" });
+  const handleSort = (key) => {
+    let direction = "ascending";
+    if (sortConfig.key === key && sortConfig.direction === "ascending") {
+      direction = "descending";
+    }
+    setSortConfig({ key, direction });
+  };
+  const sortedData = (0, import_react20.useMemo)(() => {
+    if (!sortConfig.key) return data;
+    return [...data].sort((a, b) => {
+      const aValue = a[sortConfig.key];
+      const bValue = b[sortConfig.key];
+      if (aValue < bValue) {
+        return sortConfig.direction === "ascending" ? -1 : 1;
+      }
+      if (aValue > bValue) {
+        return sortConfig.direction === "ascending" ? 1 : -1;
+      }
+      return 0;
+    });
+  }, [data, sortConfig]);
+  const styles = {
+    table: {
+      width: "100%",
+      borderCollapse: "collapse",
+      fontFamily: "system-ui, -apple-system, sans-serif",
+      marginBottom: "1rem"
+    },
+    caption: {
+      textAlign: "left",
+      fontWeight: "bold",
+      fontSize: "1.25rem",
+      marginBottom: "0.75rem",
+      color: "#1e293b"
+    },
+    th: {
+      textAlign: "left",
+      borderBottom: "2px solid #e2e8f0",
+      padding: "0.75rem",
+      fontWeight: 600,
+      color: "#475569",
+      backgroundColor: "#f8fafc"
+    },
+    td: {
+      padding: "0.75rem",
+      borderBottom: "1px solid #e2e8f0",
+      color: "#334155"
+    },
+    sortButton: {
+      background: "none",
+      border: "none",
+      font: "inherit",
+      fontWeight: 600,
+      cursor: "pointer",
+      padding: 0,
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "0.5rem",
+      color: "inherit"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className, style: { overflowX: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("table", { style: styles.table, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("caption", { style: styles.caption, children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "th",
+      {
+        scope: "col",
+        "aria-sort": sortConfig.key === column.accessor ? sortConfig.direction : void 0,
+        style: styles.th,
+        children: column.sortable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleSort(column.accessor),
+            style: styles.sortButton,
+            children: [
+              column.header,
+              sortConfig.key === column.accessor ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": "true", children: sortConfig.direction === "ascending" ? "\u25B2" : "\u25BC" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": "true", style: { opacity: 0.3 }, children: "\u2195" })
+            ]
+          }
+        ) : column.header
+      },
+      index
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { children: sortedData.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: columns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { style: styles.td, children: column.render ? column.render(row) : String(row[column.accessor]) }, colIndex)) }, rowIndex)) })
+  ] }) });
+}
+
+// src/Pagination/Pagination.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  ariaLabel = "Pagination",
+  className = ""
+}) => {
+  if (totalPages <= 1) return null;
+  const getPageNumbers = () => {
+    const pages2 = [];
+    pages2.push(1);
+    const start = Math.max(2, currentPage - 1);
+    const end = Math.min(totalPages - 1, currentPage + 1);
+    if (start > 2) pages2.push("...");
+    for (let i = start; i <= end; i++) {
+      pages2.push(i);
+    }
+    if (end < totalPages - 1) pages2.push("...");
+    if (totalPages > 1) {
+      pages2.push(totalPages);
+    }
+    return Array.from(new Set(pages2));
+  };
+  const pages = getPageNumbers();
+  const styles = {
+    nav: {
+      display: "flex",
+      justifyContent: "center",
+      marginTop: "1.5rem",
+      marginBottom: "1.5rem",
+      fontFamily: "system-ui, -apple-system, sans-serif"
+    },
+    list: {
+      display: "flex",
+      listStyle: "none",
+      padding: 0,
+      margin: 0,
+      gap: "0.5rem",
+      alignItems: "center"
+    },
+    button: {
+      minWidth: "2.5rem",
+      height: "2.5rem",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      border: "1px solid #cbd5e1",
+      backgroundColor: "white",
+      borderRadius: "0.375rem",
+      cursor: "pointer",
+      fontSize: "1rem",
+      color: "#1e293b",
+      padding: "0 0.75rem",
+      transition: "all 0.2s"
+    },
+    activeButton: {
+      backgroundColor: "#2563eb",
+      // Blue-600
+      color: "white",
+      borderColor: "#2563eb",
+      fontWeight: "bold"
+    },
+    disabledButton: {
+      opacity: 0.5,
+      cursor: "not-allowed",
+      backgroundColor: "#f1f5f9"
+    },
+    ellipsis: {
+      color: "#64748b",
+      padding: "0 0.5rem"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("nav", { "aria-label": ariaLabel, className, style: styles.nav, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("ul", { style: styles.list, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onPageChange(currentPage - 1),
+        disabled: currentPage === 1,
+        "aria-disabled": currentPage === 1,
+        "aria-label": "Previous page",
+        style: {
+          ...styles.button,
+          ...currentPage === 1 ? styles.disabledButton : {}
+        },
+        children: "\u2190"
+      }
+    ) }),
+    pages.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: styles.ellipsis, children: "\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onPageChange(page),
+        "aria-current": currentPage === page ? "page" : void 0,
+        "aria-label": `Page ${page}`,
+        style: {
+          ...styles.button,
+          ...currentPage === page ? styles.activeButton : {}
+        },
+        children: page
+      }
+    ) }, `${page}-${index}`)),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onPageChange(currentPage + 1),
+        disabled: currentPage === totalPages,
+        "aria-disabled": currentPage === totalPages,
+        "aria-label": "Next page",
+        style: {
+          ...styles.button,
+          ...currentPage === totalPages ? styles.disabledButton : {}
+        },
+        children: "\u2192"
+      }
+    ) })
+  ] }) });
+};
+
+// src/Card/Card.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Card = ({
+  title,
+  href,
+  children,
+  className = "",
+  as: Component = "div"
+}) => {
+  const styles = {
+    card: {
+      position: "relative",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.5rem",
+      padding: "1.5rem",
+      backgroundColor: "white",
+      boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+      transition: "box-shadow 0.2s, transform 0.2s",
+      fontFamily: "system-ui, -apple-system, sans-serif"
+    },
+    title: {
+      marginTop: 0,
+      marginBottom: "0.75rem",
+      fontSize: "1.25rem",
+      fontWeight: 600,
+      color: "#1e293b"
+    },
+    link: {
+      textDecoration: "none",
+      color: "inherit"
+    },
+    stretchedLink: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      zIndex: 1,
+      content: "''"
+    },
+    content: {
+      color: "#475569",
+      lineHeight: 1.5
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Component, { className, style: styles.card, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { style: styles.title, children: href ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("a", { href, style: styles.link, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: styles.stretchedLink, "aria-hidden": "true" }),
+      title
+    ] }) : title }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: styles.content, children })
+  ] });
+};
+
+// src/TreeView/TreeView.tsx
+var import_react21 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var TreeView = ({
+  data,
+  ariaLabel = "Tree View",
+  className = "",
+  onSelect
+}) => {
+  const [expandedIds, setExpandedIds] = (0, import_react21.useState)(/* @__PURE__ */ new Set());
+  const [selectedId, setSelectedId] = (0, import_react21.useState)(null);
+  const [focusedId, setFocusedId] = (0, import_react21.useState)(data.length > 0 ? data[0].id : null);
+  const nodeRefs = (0, import_react21.useRef)(/* @__PURE__ */ new Map());
+  const toggleExpand = (nodeId) => {
+    const newExpanded = new Set(expandedIds);
+    if (newExpanded.has(nodeId)) {
+      newExpanded.delete(nodeId);
+    } else {
+      newExpanded.add(nodeId);
+    }
+    setExpandedIds(newExpanded);
+  };
+  const getVisibleNodes = (nodes) => {
+    let visible = [];
+    for (const node of nodes) {
+      visible.push(node);
+      if (node.children && expandedIds.has(node.id)) {
+        visible = visible.concat(getVisibleNodes(node.children));
+      }
+    }
+    return visible;
+  };
+  const handleKeyDown = (e, node) => {
+    const visibleNodes = getVisibleNodes(data);
+    const currentIndex = visibleNodes.findIndex((n) => n.id === node.id);
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        if (currentIndex < visibleNodes.length - 1) {
+          const nextNode = visibleNodes[currentIndex + 1];
+          setFocusedId(nextNode.id);
+        }
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        if (currentIndex > 0) {
+          const prevNode = visibleNodes[currentIndex - 1];
+          setFocusedId(prevNode.id);
+        }
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        if (node.children && !expandedIds.has(node.id)) {
+          toggleExpand(node.id);
+        } else if (node.children && expandedIds.has(node.id)) {
+          if (currentIndex < visibleNodes.length - 1) {
+            setFocusedId(visibleNodes[currentIndex + 1].id);
+          }
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        if (node.children && expandedIds.has(node.id)) {
+          toggleExpand(node.id);
+        } else {
+          const parent = findParent(data, node.id);
+          if (parent) {
+            setFocusedId(parent.id);
+          }
+        }
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        if (visibleNodes.length > 0) {
+          setFocusedId(visibleNodes[0].id);
+        }
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        if (visibleNodes.length > 0) {
+          setFocusedId(visibleNodes[visibleNodes.length - 1].id);
+        }
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        if (onSelect) onSelect(node);
+        setSelectedId(node.id);
+        if (node.children) {
+          toggleExpand(node.id);
+        }
+        break;
+      }
+    }
+  };
+  const findParent = (nodes, childId, parent = null) => {
+    for (const node of nodes) {
+      if (node.id === childId) return parent;
+      if (node.children) {
+        const found = findParent(node.children, childId, node);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  (0, import_react21.useEffect)(() => {
+    if (focusedId) {
+      const el = nodeRefs.current.get(focusedId);
+      if (el) el.focus();
+    }
+  }, [focusedId]);
+  const renderTree = (nodes, level = 1) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { role: "group", style: { paddingLeft: level > 1 ? "1.5rem" : 0, listStyle: "none", margin: 0 }, children: nodes.map((node) => {
+      const isExpanded = expandedIds.has(node.id);
+      const hasChildren = node.children && node.children.length > 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { role: "none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          "div",
+          {
+            ref: (el) => {
+              if (el) nodeRefs.current.set(node.id, el);
+              else nodeRefs.current.delete(node.id);
+            },
+            role: "treeitem",
+            "aria-expanded": hasChildren ? isExpanded : void 0,
+            "aria-selected": selectedId === node.id,
+            "aria-level": level,
+            tabIndex: focusedId === node.id ? 0 : -1,
+            onClick: () => {
+              setFocusedId(node.id);
+              setSelectedId(node.id);
+              if (hasChildren) toggleExpand(node.id);
+              if (onSelect) onSelect(node);
+            },
+            onKeyDown: (e) => handleKeyDown(e, node),
+            style: {
+              cursor: "pointer",
+              padding: "0.25rem 0.5rem",
+              borderRadius: "0.25rem",
+              outline: "none",
+              backgroundColor: selectedId === node.id ? "#e0f2fe" : "transparent",
+              // Sky-100
+              color: selectedId === node.id ? "#0369a1" : "inherit",
+              // Sky-700
+              border: focusedId === node.id ? "1px solid #0ea5e9" : "1px solid transparent",
+              // Sky-500
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem"
+            },
+            children: [
+              hasChildren && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontSize: "0.75rem", color: "#94a3b8" }, children: isExpanded ? "\u25BC" : "\u25B6" }),
+              !hasChildren && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { width: "0.75rem" } }),
+              node.label
+            ]
+          }
+        ),
+        hasChildren && isExpanded && renderTree(node.children, level + 1)
+      ] }, node.id);
+    }) });
+  };
+  const styles = {
+    container: {
+      fontFamily: "system-ui, -apple-system, sans-serif",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.375rem",
+      padding: "1rem",
+      backgroundColor: "white"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className, style: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { role: "tree", "aria-label": ariaLabel, style: { listStyle: "none", padding: 0, margin: 0 }, children: data.map((node) => {
+    const isExpanded = expandedIds.has(node.id);
+    const hasChildren = node.children && node.children.length > 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { role: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        "div",
+        {
+          ref: (el) => {
+            if (el) nodeRefs.current.set(node.id, el);
+            else nodeRefs.current.delete(node.id);
+          },
+          role: "treeitem",
+          "aria-expanded": hasChildren ? isExpanded : void 0,
+          "aria-selected": selectedId === node.id,
+          "aria-level": 1,
+          tabIndex: focusedId === node.id ? 0 : -1,
+          onClick: () => {
+            setFocusedId(node.id);
+            setSelectedId(node.id);
+            if (hasChildren) toggleExpand(node.id);
+            if (onSelect) onSelect(node);
+          },
+          onKeyDown: (e) => handleKeyDown(e, node),
+          style: {
+            cursor: "pointer",
+            padding: "0.25rem 0.5rem",
+            borderRadius: "0.25rem",
+            outline: "none",
+            backgroundColor: selectedId === node.id ? "#e0f2fe" : "transparent",
+            color: selectedId === node.id ? "#0369a1" : "inherit",
+            border: focusedId === node.id ? "1px solid #0ea5e9" : "1px solid transparent",
+            display: "flex",
+            alignItems: "center",
+            gap: "0.5rem"
+          },
+          children: [
+            hasChildren && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontSize: "0.75rem", color: "#94a3b8" }, children: isExpanded ? "\u25BC" : "\u25B6" }),
+            !hasChildren && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { width: "0.75rem" } }),
+            node.label
+          ]
+        }
+      ),
+      hasChildren && isExpanded && renderTree(node.children, 2)
+    ] }, node.id);
+  }) }) });
+};
+
+// src/LiveRegion/LiveRegion.tsx
+var import_react22 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var LiveRegion = ({
+  message,
+  ariaLive = "polite",
+  clearAfter
+}) => {
+  const [announcement, setAnnouncement] = (0, import_react22.useState)("");
+  const timeoutRef = (0, import_react22.useRef)();
+  (0, import_react22.useEffect)(() => {
+    if (message) {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      setAnnouncement(message);
+      if (clearAfter) {
+        timeoutRef.current = setTimeout(() => {
+          setAnnouncement("");
+        }, clearAfter);
+      }
+    }
+  }, [message, clearAfter]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "div",
+    {
+      "aria-live": ariaLive,
+      "aria-atomic": "true",
+      style: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        border: 0
+      },
+      children: announcement
+    }
+  );
+};
+
+// src/ProgressBar/ProgressBar.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var ProgressBar = ({
+  value,
+  min = 0,
+  max = 100,
+  label,
+  showValueLabel = false,
+  valueText,
+  variant = "primary",
+  className = ""
+}) => {
+  const clampedValue = Math.min(Math.max(value, min), max);
+  const percentage = Math.round((clampedValue - min) / (max - min) * 100);
+  const getVariantColor = () => {
+    switch (variant) {
+      case "success":
+        return "#10B981";
+      // Green
+      case "warning":
+        return "#F59E0B";
+      // Amber
+      case "danger":
+        return "#EF4444";
+      // Red
+      default:
+        return "#2563EB";
+    }
+  };
+  const styles = {
+    container: {
+      width: "100%",
+      backgroundColor: "#E5E7EB",
+      // Gray-200
+      borderRadius: "9999px",
+      height: "1rem",
+      overflow: "hidden",
+      position: "relative"
+    },
+    bar: {
+      height: "100%",
+      backgroundColor: getVariantColor(),
+      width: `${percentage}%`,
+      transition: "width 0.3s ease-in-out",
+      borderRadius: "9999px"
+    },
+    labelFn: {
+      fontSize: "0.875rem",
+      color: "#374151",
+      marginBottom: "0.25rem",
+      display: "flex",
+      justifyContent: "space-between"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: `hd-progress-root ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: styles.labelFn, id: `progress-label-${label.replace(/\s+/g, "-")}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hd-progress-label-text", children: label }),
+      showValueLabel && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { children: [
+        percentage,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": clampedValue,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-label": label,
+        "aria-valuetext": valueText,
+        style: styles.container,
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: styles.bar })
+      }
+    )
+  ] });
+};
+
+// src/Skeleton/Skeleton.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Skeleton = ({
+  variant = "text",
+  width,
+  height,
+  animation = "pulse",
+  className = ""
+}) => {
+  const baseStyle = {
+    backgroundColor: "#E5E7EB",
+    // Gray-200
+    borderRadius: variant === "circular" ? "50%" : "4px",
+    display: "inline-block",
+    width: width ?? (variant === "text" ? "100%" : void 0),
+    height: height ?? (variant === "text" ? "1em" : void 0)
+  };
+  const getAnimationClass = () => {
+    switch (animation) {
+      case "pulse":
+        return "hd-skeleton-pulse";
+      case "wave":
+        return "hd-skeleton-wave";
+      default:
+        return "";
+    }
+  };
+  const styles = `
+    @keyframes hd-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: .5; }
+    }
+    @keyframes hd-wave {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
+    }
+    .hd-skeleton-pulse {
+      animation: hd-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+    .hd-skeleton-wave {
+      position: relative;
+      overflow: hidden;
+    }
+    .hd-skeleton-wave::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
+      animation: hd-wave 1.6s linear infinite;
+    }
+  `;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("style", { children: styles }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "span",
+      {
+        className: `hd-skeleton ${getAnimationClass()} ${className}`,
+        style: baseStyle,
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+};
+
+// src/HelpText/HelpText.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var HelpText = ({
+  id,
+  children,
+  variant = "default",
+  showIcon = false,
+  className = ""
+}) => {
+  const getColor = () => {
+    switch (variant) {
+      case "error":
+        return "#EF4444";
+      // Red-500
+      case "valid":
+        return "#10B981";
+      // Green-500
+      default:
+        return "#6B7280";
+    }
+  };
+  const style = {
+    fontSize: "0.875rem",
+    marginTop: "0.25rem",
+    color: getColor(),
+    display: "flex",
+    alignItems: "center",
+    gap: "0.25rem"
+  };
+  const Icon = () => {
+    if (!showIcon) return null;
+    if (variant === "error") return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react4.AlertCircle, { size: 14 });
+    if (variant === "default") return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react4.Info, { size: 14 });
+    return null;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "div",
+    {
+      id,
+      className: `hd-help-text ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children })
+      ]
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AccessibilityStatement,
   Accordion,
   AccordionContent,
   AccordionItem,
@@ -1242,17 +3101,28 @@ Heading.displayName = "Heading";
   BreadcrumbItem,
   Breadcrumbs,
   Button,
+  Card,
   Checkbox,
+  Combobox,
+  DataTable,
+  DatePicker,
   Dialog,
+  ErrorSummary,
   FormField,
   Heading,
+  HelpText,
+  LiveRegion,
   Modal,
+  MultiSelect,
   NavigationMenu,
+  Pagination,
+  ProgressBar,
   RadioGroup,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
+  Skeleton,
   SkipLink,
   Switch,
   TabTrigger,
@@ -1264,5 +3134,6 @@ Heading.displayName = "Heading";
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  TreeView,
   useToast
 });