@holmdigital/components 2.1.0 → 2.1.2

package/dist/AccessibilityStatement/AccessibilityStatement.js

@@ -105,7 +105,8 @@ var AccessibilityStatement = ({
   badgeUrl,
   publishDate
 }) => {
-  const lang = locale === "sv" ? "sv" : "en";
+  const supportedLocales = { sv: "sv", no: "no", nb: "no" };
+  const lang = supportedLocales[locale] ?? "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;
@@ -196,15 +197,16 @@ var AccessibilityStatement = ({
       } 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_runtime.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckCircleIcon, {}) });
       }
+      const SectionHeader = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", { style: styles.sectionTitle, children: [
+        IconNode,
+        section.title
+      ] }, `h2-${i}`);
       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_runtime.jsxs)("h2", { style: styles.sectionTitle, children: [
-            IconNode,
-            title
-          ] }, `${i}-${bi}`);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: styles.sectionTitle, children: title }, `${i}-${bi}`);
         }
         if (blockTrimmed.startsWith("### ")) {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { ...styles.sectionTitle, fontSize: "1.4rem" }, children: blockTrimmed.replace("### ", "") }, `${i}-${bi}`);
@@ -226,7 +228,10 @@ var AccessibilityStatement = ({
         }
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.paragraph, children: blockTrimmed }, `${i}-${bi}`);
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { style: styles.section, children: blocks }, i);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { style: styles.section, children: [
+        SectionHeader,
+        blocks
+      ] }, i);
     });
   };
   const statementTools = (0, import_standards.getStatementToolsByCountry)(country);
