@holmdigital/components 1.2.4 → 2.0.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,1922 @@ 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 ENFORCEMENT_BODIES = {
+  SE: "Myndigheten f\xF6r digital f\xF6rvaltning (Digg)",
+  NO: "Digitaliseringsdirektoratet (uutilsynet)",
+  DK: "Digitaliseringsstyrelsen",
+  FI: "Regionf\xF6rvaltningsverket i S\xF6dra Finland (AVI)",
+  NL: "Ministerie van Binnenlandse Zaken en Koninkrijksrelaties (BZK)",
+  DE: "BFIT-Bund (\xDCberwachungsstelle des Bundes f\xFCr Barrierefreiheit von Informationstechnik)",
+  FR: "Direction interminist\xE9rielle du num\xE9rique (DINUM)",
+  ES: "Ministerio para la Transformaci\xF3n Digital y de la Funci\xF3n P\xFAblica",
+  IE: "National Disability Authority (NDA)",
+  GB: "Equality and Human Rights Commission (EHRC)",
+  US: "Department of Justice (Civil Rights Division)",
+  CA: "Accessibility Commissioner (Canadian Human Rights Commission)",
+  EU: "Europeiska kommissionen (DG CNECT)"
+};
+var TEMPLATES = {
+  sv: `Tillg\xE4nglighet f\xF6r {<webbplats>}
+
+{<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.
+
+## Hur tillg\xE4nglig \xE4r webbplatsen?
+
+{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.}
+
+## Vad kan du g\xF6ra om du inte kan anv\xE4nda delar av webbplatsen?
+
+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.
+
+[Svarstiden \xE4r normalt {<svarstid>}.]
+
+[Du kan ocks\xE5 kontakta oss p\xE5 f\xF6ljande s\xE4tt:
+
+* skicka e-post till {<e-postadress>}
+* ring {<telefonnummer>}]
+
+## Rapportera brister i webbplatsens tillg\xE4nglighet
+
+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.
+
+## Tillsyn
+
+{<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.
+
+Du 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.
+
+## Teknisk information om webbplatsens tillg\xE4nglighet
+
+{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.}
+
+## Inneh\xE5ll som inte \xE4r tillg\xE4ngligt
+
+Det inneh\xE5ll som beskrivs nedan \xE4r p\xE5 ett eller annat s\xE4tt inte helt tillg\xE4ngligt.
+
+[
+### Bristande f\xF6renlighet med lagkraven
+{<brister>}
+]
+
+## Hur vi testat webbplatsen
+
+{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.}
+
+Senaste bed\xF6mningen gjordes den {<bed\xF6mningsdatum>}.
+
+[Granskningsmetod: {<metod>}]
+
+Webbplatsen publicerades den {<publiceringsdatum>}.
+
+Redog\xF6relsen uppdaterades senast den {<uppdateringsdatum>}.`,
+  en: `Accessibility of {<website>}
+
+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.
+
+## How accessible is the website?
+
+{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.}
+
+## What to do if you can\u2019t access parts of this website?
+
+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.
+
+[Our normal response time is {<response time>}.]
+
+[You can also contact us in the following ways:
+
+* email {<email address>}
+* call {<telephone number>}]
+
+## Reporting accessibility problems with this website
+
+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.
+
+## Enforcement procedure
+
+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>}.
+
+You 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.
+
+## Technical information about this website\u2019s accessibility
+
+{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.}
+
+## Non-accessible content
+
+The content described below is, in one way or another, not fully accessible.
+
+[
+### Non-compliance with the accessibility regulations
+
+{<issues>}
+]
+
+## How we tested this website
+
+{We have performed a self-assessment (internal testing) of {<website>}./{<third party>} has tested {<website>}./We have estimated the accessibility without testing.}
+
+The last assessment was made on {<assessment date>}.
+
+[Assessment method: {<method>}]
+
+The website was published on {<publish date>}.
+
+The statement was last updated on {<update date>}.`
+};
+var formatDiggDate = (date, locale) => {
+  return date.toLocaleDateString(locale === "sv" ? "sv-SE" : "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 = ENFORCEMENT_BODIES[country] || 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 = "\n\n" + nonComplianceItems.map((item) => `* ${item}`).join("\n");
+  } else {
+    issuesContent = lang === "sv" ? "Inga k\xE4nda brister." : "No known issues.";
+  }
+  replacements["{<brister>}"] = issuesContent;
+  replacements["{<issues>}"] = issuesContent;
+  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;
+    });
+    text = text.replace(/\r\n/g, "\n");
+    const sections = text.split("\n\n");
+    const sectionNodes = sections.map((block, i) => {
+      const trimmed = block.trim();
+      if (!trimmed) return null;
+      let IconNode = null;
+      if (trimmed.includes("Hur tillg\xE4nglig") || trimmed.includes("How accessible")) {
+        IconNode = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(EyeIcon, {}) });
+      } else if (trimmed.includes("Vad kan du g\xF6ra") || trimmed.includes("What to do")) {
+        IconNode = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HelpCircleIcon, {}) });
+      } else if (trimmed.includes("Rapportera brister") || trimmed.includes("Reporting accessibility")) {
+        IconNode = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertOctagonIcon, {}) });
+      } else if (trimmed.includes("Tillsyn") || trimmed.includes("Enforcement procedure")) {
+        IconNode = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GavelIcon, {}) });
+      } else if (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 (trimmed.includes("Hur vi testat") || trimmed.includes("How we tested")) {
+        IconNode = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckCircleIcon, {}) });
+      }
+      if (trimmed.startsWith("## ")) {
+        const title = trimmed.replace("## ", "");
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("h2", { style: styles.sectionTitle, children: [
+          IconNode,
+          title
+        ] }, i);
+      }
+      if (trimmed.startsWith("### ")) {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { ...styles.sectionTitle, fontSize: "1.4rem" }, children: trimmed.replace("### ", "") }, i);
+      }
+      if (trimmed.includes("* ") || trimmed.includes("\u2022 ")) {
+        const lines = trimmed.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;
+          const isListItem = line.trim().startsWith("*") || line.trim().startsWith("\u2022") || line.trim().startsWith("-");
+          if (!isListItem) {
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: styles.paragraph, children: line }, `p-${li}`);
+          }
+          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);
+      }
+      const isCardSection = trimmed.includes("e-post") || trimmed.includes("email") || trimmed.includes("ring ") || trimmed.includes("call ");
+      if (isCardSection) {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles.card, children: trimmed }, i);
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: styles.paragraph, children: trimmed }, i);
+    });
+    return sectionNodes;
+  };
+  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.jsx)("div", { className: "statement-content", children: (() => {
+          const parts = template.split("\n");
+          const titleRaw = parts[0];
+          const bodyRaw = parts.slice(1).join("\n");
+          let title = titleRaw.replace("{<webbplats>}", organizationName).replace("{<website>}", organizationName);
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", { id: "a11y-statement-title", style: styles.mainHeading, children: title }),
+            renderTemplate(bodyRaw)
+          ] });
+        })() }),
+        /* @__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 +3169,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 +3202,6 @@ Heading.displayName = "Heading";
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  TreeView,
   useToast
 });