@holmdigital/components 2.0.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  AccessibilityStatement
3
- } from "../chunk-FKSBWEX3.mjs";
3
+ } from "../chunk-LBRVCJHL.mjs";
4
4
  export {
5
5
  AccessibilityStatement
6
6
  };
@@ -0,0 +1,498 @@
1
+ // src/AccessibilityStatement/AccessibilityStatement.tsx
2
+ import {
3
+ getStatementToolsByCountry,
4
+ ENFORCEMENT_BODIES
5
+ } from "@holmdigital/standards";
6
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
7
+ var TEMPLATES = {
8
+ sv: {
9
+ title: "Tillg\xE4nglighet f\xF6r {<webbplats>}",
10
+ intro: "{<organisation>} st\xE5r bakom den h\xE4r webbplatsen. Vi vill att s\xE5 m\xE5nga som m\xF6jligt ska kunna anv\xE4nda den. Det h\xE4r dokumentet beskriver hur {<webbplats>} uppfyller lagen om tillg\xE4nglighet till digital offentlig service, eventuella k\xE4nda tillg\xE4nglighetsproblem och hur du kan rapportera brister till oss s\xE5 att vi kan \xE5tg\xE4rda dem.",
11
+ sections: [
12
+ { id: "how-accessible", title: "Hur tillg\xE4nglig \xE4r webbplatsen?", content: "{Vi har inga k\xE4nda brister i tillg\xE4ngligheten f\xF6r den h\xE4r webbplatsen./Vi \xE4r medvetna om att delar av webbplatsen inte \xE4r helt tillg\xE4ngliga. Se avsnittet om inneh\xE5ll som inte \xE4r tillg\xE4ngligt nedan f\xF6r mer information./Vi \xE4r medvetna om att delar av webbplatsen inte \xE4r helt tillg\xE4ngliga. Se avsnittet om inneh\xE5ll som inte \xE4r tillg\xE4ngligt nedan f\xF6r mer information.}" },
13
+ { id: "what-to-do", title: "Vad kan du g\xF6ra om du inte kan anv\xE4nda delar av webbplatsen?", content: "Om du beh\xF6ver inneh\xE5ll fr\xE5n {<webbplats>} som inte \xE4r tillg\xE4ngligt f\xF6r dig, men som \xE4r undantaget fr\xE5n lagens till\xE4mpningsomr\xE5de enligt beskrivning nedan, kan du meddela oss.\n\n[Svarstiden \xE4r normalt {<svarstid>}.]\n\n[Du kan ocks\xE5 kontakta oss p\xE5 f\xF6ljande s\xE4tt:\n\n* skicka e-post till {<e-postadress>}\n* ring {<telefonnummer>}]" },
14
+ { id: "reporting", title: "Rapportera brister i webbplatsens tillg\xE4nglighet", content: "Vi str\xE4var hela tiden efter att f\xF6rb\xE4ttra webbplatsens tillg\xE4nglighet. Om du uppt\xE4cker problem som inte \xE4r beskrivna p\xE5 den h\xE4r sidan, eller om du anser att vi inte uppfyller lagens krav, meddela oss s\xE5 att vi f\xE5r veta att problemet finns." },
15
+ { id: "enforcement", title: "Tillsyn", content: "{<enforcement_body>} har ansvaret f\xF6r tillsyn \xF6ver lagen om tillg\xE4nglighet till digital offentlig service. Du kan anm\xE4la till {<enforcement_body>} om du tycker att v\xE5r digitala service har brister i tillg\xE4nglighet.\n\nDu kan ocks\xE5 anm\xE4la till {<enforcement_body>} om du tycker att v\xE5r bed\xF6mning av vad som \xE4r osk\xE4ligt betungande ska granskas, om du tycker att v\xE5r tillg\xE4nglighetsredog\xF6relse har brister eller om du tycker att vi inte har hanterat din beg\xE4ran om tillg\xE4ngligg\xF6rande korrekt." },
16
+ { id: "technical", title: "Teknisk information om webbplatsens tillg\xE4nglighet", content: "{Den h\xE4r webbplatsen \xE4r helt f\xF6renlig med lagen om tillg\xE4nglighet till digital offentlig service./Den h\xE4r webbplatsen \xE4r delvis f\xF6renlig med lagen om tillg\xE4nglighet till digital offentlig service, p\xE5 grund av de brister som beskrivs nedan./Den h\xE4r webbplatsen \xE4r inte f\xF6renlig med lagen om tillg\xE4nglighet till digital offentlig service. Otillg\xE4ngliga delar beskrivs nedan.}" },
17
+ { id: "non-accessible", title: "Inneh\xE5ll som inte \xE4r tillg\xE4ngligt", content: "Det inneh\xE5ll som beskrivs nedan \xE4r p\xE5 ett eller annat s\xE4tt inte helt tillg\xE4ngligt.\n\n[\n### Bristande f\xF6renlighet med lagkraven\n{<brister>}\n]" },
18
+ { id: "testing", title: "Hur vi testat webbplatsen", content: "{Vi har gjort en sj\xE4lvskattning (intern testning) av {<webbplats>}./{<extern akt\xF6r>} har gjort en oberoende granskning av {<webbplats>}./Vi har uppskattat tillg\xE4ngligheten utan granskning.}\n\nSenaste bed\xF6mningen gjordes den {<bed\xF6mningsdatum>}.\n\n[Granskningsmetod: {<metod>}]\n\nWebbplatsen publicerades den {<publiceringsdatum>}.\n\nRedog\xF6relsen uppdaterades senast den {<uppdateringsdatum>}." }
19
+ ]
20
+ },
21
+ en: {
22
+ title: "Accessibility of {<website>}",
23
+ intro: "This website is run by {<organisation>}. We want as many people as possible to be able to use it, and this document describes how {<website>} complies with the accessibility regulations, any known accessibility issues, and how you can report problems so that we can fix them.",
24
+ sections: [
25
+ { id: "how-accessible", title: "How accessible is the website?", content: "{There are no known accessibility issues with this website./We know some parts of this website aren\u2019t fully accessible. See the section on non-accessible content below for more information./We know some parts of this website aren\u2019t fully accessible. See the section on non-accessible content below for more information.}" },
26
+ { id: "what-to-do", title: "What to do if you can\u2019t access parts of this website?", content: "If you need content from this website that is not accessible for you, but is not within the scope of the accessibility regulations as described below, please contact us.\n\n[Our normal response time is {<response time>}.]\n\n[You can also contact us in the following ways:\n\n* email {<email address>}\n* call {<telephone number>}]" },
27
+ { id: "reporting", title: "Reporting accessibility problems with this website", content: "We\u2019re always looking to improve the accessibility of this website. If you find any problems that aren\u2019t listed on this page or if we\u2019re not meeting the requirements of the accessibility regulations, contact us and let us know about the problem." },
28
+ { id: "enforcement", title: "Enforcement procedure", content: "The {<enforcement_body>} is responsible for enforcing the web accessibility regulations. If you experience accessibility issues on our website, you can submit a complaint to {<enforcement_body>}.\n\nYou can also submit a complaint to {<enforcement_body>} if you think that our assessment of what constitutes a disproportionate burden should be reviewed, if you think that our accessibility statement is inadequate, or it you think that your request for excluded content in an accessible format has not been handled correctly." },
29
+ { id: "technical", title: "Technical information about this website\u2019s accessibility", content: "{This website is fully compliant with the accessibility regulations./This website is partially compliant with the accessibility regulations, due to the non-compliances listed below./This website is not compliant with the accessibility regulations. The non-accessible sections are listed below.}" },
30
+ { id: "non-accessible", title: "Non-accessible content", content: "The content described below is, in one way or another, not fully accessible.\n\n[\n### Non-compliance with the accessibility regulations\n\n{<issues>}\n]" },
31
+ { id: "testing", title: "How we tested this website", content: "{We have performed a self-assessment (internal testing) of {<website>}./{<third party>} has tested {<website>}./We have estimated the accessibility without testing.}\n\nThe last assessment was made on {<assessment date>}.\n\n[Assessment method: {<method>}]\n\nThe website was published on {<publish date>}.\n\nThe statement was last updated on {<update date>}." }
32
+ ]
33
+ },
34
+ no: {
35
+ title: "Tilgjengelighet for {<nettsted>}",
36
+ intro: "{<organisasjon>} st\xE5r bak dette nettstedet. Vi \xF8nsker at flest mulig skal kunne bruke det. Dette dokumentet beskriver hvordan {<nettsted>} oppfyller lov om universell utforming av IKT-l\xF8sninger, eventuelle kjente tilgjengelighetsproblemer og hvordan du kan rapportere mangler til oss slik at vi kan utbedre dem.",
37
+ sections: [
38
+ { id: "how-accessible", title: "Hvor tilgjengelig er nettstedet?", content: "{Vi har ingen kjente mangler i tilgjengeligheten for dette nettstedet./Vi er klar over at deler av nettstedet ikke er fullt ut tilgjengelig. See avsnittet om innhold som ikke er tilgjengelig nedenfor for mer informasjon./Vi er klar over at deler av nettstedet ikke er fullt ut tilgjengelig. See avsnittet om innhold som ikke er tilgjengelig nedenfor for mer informasjon.}" },
39
+ { id: "what-to-do", title: "Hva kan du gj\xF8re hvis du ikke kan bruke deler av nettstedet?", content: "Hvis du trenger innhold fra {<nettsted>} som ikke er tilgjengelig for deg, men som er unntatt fra lovens anvendelsesomr\xE5de som beskrevet nedenfor, kan du melde fra til oss.\n\n[Svartiden er normalt {<svartid>}.]\n\n[Du kan ogs\xE5 kontakte oss p\xE5 f\xF8lgende m\xE5ter:\n\n* send e-post til {<e-postadresse>}\n* ring {<telefonnummer>}]" },
40
+ { id: "reporting", title: "Rapporter mangler ved nettstedets tilgjengelighet", content: "Vi jobber kontinuerlig med \xE5 forbedre nettstedets tilgjengelighet. Hvis du oppdager problemer som ikke er beskrevet p\xE5 denne siden, eller hvis du mener at vi ikke oppfyller lovens krav, meld fra til oss slik at vi f\xE5r vite om problemet." },
41
+ { id: "enforcement", title: "Tillsyn", content: "{<enforcement_body>} har ansvaret for tilsyn med lov om universell utforming av IKT-l\xF8sninger. Du kan klage til {<enforcement_body>} hvis du mener at v\xE5r digitale tjeneste har mangler i tilgjengelighet.\n\nDu kan ogs\xE5 klage til {<enforcement_body>} hvis du mener at v\xE5r vurdering av hva som er uforholdsmessig byrdefullt b\xF8r overproves, hvis du mener at v\xE5r tilgjengelighetserkl\xE6ring har mangler eller hvis du mener at vi ikke har h\xE5ndtert din foresp\xF8rsel om tilgjengeliggj\xF8ring korrekt." },
42
+ { id: "technical", title: "Teknisk informasjon om nettstedets tilgjengelighet", content: "{Dette nettstedet er helt i samsvar med lov om universell utforming av IKT-l\xF8sninger./Dette nettstedet er delvis i samsvar med lov om universell utforming av IKT-l\xF8sninger, p\xE5 grunn av manglene beskrevet nedenfor./Dette nettstedet er ikke i samsvar med lov om universell utforming av IKT-l\xF8sninger. Utilgjengelige deler er beskrevet nedenfor.}" },
43
+ { id: "non-accessible", title: "Innhold som ikke er tilgjengelig", content: "Innholdet som er beskrevet nedenfor er p\xE5 en eller annen m\xE5te ikke fullt ut tilgjengelig.\n\n[\n### Manglende samsvar med lovkravene\n{<mangler>}\n]" },
44
+ { id: "testing", title: "Hvordan vi har testet nettstedet", content: "{Vi har gjort en egenevaluering (intern testing) av {<nettsted>}./{<ekstern aktor>} har gjort en uavhengig revisjon av {<nettsted>}./Vi har ansl\xE5tt tilgjengeligheten uten testing.}\n\nSiste vurdering ble gjort den {<vurderingsdato>}.\n\n[Vurderingsmetode: {<metode>}]\n\nNettstedet ble publisert den {<publiseringsdato>}.\n\nErkl\xE6ringen ble sist oppdatert den {<oppdateringsdato>}." }
45
+ ]
46
+ }
47
+ };
48
+ var formatDiggDate = (date, locale) => {
49
+ const localeMap = {
50
+ sv: "sv-SE",
51
+ no: "no-NO",
52
+ nb: "no-NO",
53
+ da: "da-DK",
54
+ fi: "fi-FI",
55
+ nl: "nl-NL",
56
+ de: "de-DE",
57
+ fr: "fr-FR",
58
+ es: "es-ES"
59
+ };
60
+ return date.toLocaleDateString(localeMap[locale] || "en-US", {
61
+ year: "numeric",
62
+ month: "long",
63
+ day: "numeric"
64
+ });
65
+ };
66
+ var AccessibilityStatement = ({
67
+ country,
68
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
69
+ sector: _sector,
70
+ organizationName,
71
+ websiteUrl: _websiteUrl,
72
+ complianceLevel,
73
+ lastReviewDate,
74
+ contactEmail,
75
+ assessmentDate,
76
+ evaluationMethod,
77
+ generatorTool,
78
+ logoUrl,
79
+ nonComplianceItems = [],
80
+ locale = "en",
81
+ className = "",
82
+ phoneNumber,
83
+ responseTime,
84
+ badgeUrl,
85
+ publishDate
86
+ }) => {
87
+ const supportedLocales = { sv: "sv", no: "no", nb: "no" };
88
+ const lang = supportedLocales[locale] ?? "en";
89
+ const template = TEMPLATES[lang] || TEMPLATES.en;
90
+ const d = (date) => formatDiggDate(date, locale);
91
+ const enforcementBody = ENFORCEMENT_BODIES[country] || ENFORCEMENT_BODIES.EU;
92
+ const replacements = {
93
+ "{<webbplats>}": organizationName,
94
+ // Or websiteUrl, but usually org/site name
95
+ "{<website>}": organizationName,
96
+ "{<organisation>}": organizationName,
97
+ "{<e-postadress>}": contactEmail,
98
+ "{<email address>}": contactEmail,
99
+ "{<telefonnummer>}": phoneNumber || "",
100
+ "{<telephone number>}": phoneNumber || "",
101
+ "{<svarstid>}": responseTime || "",
102
+ "{<response time>}": responseTime || "",
103
+ "{<bed\xF6mningsdatum>}": assessmentDate ? d(assessmentDate) : d(lastReviewDate),
104
+ "{<assessment date>}": assessmentDate ? d(assessmentDate) : d(lastReviewDate),
105
+ "{<uppdateringsdatum>}": d(lastReviewDate),
106
+ "{<update date>}": d(lastReviewDate),
107
+ "{<publiceringsdatum>}": publishDate ? d(publishDate) : "2024-01-01",
108
+ // Default to a realistic value if unknown
109
+ "{<publish date>}": publishDate ? d(publishDate) : "2024-01-01",
110
+ "{<metod>}": evaluationMethod || "Automated Scan",
111
+ "{<method>}": evaluationMethod || "Automated Scan",
112
+ "{<extern akt\xF6r>}": generatorTool?.name || "HolmDigital Engine",
113
+ "{<third party>}": generatorTool?.name || "HolmDigital Engine",
114
+ "{<enforcement_body>}": enforcementBody
115
+ };
116
+ let issuesContent = "";
117
+ if (nonComplianceItems.length > 0) {
118
+ issuesContent = nonComplianceItems.map((item) => `* ${item}`).join("\n");
119
+ } else {
120
+ issuesContent = lang === "sv" ? "Inga k\xE4nda brister." : lang === "no" ? "Ingen kjente mangler." : "No known issues.";
121
+ }
122
+ replacements["{<brister>}"] = issuesContent;
123
+ replacements["{<issues>}"] = issuesContent;
124
+ replacements["{<mangler>}"] = issuesContent;
125
+ replacements["{<nettsted>}"] = organizationName;
126
+ replacements["{<organisasjon>}"] = organizationName;
127
+ replacements["{<svartid>}"] = responseTime || "";
128
+ replacements["{<vurderingsdato>}"] = assessmentDate ? d(assessmentDate) : d(lastReviewDate);
129
+ replacements["{<publiseringsdatum>}"] = publishDate ? d(publishDate) : "2024-01-01";
130
+ replacements["{<ekstern aktor>}"] = generatorTool?.name || "HolmDigital Engine";
131
+ const renderTemplate = (tmpl) => {
132
+ let text = tmpl;
133
+ text = text.replace(/\[([\s\S]*?)\]/g, (_match, content) => {
134
+ if (content.includes("{<svarstid>}") || content.includes("{<response time>}")) {
135
+ return responseTime ? content : "";
136
+ }
137
+ if (content.includes("{<telefonnummer>}") || content.includes("{<telephone number>}")) {
138
+ return phoneNumber ? content : "";
139
+ }
140
+ if (content.includes("{<brister>}") || content.includes("{<issues>}")) {
141
+ return complianceLevel !== "full" ? content : "";
142
+ }
143
+ return "\n" + content.trim() + "\n";
144
+ });
145
+ for (const [key, value] of Object.entries(replacements)) {
146
+ text = text.replaceAll(key, value);
147
+ }
148
+ text = text.replace(/\{([^{}]*?)\}/g, (_match, content) => {
149
+ const parts = content.split("/");
150
+ if (parts.length >= 2) {
151
+ let idx = 0;
152
+ if (complianceLevel === "partial") idx = 1;
153
+ if (complianceLevel === "non-compliant") idx = parts.length > 2 ? 2 : 1;
154
+ return parts[idx].trim();
155
+ }
156
+ return _match;
157
+ });
158
+ return text;
159
+ };
160
+ const renderSections = (sections) => {
161
+ return sections.map((section, i) => {
162
+ const content = renderTemplate(section.content);
163
+ const trimmed = content.trim();
164
+ if (!trimmed) return null;
165
+ let IconNode = null;
166
+ if (section.id === "how-accessible" || trimmed.includes("Hur tillg\xE4nglig") || trimmed.includes("How accessible") || trimmed.includes("Hvor tilgjengelig") || trimmed.includes("Hvor tilg\xE6ngeligt") || trimmed.includes("Kuinka saavutettava") || trimmed.includes("Hoe toegankelijk") || trimmed.includes("Stand der Vereinbarkeit") || trimmed.includes("\xC9tat de conformit\xE9") || trimmed.includes("Situaci\xF3n de cumplimiento")) {
167
+ IconNode = /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(EyeIcon, {}) });
168
+ } else if (section.id === "what-to-do" || trimmed.includes("Vad kan du g\xF6ra") || trimmed.includes("What to do") || trimmed.includes("Hva kan du gj\xF8re") || trimmed.includes("Hvad kan du g\xF8re") || trimmed.includes("Mit\xE4 voit tehd\xE4") || trimmed.includes("Wat kunt u doen") || trimmed.includes("Nicht barrierefreie Inhalte") || trimmed.includes("Contenus non accessibles") || trimmed.includes("Contenido no accesible")) {
169
+ IconNode = /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(HelpCircleIcon, {}) });
170
+ } else if (section.id === "reporting" || trimmed.includes("Rapporter brister") || trimmed.includes("Reporting accessibility") || trimmed.includes("Rapporter mangler") || trimmed.includes("Anna palautetta") || trimmed.includes("Meld toegankelijkheidsproblemen") || trimmed.includes("Feedback und Kontaktangaben") || trimmed.includes("Retour d'information") || trimmed.includes("Mecanismo de comunicaci\xF3n")) {
171
+ IconNode = /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(AlertOctagonIcon, {}) });
172
+ } else if (section.id === "enforcement" || trimmed.includes("Tillsyn") || trimmed.includes("Enforcement procedure") || trimmed.includes("Tilsyn") || trimmed.includes("H\xE5ndh\xE6velsesprocedure") || trimmed.includes("T\xE4yt\xE4nt\xF6\xF6npanomenettely") || trimmed.includes("Handhavingsprocedure") || trimmed.includes("Durchsetzungsverfahren") || trimmed.includes("Voies de recours") || trimmed.includes("Procedimiento de aplicaci\xF3n")) {
173
+ IconNode = /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(GavelIcon, {}) });
174
+ } else if (section.id === "technical" || trimmed.includes("Teknisk information") || trimmed.includes("Technical information")) {
175
+ IconNode = /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(CpuIcon, {}) });
176
+ } 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")) {
177
+ IconNode = /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(CheckCircleIcon, {}) });
178
+ }
179
+ const SectionHeader = /* @__PURE__ */ jsxs("h2", { style: styles.sectionTitle, children: [
180
+ IconNode,
181
+ section.title
182
+ ] }, `h2-${i}`);
183
+ const blocks = trimmed.split("\n\n").map((block, bi) => {
184
+ const blockTrimmed = block.trim();
185
+ if (!blockTrimmed) return null;
186
+ if (blockTrimmed.startsWith("## ")) {
187
+ const title = blockTrimmed.replace("## ", "");
188
+ return /* @__PURE__ */ jsx("h2", { style: styles.sectionTitle, children: title }, `${i}-${bi}`);
189
+ }
190
+ if (blockTrimmed.startsWith("### ")) {
191
+ return /* @__PURE__ */ jsx("h3", { style: { ...styles.sectionTitle, fontSize: "1.4rem" }, children: blockTrimmed.replace("### ", "") }, `${i}-${bi}`);
192
+ }
193
+ if (blockTrimmed.includes("* ") || blockTrimmed.includes("\u2022 ")) {
194
+ const lines = blockTrimmed.split("\n");
195
+ return /* @__PURE__ */ jsx("ul", { style: styles.list, children: lines.map((line, li) => {
196
+ const cleanLine = line.trim().replace(/^[*-•]\s*/, "");
197
+ if (!cleanLine) return null;
198
+ return /* @__PURE__ */ jsxs("li", { style: styles.listItem, children: [
199
+ /* @__PURE__ */ jsx("div", { style: styles.listBullet }),
200
+ cleanLine
201
+ ] }, li);
202
+ }) }, `${i}-${bi}`);
203
+ }
204
+ const isCardSection = blockTrimmed.includes("e-post") || blockTrimmed.includes("email") || blockTrimmed.includes("ring ") || blockTrimmed.includes("call ");
205
+ if (isCardSection) {
206
+ return /* @__PURE__ */ jsx("div", { style: styles.card, children: blockTrimmed }, `${i}-${bi}`);
207
+ }
208
+ return /* @__PURE__ */ jsx("p", { style: styles.paragraph, children: blockTrimmed }, `${i}-${bi}`);
209
+ });
210
+ return /* @__PURE__ */ jsxs("section", { style: styles.section, children: [
211
+ SectionHeader,
212
+ blocks
213
+ ] }, i);
214
+ });
215
+ };
216
+ const statementTools = getStatementToolsByCountry(country);
217
+ const usedTool = generatorTool || statementTools.find((t) => t.recommended) || statementTools[0];
218
+ const styles = {
219
+ page: {
220
+ fontFamily: '"Inter", system-ui, -apple-system, sans-serif',
221
+ color: "#334155",
222
+ // Slate 700
223
+ lineHeight: 1.6,
224
+ maxWidth: "100%"
225
+ },
226
+ header: {
227
+ display: "flex",
228
+ justifyContent: "space-between",
229
+ alignItems: "center",
230
+ marginBottom: "5rem",
231
+ paddingBottom: "2.5rem",
232
+ borderBottom: "1px solid #f8fafc"
233
+ },
234
+ logoContainer: {
235
+ display: "flex",
236
+ alignItems: "center",
237
+ textDecoration: "none",
238
+ marginRight: "2rem"
239
+ },
240
+ divider: {
241
+ height: "2rem",
242
+ width: "1px",
243
+ backgroundColor: "#e2e8f0",
244
+ marginRight: "2rem",
245
+ display: "block"
246
+ },
247
+ websiteContainer: {
248
+ display: "flex",
249
+ alignItems: "center",
250
+ gap: "0.625rem",
251
+ textDecoration: "none",
252
+ color: "#64748b",
253
+ // Slate 500
254
+ fontWeight: 500,
255
+ fontSize: "0.925rem",
256
+ padding: "0.5rem 1rem",
257
+ backgroundColor: "#f8fafc",
258
+ borderRadius: "100px",
259
+ border: "1px solid #f1f5f9"
260
+ },
261
+ container: {
262
+ maxWidth: "1000px",
263
+ margin: "4rem auto",
264
+ padding: "6rem",
265
+ backgroundColor: "#ffffff",
266
+ borderRadius: "32px",
267
+ boxShadow: "0 40px 100px -20px rgba(15, 23, 42, 0.08)",
268
+ border: "1px solid #f1f5f9",
269
+ fontFamily: '"Inter", system-ui, -apple-system, sans-serif',
270
+ color: "#1e293b",
271
+ // Slate 800
272
+ lineHeight: 1.8,
273
+ fontSize: "1.125rem",
274
+ position: "relative",
275
+ overflow: "hidden"
276
+ },
277
+ mainHeading: {
278
+ fontSize: "3.5rem",
279
+ fontWeight: 800,
280
+ color: "#0f172a",
281
+ // Slate 900
282
+ marginTop: "0",
283
+ marginBottom: "1.5rem",
284
+ letterSpacing: "-0.05em",
285
+ lineHeight: 1.05
286
+ },
287
+ metaData: {
288
+ color: "#64748b",
289
+ // Slate 500
290
+ fontSize: "0.925rem",
291
+ marginBottom: "5rem",
292
+ fontWeight: 500,
293
+ display: "flex",
294
+ gap: "2rem",
295
+ padding: "1.25rem 2rem",
296
+ backgroundColor: "#f8fafc",
297
+ borderRadius: "1rem",
298
+ border: "1px solid #f1f5f9",
299
+ width: "fit-content"
300
+ },
301
+ section: {
302
+ marginBottom: "6rem"
303
+ },
304
+ sectionTitle: {
305
+ fontSize: "1.875rem",
306
+ fontWeight: 700,
307
+ color: "#0f172a",
308
+ marginBottom: "2rem",
309
+ marginTop: 0,
310
+ letterSpacing: "-0.03em",
311
+ display: "flex",
312
+ alignItems: "center",
313
+ gap: "1rem"
314
+ },
315
+ card: {
316
+ padding: "2.5rem",
317
+ backgroundColor: "#ffffff",
318
+ borderRadius: "1.5rem",
319
+ border: "1px solid #f1f5f9",
320
+ boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.02)",
321
+ marginBottom: "2.5rem",
322
+ display: "flex",
323
+ flexDirection: "column",
324
+ gap: "1rem"
325
+ },
326
+ paragraph: {
327
+ marginBottom: "1.75rem",
328
+ maxWidth: "70ch",
329
+ whiteSpace: "pre-line",
330
+ color: "#475569"
331
+ // Slate 600
332
+ },
333
+ link: {
334
+ color: "#0ea5e9",
335
+ // Primary 500
336
+ textDecoration: "none",
337
+ fontWeight: 600,
338
+ borderBottom: "1.5px solid rgba(14, 165, 233, 0.2)",
339
+ transition: "all 0.2s",
340
+ cursor: "pointer"
341
+ },
342
+ list: {
343
+ listStyleType: "none",
344
+ paddingLeft: 0,
345
+ marginBottom: "2rem",
346
+ display: "flex",
347
+ flexDirection: "column",
348
+ gap: "1rem"
349
+ },
350
+ listItem: {
351
+ padding: "1.25rem 1.75rem 1.25rem 3.5rem",
352
+ position: "relative",
353
+ backgroundColor: "#f8fafc",
354
+ borderRadius: "1rem",
355
+ border: "1px solid #f1f5f9",
356
+ fontSize: "1rem",
357
+ color: "#334155"
358
+ },
359
+ listBullet: {
360
+ position: "absolute",
361
+ left: "1.5rem",
362
+ top: "50%",
363
+ transform: "translateY(-50%)",
364
+ width: "0.75rem",
365
+ height: "0.75rem",
366
+ borderRadius: "4px",
367
+ backgroundColor: "#0ea5e9",
368
+ opacity: 0.8
369
+ },
370
+ statusBadge: {
371
+ display: "inline-flex",
372
+ alignItems: "center",
373
+ padding: "0.5rem 1.25rem",
374
+ borderRadius: "100px",
375
+ fontSize: "0.875rem",
376
+ fontWeight: 600,
377
+ backgroundColor: complianceLevel === "full" ? "#f0fdf4" : complianceLevel === "partial" ? "#fffbeb" : "#fef2f2",
378
+ color: complianceLevel === "full" ? "#166534" : complianceLevel === "partial" ? "#92400e" : "#991b1b",
379
+ border: `1px solid ${complianceLevel === "full" ? "#dcfce7" : complianceLevel === "partial" ? "#fef3c7" : "#fee2e2"}`,
380
+ letterSpacing: "0.01em"
381
+ },
382
+ iconWrapper: {
383
+ display: "flex",
384
+ alignItems: "center",
385
+ justifyContent: "center",
386
+ width: "2.75rem",
387
+ height: "2.75rem",
388
+ borderRadius: "12px",
389
+ backgroundColor: "#f8fafc",
390
+ border: "1px solid #f1f5f9",
391
+ color: "#0ea5e9"
392
+ }
393
+ };
394
+ 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: [
395
+ /* @__PURE__ */ jsx("rect", { width: "32", height: "32", rx: "6", fill: "#0F172A" }),
396
+ /* @__PURE__ */ jsx("path", { d: "M16 8L24 16L16 24L8 16L16 8Z", fill: "#38BDF8" }),
397
+ /* @__PURE__ */ jsx("path", { d: "M16 12L20 16L16 20L12 16L16 12Z", fill: "#0F172A" })
398
+ ] });
399
+ const IconWrapper = ({ children }) => /* @__PURE__ */ jsx("div", { style: styles.iconWrapper, children });
400
+ const EyeIcon = () => /* @__PURE__ */ 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: [
401
+ /* @__PURE__ */ jsx("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
402
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
403
+ ] });
404
+ const HelpCircleIcon = () => /* @__PURE__ */ 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: [
405
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
406
+ /* @__PURE__ */ jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
407
+ /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
408
+ ] });
409
+ const AlertOctagonIcon = () => /* @__PURE__ */ 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: [
410
+ /* @__PURE__ */ 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" }),
411
+ /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
412
+ /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
413
+ ] });
414
+ const GavelIcon = () => /* @__PURE__ */ 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: [
415
+ /* @__PURE__ */ jsx("path", { d: "m14 13-5 5 2 2 5-5-2-2Z" }),
416
+ /* @__PURE__ */ jsx("path", { d: "m3 21 2-2 5-5-2-2-5 5-2 2Z" }),
417
+ /* @__PURE__ */ jsx("path", { d: "m15 6 5 5-11 11-5-5L15 6Z" }),
418
+ /* @__PURE__ */ jsx("path", { d: "M13 2 18 7" })
419
+ ] });
420
+ const CpuIcon = () => /* @__PURE__ */ 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: [
421
+ /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }),
422
+ /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "6", height: "6" }),
423
+ /* @__PURE__ */ jsx("path", { d: "M15 2v2" }),
424
+ /* @__PURE__ */ jsx("path", { d: "M15 20v2" }),
425
+ /* @__PURE__ */ jsx("path", { d: "M2 15h2" }),
426
+ /* @__PURE__ */ jsx("path", { d: "M2 9h2" }),
427
+ /* @__PURE__ */ jsx("path", { d: "M20 15h2" }),
428
+ /* @__PURE__ */ jsx("path", { d: "M20 9h2" }),
429
+ /* @__PURE__ */ jsx("path", { d: "M9 2v2" }),
430
+ /* @__PURE__ */ jsx("path", { d: "M9 20v2" })
431
+ ] });
432
+ const CheckCircleIcon = () => /* @__PURE__ */ 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: [
433
+ /* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
434
+ /* @__PURE__ */ jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
435
+ ] });
436
+ return /* @__PURE__ */ jsxs(
437
+ "main",
438
+ {
439
+ role: "main",
440
+ className,
441
+ style: styles.container,
442
+ "aria-labelledby": "a11y-statement-title",
443
+ children: [
444
+ /* @__PURE__ */ jsxs("header", { style: styles.header, children: [
445
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
446
+ /* @__PURE__ */ jsx("a", { href: "https://holmdigital.se", style: styles.logoContainer, target: "_blank", rel: "noreferrer", children: logoUrl ? /* @__PURE__ */ jsx("img", { src: logoUrl, alt: "Holm Digital", style: { height: "3rem", width: "auto" } }) : /* @__PURE__ */ jsxs(Fragment, { children: [
447
+ /* @__PURE__ */ jsx(Logo, {}),
448
+ /* @__PURE__ */ jsx("span", { style: { marginLeft: "0.75rem", fontWeight: 700, fontSize: "1.25rem", color: "#0c4a6e" }, children: "HolmDigital" })
449
+ ] }) }),
450
+ /* @__PURE__ */ jsx("div", { style: styles.divider, "aria-hidden": "true" }),
451
+ /* @__PURE__ */ jsxs("a", { href: "https://holmdigital.se", style: styles.websiteContainer, target: "_blank", rel: "noreferrer", children: [
452
+ /* @__PURE__ */ jsx("span", { style: { backgroundColor: "#f1f5f9", padding: "0.25rem", borderRadius: "0.375rem", display: "flex" }, children: /* @__PURE__ */ 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: [
453
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
454
+ /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
455
+ /* @__PURE__ */ 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" })
456
+ ] }) }),
457
+ /* @__PURE__ */ jsxs("span", { children: [
458
+ "holmdigital",
459
+ /* @__PURE__ */ jsx("span", { style: { color: "#0284c7" }, children: ".se" })
460
+ ] })
461
+ ] })
462
+ ] }),
463
+ badgeUrl && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx("img", { src: badgeUrl, alt: "Accessibility Badge", style: { height: "1.5rem", width: "auto" } }) })
464
+ ] }),
465
+ /* @__PURE__ */ jsxs("div", { className: "statement-content", children: [
466
+ /* @__PURE__ */ jsxs("header", { style: { marginBottom: "4rem" }, children: [
467
+ /* @__PURE__ */ jsx("h1", { id: "a11y-statement-title", style: styles.mainHeading, children: renderTemplate(template.title) }),
468
+ /* @__PURE__ */ jsxs("div", { style: styles.metaData, children: [
469
+ /* @__PURE__ */ jsxs("span", { children: [
470
+ lang === "sv" ? "Status:" : "Status:",
471
+ " ",
472
+ /* @__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" })
473
+ ] }),
474
+ /* @__PURE__ */ jsx("span", { style: { color: "#e2e8f0" }, children: "|" }),
475
+ /* @__PURE__ */ jsxs("span", { children: [
476
+ lang === "sv" ? "Uppdaterad:" : "Updated:",
477
+ " ",
478
+ d(lastReviewDate)
479
+ ] })
480
+ ] })
481
+ ] }),
482
+ /* @__PURE__ */ jsx("p", { style: { ...styles.paragraph, fontSize: "1.25rem", color: "#1e293b", fontWeight: 500, marginBottom: "4rem" }, children: renderTemplate(template.intro) }),
483
+ renderSections(template.sections)
484
+ ] }),
485
+ /* @__PURE__ */ jsx("footer", { style: { marginTop: "3rem", borderTop: "1px solid #e2e8f0", paddingTop: "1.5rem", fontSize: "0.875rem", color: "#64748b" }, children: /* @__PURE__ */ jsxs("p", { children: [
486
+ lang === "sv" ? "Genererad med hj\xE4lp av" : "Generated using",
487
+ " ",
488
+ /* @__PURE__ */ jsx("a", { href: usedTool?.url || "https://holmdigital.se", style: styles.link, target: "_blank", rel: "noopener noreferrer", children: usedTool?.name || "HolmDigital Engine" })
489
+ ] }) })
490
+ ]
491
+ }
492
+ );
493
+ };
494
+ AccessibilityStatement.displayName = "AccessibilityStatement";
495
+
496
+ export {
497
+ AccessibilityStatement
498
+ };