@@ -243,152 +248,168 @@ var AccessibilityStatement = ({
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
-      marginBottom: "4.5rem",
-      paddingBottom: "2rem",
-      borderBottom: "1px solid #f1f5f9"
+      marginBottom: "5rem",
+      paddingBottom: "2.5rem",
+      borderBottom: "1px solid #f8fafc"
     },
     logoContainer: {
       display: "flex",
       alignItems: "center",
       textDecoration: "none",
-      marginRight: "1.5rem"
+      marginRight: "2rem"
     },
     divider: {
-      height: "2.5rem",
+      height: "2rem",
       width: "1px",
       backgroundColor: "#e2e8f0",
-      marginRight: "1.5rem",
+      marginRight: "2rem",
       display: "block"
     },
     websiteContainer: {
       display: "flex",
       alignItems: "center",
-      gap: "0.75rem",
+      gap: "0.625rem",
       textDecoration: "none",
-      color: "#475569",
-      // Slate 600
-      fontWeight: 600,
-      fontSize: "1rem",
+      color: "#64748b",
+      // Slate 500
+      fontWeight: 500,
+      fontSize: "0.925rem",
       padding: "0.5rem 1rem",
       backgroundColor: "#f8fafc",
-      borderRadius: "0.75rem",
+      borderRadius: "100px",
       border: "1px solid #f1f5f9"
     },
     container: {
-      maxWidth: "900px",
-      margin: "2rem auto",
-      padding: "4.5rem",
+      maxWidth: "1000px",
+      margin: "4rem auto",
+      padding: "6rem",
       backgroundColor: "#ffffff",
-      borderRadius: "24px",
-      boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.05)",
+      borderRadius: "32px",
+      boxShadow: "0 40px 100px -20px rgba(15, 23, 42, 0.08)",
       border: "1px solid #f1f5f9",
       fontFamily: '"Inter", system-ui, -apple-system, sans-serif',
       color: "#1e293b",
       // Slate 800
-      lineHeight: 1.75,
-      fontSize: "1.125rem"
+      lineHeight: 1.8,
+      fontSize: "1.125rem",
+      position: "relative",
+      overflow: "hidden"
     },
     mainHeading: {
-      fontSize: "3rem",
-      fontWeight: 900,
-      color: "#082f49",
-      // Primary 950
+      fontSize: "3.5rem",
+      fontWeight: 800,
+      color: "#0f172a",
+      // Slate 900
       marginTop: "0",
-      marginBottom: "1rem",
-      letterSpacing: "-0.04em",
-      lineHeight: 1.1
+      marginBottom: "1.5rem",
+      letterSpacing: "-0.05em",
+      lineHeight: 1.05
     },
     metaData: {
       color: "#64748b",
       // Slate 500
       fontSize: "0.925rem",
-      marginBottom: "4rem",
+      marginBottom: "5rem",
       fontWeight: 500,
       display: "flex",
-      gap: "1.5rem"
+      gap: "2rem",
+      padding: "1.25rem 2rem",
+      backgroundColor: "#f8fafc",
+      borderRadius: "1rem",
+      border: "1px solid #f1f5f9",
+      width: "fit-content"
     },
     section: {
-      marginBottom: "4.5rem"
+      marginBottom: "6rem"
     },
     sectionTitle: {
-      fontSize: "1.75rem",
-      fontWeight: 800,
-      color: "#082f49",
-      // Primary 950
-      marginBottom: "1.5rem",
+      fontSize: "1.875rem",
+      fontWeight: 700,
+      color: "#0f172a",
+      marginBottom: "2rem",
       marginTop: 0,
-      letterSpacing: "-0.025em",
+      letterSpacing: "-0.03em",
       display: "flex",
       alignItems: "center",
-      gap: "0.75rem"
+      gap: "1rem"
     },
     card: {
       padding: "2.5rem",
-      backgroundColor: "#f0f9ff",
-      // Primary 50
+      backgroundColor: "#ffffff",
       borderRadius: "1.5rem",
-      border: "1px solid #e0f2fe",
-      marginBottom: "2.5rem"
+      border: "1px solid #f1f5f9",
+      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.02)",
+      marginBottom: "2.5rem",
+      display: "flex",
+      flexDirection: "column",
+      gap: "1rem"
     },
     paragraph: {
-      marginBottom: "1.5rem",
-      maxWidth: "65ch",
-      whiteSpace: "pre-line"
+      marginBottom: "1.75rem",
+      maxWidth: "70ch",
+      whiteSpace: "pre-line",
+      color: "#475569"
+      // Slate 600
     },
     link: {
-      color: "#0284c7",
-      // Primary 600
+      color: "#0ea5e9",
+      // Primary 500
       textDecoration: "none",
       fontWeight: 600,
-      borderBottom: "2px solid #e0f2fe",
-      transition: "border-color 0.2s",
+      borderBottom: "1.5px solid rgba(14, 165, 233, 0.2)",
+      transition: "all 0.2s",
       cursor: "pointer"
     },
     list: {
       listStyleType: "none",
       paddingLeft: 0,
-      marginBottom: "1.5rem"
+      marginBottom: "2rem",
+      display: "flex",
+      flexDirection: "column",
+      gap: "1rem"
     },
     listItem: {
-      marginBottom: "0.75rem",
-      paddingLeft: "1.75rem",
+      padding: "1.25rem 1.75rem 1.25rem 3.5rem",
       position: "relative",
-      display: "block"
+      backgroundColor: "#f8fafc",
+      borderRadius: "1rem",
+      border: "1px solid #f1f5f9",
+      fontSize: "1rem",
+      color: "#334155"
     },
     listBullet: {
       position: "absolute",
-      left: 0,
-      top: "0.6em",
-      width: "0.5rem",
-      height: "0.5rem",
-      borderRadius: "50%",
-      backgroundColor: "#0ea5e9"
-      // Primary 500
+      left: "1.5rem",
+      top: "50%",
+      transform: "translateY(-50%)",
+      width: "0.75rem",
+      height: "0.75rem",
+      borderRadius: "4px",
+      backgroundColor: "#0ea5e9",
+      opacity: 0.8
     },
     statusBadge: {
       display: "inline-flex",
       alignItems: "center",
-      padding: "0.375rem 1rem",
-      borderRadius: "9999px",
+      padding: "0.5rem 1.25rem",
+      borderRadius: "100px",
       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"
+      fontWeight: 600,
+      backgroundColor: complianceLevel === "full" ? "#f0fdf4" : complianceLevel === "partial" ? "#fffbeb" : "#fef2f2",
+      color: complianceLevel === "full" ? "#166534" : complianceLevel === "partial" ? "#92400e" : "#991b1b",
+      border: `1px solid ${complianceLevel === "full" ? "#dcfce7" : complianceLevel === "partial" ? "#fef3c7" : "#fee2e2"}`,
+      letterSpacing: "0.01em"
     },
     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)",
+      width: "2.75rem",
+      height: "2.75rem",
+      borderRadius: "12px",
+      backgroundColor: "#f8fafc",
       border: "1px solid #f1f5f9",
-      color: "#0284c7"
+      color: "#0ea5e9"
     }
   };
   const Logo = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
@@ -463,8 +484,23 @@ var AccessibilityStatement = ({
           badgeUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: badgeUrl, alt: "Accessibility Badge", style: { height: "1.5rem", width: "auto" } }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "statement-content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { id: "a11y-statement-title", style: styles.mainHeading, children: renderTemplate(template.title) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.paragraph, children: renderTemplate(template.intro) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { style: { marginBottom: "4rem" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { id: "a11y-statement-title", style: styles.mainHeading, children: renderTemplate(template.title) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.metaData, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                lang === "sv" ? "Status:" : "Status:",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.statusBadge, children: complianceLevel === "full" ? lang === "sv" ? "Fullt f\xF6renlig" : "Fully compliant" : complianceLevel === "partial" ? lang === "sv" ? "Delvis f\xF6renlig" : "Partially compliant" : lang === "sv" ? "Ej f\xF6renlig" : "Non-compliant" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#e2e8f0" }, children: "|" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                lang === "sv" ? "Uppdaterad:" : "Updated:",
+                " ",
+                d(lastReviewDate)
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { ...styles.paragraph, fontSize: "1.25rem", color: "#1e293b", fontWeight: 500, marginBottom: "4rem" }, children: renderTemplate(template.intro) }),
           renderSections(template.sections)
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("footer", { style: { marginTop: "3rem", borderTop: "1px solid #e2e8f0", paddingTop: "1.5rem", fontSize: "0.875rem", color: "#64748b" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [

package/dist/AccessibilityStatement/AccessibilityStatement.mjs

@@ -1,6 +1,6 @@
 import {
   AccessibilityStatement
-} from "../chunk-OFTOD72G.mjs";
+} from "../chunk-LBRVCJHL.mjs";
 export {
   AccessibilityStatement
 };

package/dist/FormField/FormField.js

@@ -25,6 +25,9 @@ __export(FormField_exports, {
 module.exports = __toCommonJS(FormField_exports);
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+function sanitizeId(id) {
+  return id.replaceAll(":", "");
+}
 var FormField = (0, import_react.forwardRef)(
   ({
     label,
@@ -36,7 +39,7 @@ var FormField = (0, import_react.forwardRef)(
     style,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react.useId)();
+    const generatedId = sanitizeId((0, import_react.useId)());
     const inputId = id || `input-${generatedId}`;
     const helpTextId = `help-${generatedId}`;
     const errorId = `error-${generatedId}`;
@@ -54,32 +57,33 @@ var FormField = (0, import_react.forwardRef)(
     const labelStyle = {
       marginBottom: "0.5rem",
       fontWeight: "600",
-      color: "#333"
+      color: "#1e293b"
     };
     const inputStyle = {
       padding: "0.5rem",
       borderRadius: "4px",
-      border: error ? "2px solid #dc3545" : "1px solid #ced4da",
+      border: error ? "2px solid #b91c1c" : "1px solid #94a3b8",
       fontSize: "1rem",
+      color: "#0f172a",
       minHeight: "44px"
       // Touch target
     };
     const errorStyle = {
-      color: "#dc3545",
+      color: "#b91c1c",
       fontSize: "0.875rem",
       marginTop: "0.25rem",
       display: "flex",
       alignItems: "center"
     };
     const helpStyle = {
-      color: "#6c757d",
+      color: "#475569",
       fontSize: "0.875rem",
       marginTop: "0.25rem"
     };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: containerStyle, className, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: inputId, style: labelStyle, children: [
         label,
-        required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { color: "#dc3545", marginLeft: "4px" }, children: "*" }),
+        required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { color: "#b91c1c", marginLeft: "4px" }, children: "*" }),
         required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: " (obligatoriskt)" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -87,9 +91,8 @@ var FormField = (0, import_react.forwardRef)(
         {
           ref,
           id: inputId,
-          "aria-invalid": !!error,
+          "aria-invalid": error ? "true" : void 0,
           "aria-describedby": describedBy || void 0,
-          "aria-required": required,
           required,
           style: inputStyle,
           ...props

package/dist/FormField/FormField.mjs

@@ -1,6 +1,6 @@
 import {
   FormField
-} from "../chunk-PLT5CAFO.mjs";
+} from "../chunk-ZO5YRJQG.mjs";
 export {
   FormField
 };

package/dist/{chunk-OFTOD72G.mjs → chunk-LBRVCJHL.mjs}

@@ -84,7 +84,8 @@ var AccessibilityStatement = ({
   badgeUrl,
   publishDate
 }) => {
-  const lang = locale === "sv" ? "sv" : "en";
+  const supportedLocales = { sv: "sv", no: "no", nb: "no" };
+  const lang = supportedLocales[locale] ?? "en";
   const template = TEMPLATES[lang] || TEMPLATES.en;
   const d = (date) => formatDiggDate(date, locale);
   const enforcementBody = ENFORCEMENT_BODIES[country] || ENFORCEMENT_BODIES.EU;
@@ -175,15 +176,16 @@ var AccessibilityStatement = ({
       } 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__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(CheckCircleIcon, {}) });
       }
+      const SectionHeader = /* @__PURE__ */ jsxs("h2", { style: styles.sectionTitle, children: [
+        IconNode,
+        section.title
+      ] }, `h2-${i}`);
       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__ */ jsxs("h2", { style: styles.sectionTitle, children: [
-            IconNode,
-            title
-          ] }, `${i}-${bi}`);
+          return /* @__PURE__ */ jsx("h2", { style: styles.sectionTitle, children: title }, `${i}-${bi}`);
         }
         if (blockTrimmed.startsWith("### ")) {
           return /* @__PURE__ */ jsx("h3", { style: { ...styles.sectionTitle, fontSize: "1.4rem" }, children: blockTrimmed.replace("### ", "") }, `${i}-${bi}`);
@@ -205,7 +207,10 @@ var AccessibilityStatement = ({
         }
         return /* @__PURE__ */ jsx("p", { style: styles.paragraph, children: blockTrimmed }, `${i}-${bi}`);
       });
-      return /* @__PURE__ */ jsx("section", { style: styles.section, children: blocks }, i);
+      return /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
+        SectionHeader,
+        blocks
+      ] }, i);
     });
   };
   const statementTools = getStatementToolsByCountry(country);
@@ -222,152 +227,168 @@ var AccessibilityStatement = ({
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
-      marginBottom: "4.5rem",
-      paddingBottom: "2rem",
-      borderBottom: "1px solid #f1f5f9"
+      marginBottom: "5rem",
+      paddingBottom: "2.5rem",
+      borderBottom: "1px solid #f8fafc"
     },
     logoContainer: {
       display: "flex",
       alignItems: "center",
       textDecoration: "none",
-      marginRight: "1.5rem"
+      marginRight: "2rem"
     },
     divider: {
-      height: "2.5rem",
+      height: "2rem",
       width: "1px",
       backgroundColor: "#e2e8f0",
-      marginRight: "1.5rem",
+      marginRight: "2rem",
       display: "block"
     },
     websiteContainer: {
       display: "flex",
       alignItems: "center",
-      gap: "0.75rem",
+      gap: "0.625rem",
       textDecoration: "none",
-      color: "#475569",
-      // Slate 600
-      fontWeight: 600,
-      fontSize: "1rem",
+      color: "#64748b",
+      // Slate 500
+      fontWeight: 500,
+      fontSize: "0.925rem",
       padding: "0.5rem 1rem",
       backgroundColor: "#f8fafc",
-      borderRadius: "0.75rem",
+      borderRadius: "100px",
       border: "1px solid #f1f5f9"
     },
     container: {
-      maxWidth: "900px",
-      margin: "2rem auto",
-      padding: "4.5rem",
+      maxWidth: "1000px",
+      margin: "4rem auto",
+      padding: "6rem",
       backgroundColor: "#ffffff",
-      borderRadius: "24px",
-      boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.05)",
+      borderRadius: "32px",
+      boxShadow: "0 40px 100px -20px rgba(15, 23, 42, 0.08)",
       border: "1px solid #f1f5f9",
       fontFamily: '"Inter", system-ui, -apple-system, sans-serif',
       color: "#1e293b",
       // Slate 800
-      lineHeight: 1.75,
-      fontSize: "1.125rem"
+      lineHeight: 1.8,
+      fontSize: "1.125rem",
+      position: "relative",
+      overflow: "hidden"
     },
     mainHeading: {
-      fontSize: "3rem",
-      fontWeight: 900,
-      color: "#082f49",
-      // Primary 950
+      fontSize: "3.5rem",
+      fontWeight: 800,
+      color: "#0f172a",
+      // Slate 900
       marginTop: "0",
-      marginBottom: "1rem",
-      letterSpacing: "-0.04em",
-      lineHeight: 1.1
+      marginBottom: "1.5rem",
+      letterSpacing: "-0.05em",
+      lineHeight: 1.05
     },
     metaData: {
       color: "#64748b",
       // Slate 500
       fontSize: "0.925rem",
-      marginBottom: "4rem",
+      marginBottom: "5rem",
       fontWeight: 500,
       display: "flex",
-      gap: "1.5rem"
+      gap: "2rem",
+      padding: "1.25rem 2rem",
+      backgroundColor: "#f8fafc",
+      borderRadius: "1rem",
+      border: "1px solid #f1f5f9",
+      width: "fit-content"
     },
     section: {
-      marginBottom: "4.5rem"
+      marginBottom: "6rem"
     },
     sectionTitle: {
-      fontSize: "1.75rem",
-      fontWeight: 800,
-      color: "#082f49",
-      // Primary 950
-      marginBottom: "1.5rem",
+      fontSize: "1.875rem",
+      fontWeight: 700,
+      color: "#0f172a",
+      marginBottom: "2rem",
       marginTop: 0,
-      letterSpacing: "-0.025em",
+      letterSpacing: "-0.03em",
       display: "flex",
       alignItems: "center",
-      gap: "0.75rem"
+      gap: "1rem"
     },
     card: {
       padding: "2.5rem",
-      backgroundColor: "#f0f9ff",
-      // Primary 50
+      backgroundColor: "#ffffff",
       borderRadius: "1.5rem",
-      border: "1px solid #e0f2fe",
-      marginBottom: "2.5rem"
+      border: "1px solid #f1f5f9",
+      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.02)",
+      marginBottom: "2.5rem",
+      display: "flex",
+      flexDirection: "column",
+      gap: "1rem"
     },
     paragraph: {
-      marginBottom: "1.5rem",
-      maxWidth: "65ch",
-      whiteSpace: "pre-line"
+      marginBottom: "1.75rem",
+      maxWidth: "70ch",
+      whiteSpace: "pre-line",
+      color: "#475569"
+      // Slate 600
     },
     link: {
-      color: "#0284c7",
-      // Primary 600
+      color: "#0ea5e9",
+      // Primary 500
       textDecoration: "none",
       fontWeight: 600,
-      borderBottom: "2px solid #e0f2fe",
-      transition: "border-color 0.2s",
+      borderBottom: "1.5px solid rgba(14, 165, 233, 0.2)",
+      transition: "all 0.2s",
       cursor: "pointer"
     },
     list: {
       listStyleType: "none",
       paddingLeft: 0,
-      marginBottom: "1.5rem"
+      marginBottom: "2rem",
+      display: "flex",
+      flexDirection: "column",
+      gap: "1rem"
     },
     listItem: {
-      marginBottom: "0.75rem",
-      paddingLeft: "1.75rem",
+      padding: "1.25rem 1.75rem 1.25rem 3.5rem",
       position: "relative",
-      display: "block"
+      backgroundColor: "#f8fafc",
+      borderRadius: "1rem",
+      border: "1px solid #f1f5f9",
+      fontSize: "1rem",
+      color: "#334155"
     },
     listBullet: {
       position: "absolute",
-      left: 0,
-      top: "0.6em",
-      width: "0.5rem",
-      height: "0.5rem",
-      borderRadius: "50%",
-      backgroundColor: "#0ea5e9"
-      // Primary 500
+      left: "1.5rem",
+      top: "50%",
+      transform: "translateY(-50%)",
+      width: "0.75rem",
+      height: "0.75rem",
+      borderRadius: "4px",
+      backgroundColor: "#0ea5e9",
+      opacity: 0.8
     },
     statusBadge: {
       display: "inline-flex",
       alignItems: "center",
-      padding: "0.375rem 1rem",
-      borderRadius: "9999px",
+      padding: "0.5rem 1.25rem",
+      borderRadius: "100px",
       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"
+      fontWeight: 600,
+      backgroundColor: complianceLevel === "full" ? "#f0fdf4" : complianceLevel === "partial" ? "#fffbeb" : "#fef2f2",
+      color: complianceLevel === "full" ? "#166534" : complianceLevel === "partial" ? "#92400e" : "#991b1b",
+      border: `1px solid ${complianceLevel === "full" ? "#dcfce7" : complianceLevel === "partial" ? "#fef3c7" : "#fee2e2"}`,
+      letterSpacing: "0.01em"
     },
     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)",
+      width: "2.75rem",
+      height: "2.75rem",
+      borderRadius: "12px",
+      backgroundColor: "#f8fafc",
       border: "1px solid #f1f5f9",
-      color: "#0284c7"
+      color: "#0ea5e9"
     }
   };
   const Logo = () => /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
@@ -442,8 +463,23 @@ var AccessibilityStatement = ({
           badgeUrl && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx("img", { src: badgeUrl, alt: "Accessibility Badge", style: { height: "1.5rem", width: "auto" } }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "statement-content", children: [
-          /* @__PURE__ */ jsx("h1", { id: "a11y-statement-title", style: styles.mainHeading, children: renderTemplate(template.title) }),
-          /* @__PURE__ */ jsx("p", { style: styles.paragraph, children: renderTemplate(template.intro) }),
+          /* @__PURE__ */ jsxs("header", { style: { marginBottom: "4rem" }, children: [
+            /* @__PURE__ */ jsx("h1", { id: "a11y-statement-title", style: styles.mainHeading, children: renderTemplate(template.title) }),
+            /* @__PURE__ */ jsxs("div", { style: styles.metaData, children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                lang === "sv" ? "Status:" : "Status:",
+                " ",
+                /* @__PURE__ */ jsx("span", { style: styles.statusBadge, children: complianceLevel === "full" ? lang === "sv" ? "Fullt f\xF6renlig" : "Fully compliant" : complianceLevel === "partial" ? lang === "sv" ? "Delvis f\xF6renlig" : "Partially compliant" : lang === "sv" ? "Ej f\xF6renlig" : "Non-compliant" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: { color: "#e2e8f0" }, children: "|" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                lang === "sv" ? "Uppdaterad:" : "Updated:",
+                " ",
+                d(lastReviewDate)
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("p", { style: { ...styles.paragraph, fontSize: "1.25rem", color: "#1e293b", fontWeight: 500, marginBottom: "4rem" }, children: renderTemplate(template.intro) }),
           renderSections(template.sections)
         ] }),
         /* @__PURE__ */ jsx("footer", { style: { marginTop: "3rem", borderTop: "1px solid #e2e8f0", paddingTop: "1.5rem", fontSize: "0.875rem", color: "#64748b" }, children: /* @__PURE__ */ jsxs("p", { children: [

package/dist/{chunk-PLT5CAFO.mjs → chunk-ZO5YRJQG.mjs}

@@ -1,6 +1,9 @@
 // src/FormField/FormField.tsx
 import { forwardRef, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+function sanitizeId(id) {
+  return id.replaceAll(":", "");
+}
 var FormField = forwardRef(
   ({
     label,
@@ -12,7 +15,7 @@ var FormField = forwardRef(
     style,
     ...props
   }, ref) => {
-    const generatedId = useId();
+    const generatedId = sanitizeId(useId());
     const inputId = id || `input-${generatedId}`;
     const helpTextId = `help-${generatedId}`;
     const errorId = `error-${generatedId}`;
@@ -30,32 +33,33 @@ var FormField = forwardRef(
     const labelStyle = {
       marginBottom: "0.5rem",
       fontWeight: "600",
-      color: "#333"
+      color: "#1e293b"
     };
     const inputStyle = {
       padding: "0.5rem",
       borderRadius: "4px",
-      border: error ? "2px solid #dc3545" : "1px solid #ced4da",
+      border: error ? "2px solid #b91c1c" : "1px solid #94a3b8",
       fontSize: "1rem",
+      color: "#0f172a",
       minHeight: "44px"
       // Touch target
     };
     const errorStyle = {
-      color: "#dc3545",
+      color: "#b91c1c",
       fontSize: "0.875rem",
       marginTop: "0.25rem",
       display: "flex",
       alignItems: "center"
     };
     const helpStyle = {
-      color: "#6c757d",
+      color: "#475569",
       fontSize: "0.875rem",
       marginTop: "0.25rem"
     };
     return /* @__PURE__ */ jsxs("div", { style: containerStyle, className, children: [
       /* @__PURE__ */ jsxs("label", { htmlFor: inputId, style: labelStyle, children: [
         label,
-        required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "#dc3545", marginLeft: "4px" }, children: "*" }),
+        required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "#b91c1c", marginLeft: "4px" }, children: "*" }),
         required && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (obligatoriskt)" })
       ] }),
       /* @__PURE__ */ jsx(
@@ -63,9 +67,8 @@ var FormField = forwardRef(
         {
           ref,
           id: inputId,
-          "aria-invalid": !!error,
+          "aria-invalid": error ? "true" : void 0,
           "aria-describedby": describedBy || void 0,
-          "aria-required": required,
           required,
           style: inputStyle,
           ...props

package/dist/index.js

@@ -169,6 +169,9 @@ Button.displayName = "Button";
 // src/FormField/FormField.tsx
 var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function sanitizeId(id) {
+  return id.replaceAll(":", "");
+}
 var FormField = (0, import_react2.forwardRef)(
   ({
     label,
@@ -180,7 +183,7 @@ var FormField = (0, import_react2.forwardRef)(
     style,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react2.useId)();
+    const generatedId = sanitizeId((0, import_react2.useId)());
     const inputId = id || `input-${generatedId}`;
     const helpTextId = `help-${generatedId}`;
     const errorId = `error-${generatedId}`;
@@ -198,32 +201,33 @@ var FormField = (0, import_react2.forwardRef)(
     const labelStyle = {
       marginBottom: "0.5rem",
       fontWeight: "600",
-      color: "#333"
+      color: "#1e293b"
     };
     const inputStyle = {
       padding: "0.5rem",
       borderRadius: "4px",
-      border: error ? "2px solid #dc3545" : "1px solid #ced4da",
+      border: error ? "2px solid #b91c1c" : "1px solid #94a3b8",
       fontSize: "1rem",
+      color: "#0f172a",
       minHeight: "44px"
       // Touch target
     };
     const errorStyle = {
-      color: "#dc3545",
+      color: "#b91c1c",
       fontSize: "0.875rem",
       marginTop: "0.25rem",
       display: "flex",
       alignItems: "center"
     };
     const helpStyle = {
-      color: "#6c757d",
+      color: "#475569",
       fontSize: "0.875rem",
       marginTop: "0.25rem"
     };
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: containerStyle, className, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { htmlFor: inputId, style: labelStyle, children: [
         label,
-        required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", style: { color: "#dc3545", marginLeft: "4px" }, children: "*" }),
+        required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", style: { color: "#b91c1c", marginLeft: "4px" }, children: "*" }),
         required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "sr-only", children: " (obligatoriskt)" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -231,9 +235,8 @@ var FormField = (0, import_react2.forwardRef)(
         {
           ref,
           id: inputId,
-          "aria-invalid": !!error,
+          "aria-invalid": error ? "true" : void 0,
           "aria-describedby": describedBy || void 0,
-          "aria-required": required,
           required,
           style: inputStyle,
           ...props
@@ -1330,7 +1333,8 @@ var AccessibilityStatement = ({
   badgeUrl,
   publishDate
 }) => {
-  const lang = locale === "sv" ? "sv" : "en";
+  const supportedLocales = { sv: "sv", no: "no", nb: "no" };
+  const lang = supportedLocales[locale] ?? "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;
@@ -1421,15 +1425,16 @@ var AccessibilityStatement = ({
       } 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 SectionHeader = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("h2", { style: styles.sectionTitle, children: [
+        IconNode,
+        section.title
+      ] }, `h2-${i}`);
       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}`);
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { style: styles.sectionTitle, children: 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}`);
@@ -1451,7 +1456,10 @@ var AccessibilityStatement = ({
         }
         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);
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { style: styles.section, children: [
+        SectionHeader,
+        blocks
+      ] }, i);
     });
   };
   const statementTools = (0, import_standards.getStatementToolsByCountry)(country);
@@ -1468,152 +1476,168 @@ var AccessibilityStatement = ({
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
-      marginBottom: "4.5rem",
-      paddingBottom: "2rem",
-      borderBottom: "1px solid #f1f5f9"
+      marginBottom: "5rem",
+      paddingBottom: "2.5rem",
+      borderBottom: "1px solid #f8fafc"
     },
     logoContainer: {
       display: "flex",
       alignItems: "center",
       textDecoration: "none",
-      marginRight: "1.5rem"
+      marginRight: "2rem"
     },
     divider: {
-      height: "2.5rem",
+      height: "2rem",
       width: "1px",
       backgroundColor: "#e2e8f0",
-      marginRight: "1.5rem",
+      marginRight: "2rem",
       display: "block"
     },
     websiteContainer: {
       display: "flex",
       alignItems: "center",
-      gap: "0.75rem",
+      gap: "0.625rem",
       textDecoration: "none",
-      color: "#475569",
-      // Slate 600
-      fontWeight: 600,
-      fontSize: "1rem",
+      color: "#64748b",
+      // Slate 500
+      fontWeight: 500,
+      fontSize: "0.925rem",
       padding: "0.5rem 1rem",
       backgroundColor: "#f8fafc",
-      borderRadius: "0.75rem",
+      borderRadius: "100px",
       border: "1px solid #f1f5f9"
     },
     container: {
-      maxWidth: "900px",
-      margin: "2rem auto",
-      padding: "4.5rem",
+      maxWidth: "1000px",
+      margin: "4rem auto",
+      padding: "6rem",
       backgroundColor: "#ffffff",
-      borderRadius: "24px",
-      boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.05)",
+      borderRadius: "32px",
+      boxShadow: "0 40px 100px -20px rgba(15, 23, 42, 0.08)",
       border: "1px solid #f1f5f9",
       fontFamily: '"Inter", system-ui, -apple-system, sans-serif',
       color: "#1e293b",
       // Slate 800
-      lineHeight: 1.75,
-      fontSize: "1.125rem"
+      lineHeight: 1.8,
+      fontSize: "1.125rem",
+      position: "relative",
+      overflow: "hidden"
     },
     mainHeading: {
-      fontSize: "3rem",
-      fontWeight: 900,
-      color: "#082f49",
-      // Primary 950
+      fontSize: "3.5rem",
+      fontWeight: 800,
+      color: "#0f172a",
+      // Slate 900
       marginTop: "0",
-      marginBottom: "1rem",
-      letterSpacing: "-0.04em",
-      lineHeight: 1.1
+      marginBottom: "1.5rem",
+      letterSpacing: "-0.05em",
+      lineHeight: 1.05
     },
     metaData: {
       color: "#64748b",
       // Slate 500
       fontSize: "0.925rem",
-      marginBottom: "4rem",
+      marginBottom: "5rem",
       fontWeight: 500,
       display: "flex",
-      gap: "1.5rem"
+      gap: "2rem",
+      padding: "1.25rem 2rem",
+      backgroundColor: "#f8fafc",
+      borderRadius: "1rem",
+      border: "1px solid #f1f5f9",
+      width: "fit-content"
     },
     section: {
-      marginBottom: "4.5rem"
+      marginBottom: "6rem"
     },
     sectionTitle: {
-      fontSize: "1.75rem",
-      fontWeight: 800,
-      color: "#082f49",
-      // Primary 950
-      marginBottom: "1.5rem",
+      fontSize: "1.875rem",
+      fontWeight: 700,
+      color: "#0f172a",
+      marginBottom: "2rem",
       marginTop: 0,
-      letterSpacing: "-0.025em",
+      letterSpacing: "-0.03em",
       display: "flex",
       alignItems: "center",
-      gap: "0.75rem"
+      gap: "1rem"
     },
     card: {
       padding: "2.5rem",
-      backgroundColor: "#f0f9ff",
-      // Primary 50
+      backgroundColor: "#ffffff",
       borderRadius: "1.5rem",
-      border: "1px solid #e0f2fe",
-      marginBottom: "2.5rem"
+      border: "1px solid #f1f5f9",
+      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.02)",
+      marginBottom: "2.5rem",
+      display: "flex",
+      flexDirection: "column",
+      gap: "1rem"
     },
     paragraph: {
-      marginBottom: "1.5rem",
-      maxWidth: "65ch",
-      whiteSpace: "pre-line"
+      marginBottom: "1.75rem",
+      maxWidth: "70ch",
+      whiteSpace: "pre-line",
+      color: "#475569"
+      // Slate 600
     },
     link: {
-      color: "#0284c7",
-      // Primary 600
+      color: "#0ea5e9",
+      // Primary 500
       textDecoration: "none",
       fontWeight: 600,
-      borderBottom: "2px solid #e0f2fe",
-      transition: "border-color 0.2s",
+      borderBottom: "1.5px solid rgba(14, 165, 233, 0.2)",
+      transition: "all 0.2s",
       cursor: "pointer"
     },
     list: {
       listStyleType: "none",
       paddingLeft: 0,
-      marginBottom: "1.5rem"
+      marginBottom: "2rem",
+      display: "flex",
+      flexDirection: "column",
+      gap: "1rem"
     },
     listItem: {
-      marginBottom: "0.75rem",
-      paddingLeft: "1.75rem",
+      padding: "1.25rem 1.75rem 1.25rem 3.5rem",
       position: "relative",
-      display: "block"
+      backgroundColor: "#f8fafc",
+      borderRadius: "1rem",
+      border: "1px solid #f1f5f9",
+      fontSize: "1rem",
+      color: "#334155"
     },
     listBullet: {
       position: "absolute",
-      left: 0,
-      top: "0.6em",
-      width: "0.5rem",
-      height: "0.5rem",
-      borderRadius: "50%",
-      backgroundColor: "#0ea5e9"
-      // Primary 500
+      left: "1.5rem",
+      top: "50%",
+      transform: "translateY(-50%)",
+      width: "0.75rem",
+      height: "0.75rem",
+      borderRadius: "4px",
+      backgroundColor: "#0ea5e9",
+      opacity: 0.8
     },
     statusBadge: {
       display: "inline-flex",
       alignItems: "center",
-      padding: "0.375rem 1rem",
-      borderRadius: "9999px",
+      padding: "0.5rem 1.25rem",
+      borderRadius: "100px",
       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"
+      fontWeight: 600,
+      backgroundColor: complianceLevel === "full" ? "#f0fdf4" : complianceLevel === "partial" ? "#fffbeb" : "#fef2f2",
+      color: complianceLevel === "full" ? "#166534" : complianceLevel === "partial" ? "#92400e" : "#991b1b",
+      border: `1px solid ${complianceLevel === "full" ? "#dcfce7" : complianceLevel === "partial" ? "#fef3c7" : "#fee2e2"}`,
+      letterSpacing: "0.01em"
     },
     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)",
+      width: "2.75rem",
+      height: "2.75rem",
+      borderRadius: "12px",
+      backgroundColor: "#f8fafc",
       border: "1px solid #f1f5f9",
-      color: "#0284c7"
+      color: "#0ea5e9"
     }
   };
   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: [
@@ -1688,8 +1712,23 @@ var AccessibilityStatement = ({
           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) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { style: { marginBottom: "4rem" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", { id: "a11y-statement-title", style: styles.mainHeading, children: renderTemplate(template.title) }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styles.metaData, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { children: [
+                lang === "sv" ? "Status:" : "Status:",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: styles.statusBadge, children: complianceLevel === "full" ? lang === "sv" ? "Fullt f\xF6renlig" : "Fully compliant" : complianceLevel === "partial" ? lang === "sv" ? "Delvis f\xF6renlig" : "Partially compliant" : lang === "sv" ? "Ej f\xF6renlig" : "Non-compliant" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { color: "#e2e8f0" }, children: "|" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { children: [
+                lang === "sv" ? "Uppdaterad:" : "Updated:",
+                " ",
+                d(lastReviewDate)
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { ...styles.paragraph, fontSize: "1.25rem", color: "#1e293b", fontWeight: 500, marginBottom: "4rem" }, 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: [

package/dist/index.mjs

@@ -34,7 +34,7 @@ import {
 } from "./chunk-P2IXX552.mjs";
 import {
   FormField
-} from "./chunk-PLT5CAFO.mjs";
+} from "./chunk-ZO5YRJQG.mjs";
 import {
   Heading
 } from "./chunk-2RP6SWY7.mjs";
@@ -55,19 +55,19 @@ import {
 } from "./chunk-GK4BYT56.mjs";
 import {
   AccessibilityStatement
-} from "./chunk-OFTOD72G.mjs";
+} from "./chunk-LBRVCJHL.mjs";
 import {
   Button
 } from "./chunk-MYXIUDCP.mjs";
 import {
   Checkbox
 } from "./chunk-NOE5QKC2.mjs";
-import {
-  Card
-} from "./chunk-NECEXNCF.mjs";
 import {
   Combobox
 } from "./chunk-OMSIXECN.mjs";
+import {
+  Card
+} from "./chunk-NECEXNCF.mjs";
 import {
   DataTable
 } from "./chunk-HSUDZAQ6.mjs";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@holmdigital/components",
     "author": "Holm Digital AB",
-    "version": "2.1.0",
+    "version": "2.1.2",
     "private": false,
     "publishConfig": {
         "access": "public"
@@ -149,7 +149,7 @@
         "jsdom": "^28.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "storybook": "^10.2.4",
+        "storybook": "^10.2.13",
         "tsup": "^8.3.5",
         "typescript": "^5.7.2"
     },