Deploying to gh-pages from @ 5e9a19c 🚀

nl-design-system · Jan 6, 2025 · 5e8d8d8 · 5e8d8d8
1 parent 6a88462
commit 5e8d8d8
Show file tree

Hide file tree

Showing 501 changed files with 541 additions and 541 deletions.
diff --git a/404.html b/404.html
@@ -25,7 +25,7 @@
 
   <link rel="search" type="application/opensearchdescription+xml" title="NL Design System" href="/opensearch.xml" />
   <link rel="stylesheet" href="/assets/css/styles.3f2a8047.css" />
-  <script src="/assets/js/runtime~main.a299b9ed.js" defer="defer"></script>
+  <script src="/assets/js/runtime~main.cc9886c5.js" defer="defer"></script>
   <script src="/assets/js/main.24921edd.js" defer="defer"></script>
  </head>
  <body class="navigation-with-keyboard">

diff --git a/CHANGELOG/index.html b/CHANGELOG/index.html
@@ -27,7 +27,7 @@
 
   <link rel="search" type="application/opensearchdescription+xml" title="NL Design System" href="/opensearch.xml" />
   <link rel="stylesheet" href="/assets/css/styles.3f2a8047.css" />
-  <script src="/assets/js/runtime~main.a299b9ed.js" defer="defer"></script>
+  <script src="/assets/js/runtime~main.cc9886c5.js" defer="defer"></script>
   <script src="/assets/js/main.24921edd.js" defer="defer"></script>
  </head>
  <body class="navigation-with-keyboard">

diff --git a/Calendar/index.html b/Calendar/index.html
@@ -28,7 +28,7 @@
 
   <link rel="search" type="application/opensearchdescription+xml" title="NL Design System" href="/opensearch.xml" />
   <link rel="stylesheet" href="/assets/css/styles.3f2a8047.css" />
-  <script src="/assets/js/runtime~main.a299b9ed.js" defer="defer"></script>
+  <script src="/assets/js/runtime~main.cc9886c5.js" defer="defer"></script>
   <script src="/assets/js/main.24921edd.js" defer="defer"></script>
  </head>
  <body class="navigation-with-keyboard">

diff --git a/accordion/index.html b/accordion/index.html
@@ -28,7 +28,7 @@
 
   <link rel="search" type="application/opensearchdescription+xml" title="NL Design System" href="/opensearch.xml" />
   <link rel="stylesheet" href="/assets/css/styles.3f2a8047.css" />
-  <script src="/assets/js/runtime~main.a299b9ed.js" defer="defer"></script>
+  <script src="/assets/js/runtime~main.cc9886c5.js" defer="defer"></script>
   <script src="/assets/js/main.24921edd.js" defer="defer"></script>
  </head>
  <body class="navigation-with-keyboard">

diff --git a/action-group/index.html b/action-group/index.html
@@ -28,7 +28,7 @@
 
   <link rel="search" type="application/opensearchdescription+xml" title="NL Design System" href="/opensearch.xml" />
   <link rel="stylesheet" href="/assets/css/styles.3f2a8047.css" />
-  <script src="/assets/js/runtime~main.a299b9ed.js" defer="defer"></script>
+  <script src="/assets/js/runtime~main.cc9886c5.js" defer="defer"></script>
   <script src="/assets/js/main.24921edd.js" defer="defer"></script>
  </head>
  <body class="navigation-with-keyboard">

diff --git a/alert-dialog/index.html b/alert-dialog/index.html
@@ -28,7 +28,7 @@
 
   <link rel="search" type="application/opensearchdescription+xml" title="NL Design System" href="/opensearch.xml" />
   <link rel="stylesheet" href="/assets/css/styles.3f2a8047.css" />
-  <script src="/assets/js/runtime~main.a299b9ed.js" defer="defer"></script>
+  <script src="/assets/js/runtime~main.cc9886c5.js" defer="defer"></script>
   <script src="/assets/js/main.24921edd.js" defer="defer"></script>
  </head>
  <body class="navigation-with-keyboard">

diff --git a/alert/index.html b/alert/index.html
@@ -28,7 +28,7 @@
 
   <link rel="search" type="application/opensearchdescription+xml" title="NL Design System" href="/opensearch.xml" />
   <link rel="stylesheet" href="/assets/css/styles.3f2a8047.css" />
-  <script src="/assets/js/runtime~main.a299b9ed.js" defer="defer"></script>
+  <script src="/assets/js/runtime~main.cc9886c5.js" defer="defer"></script>
   <script src="/assets/js/main.24921edd.js" defer="defer"></script>
  </head>
  <body class="navigation-with-keyboard">

diff --git a/assets/js/00d58dcc.6672c88e.js → assets/js/00d58dcc.d7860a15.js b/assets/js/00d58dcc.6672c88e.js → assets/js/00d58dcc.d7860a15.js
@@ -27,7 +27,7 @@
     ];
    function b(e) {
     const n = { a: 'a', h2: 'h2', li: 'li', p: 'p', ul: 'ul', ...(0, t.a)(), ...e.components };
-    return (0, i.jsxs)(i.Fragment, { children: ['\n', '\n', '\n', (0, i.jsx)(s.j, { level: 1, conformanceLevel: 'Niveau A', children: 'WCAG-succescriterium 2.4.3 Focus volgorde' }), '\n', (0, i.jsx)(n.h2, { id: 'uitleg', children: 'Uitleg' }), '\n', (0, i.jsx)(h.ZP, {}), '\n', (0, i.jsx)(n.p, { children: 'Een voorspelbare focus volgorde is belangrijk voor toetsenbordgebruikers. Zij kunnen dan bijvoorbeeld makkelijker binnen een pagina links of buttons ontdekken of een formulier invullen.' }), '\n', (0, i.jsx)(n.p, { children: 'Zorg ervoor dat de natuurlijke tabvolgorde bij de verschillende resoluties, schermbreedtes en ori\xebntaties logisch blijft.' }), '\n', (0, i.jsx)(n.p, { children: "Met het tabindex attribuut kan de volgorde ook specifiek worden ingesteld per element, maar dat raden we af, omdat je dan voor elk element op de pagina zo'n tabindex zou moeten zetten, en het is bijna onmogelijk dat goed te doen, zeker bij verschillende resoluties, schermbreedtes en ori\xebntaties." }), '\n', (0, i.jsxs)(n.p, { children: ['Voor een Nederlandstalige website is leesvolgorde van links naar rechts en van boven naar beneden. Zorg er dan voor dat ook de tabvolgorde van links naar rechts en van boven naar beneden is. Voor bijvoorbeeld Hebreeuws of Arabisch kan deze volgorde anders zijn. Laat de tabvolgorde die van de taalinstelling en ', (0, i.jsx)(n.a, { href: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir', children: 'leesrichting' }), ' volgen.'] }), '\n', (0, i.jsx)(n.h2, { id: 'gerelateerde-nl-design-system-richtlijnen', children: 'Gerelateerde NL Design System-richtlijnen' }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsxs)(n.li, { children: ['Formulieren - Toetsenbordnavigatie: ', (0, i.jsx)(n.a, { href: '/richtlijnen/formulieren/toetsenbord/', children: 'Gebruik geen positieve tabindex' }), '.'] }), '\n', (0, i.jsxs)(n.li, { children: ['Formulieren - Meerdere stappen: ', (0, i.jsx)(n.a, { href: '/richtlijnen/formulieren/meerdere-stappen/consistente-benaming', children: 'Zorg voor een consistente navigatie en benaming van links en buttons' }), '.'] }), '\n', (0, i.jsxs)(n.li, { children: ['Formulieren - Visueel ontwerp: ', (0, i.jsx)(n.a, { href: '/visueel-ontwerp/focus-goed-zichtbaar', children: 'Maak toetsenbord focus goed zichtbaar' }), '.'] }), '\n'] }), '\n', (0, i.jsx)(n.h2, { id: 'gebruikersonderzoek', children: 'Gebruikersonderzoek' }), '\n', (0, i.jsx)(a.ZP, {}), '\n', (0, i.jsx)(n.h2, { id: 'hoe-te-testen', children: 'Hoe te testen' }), '\n', (0, i.jsx)(n.p, { children: 'Tab met het toetsenbord door de pagina en controleer of de tabvolgorde logisch en zoals verwacht is.\nDe tabvolgorde moet voor elk type weergave logisch, zichtbaar en voorspelbaar zijn en niet alleen voor een breed scherm op hoge resolutie.' }), '\n', (0, i.jsx)(n.p, { children: 'Let vooral op als de volgorde voor een andere weergave wordt aangepast via CSS met grid of flexbox.' }), '\n', (0, i.jsx)(n.p, { children: 'Aanvullende testen:' }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'Tab ook terug met shift-tab, werkt dat ook voorspelbaar?' }), '\n', (0, i.jsx)(n.li, { children: 'Controleer dialogs zoals het responsive menu. Is de tabvolgorde logisch. Keert bij het sluiten de focus terug naar de button om het dialog te openen?' }), '\n', (0, i.jsx)(n.li, { children: 'Test bij verschillende schermbreedtes en ori\xebntaties (landscape/portrait).' }), '\n', (0, i.jsx)(n.li, { children: 'Zoom in tot 400% en check de tabvolgorde.' }), '\n', (0, i.jsx)(n.li, { children: 'Controleer dynamisch toegevoegde inhoud, zoals extra formuliervelden bij het selecteren van optie of een uitklapmenu.' }), '\n'] }), '\n', (0, i.jsx)(n.h2, { id: 'w3c-referenties', children: 'W3C referenties' }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsxs)(n.li, { children: ['Engelse tekst van het WCAG-succescriterium: ', (0, i.jsx)(n.a, { href: 'https://www.w3.org/TR/WCAG22/#focus-order', children: (0, i.jsx)('span', { lang: 'en', children: '2.4.3 Focus Order' }) }), '.'] }), '\n', (0, i.jsxs)(n.li, { children: ['Nederlandse vertaling van het WCAG-succescriterium: ', (0, i.jsx)(n.a, { href: 'https://www.w3.org/Translations/WCAG22-nl/#focus-volgorde', children: '2.4.3 Focus volgorde' }), '.'] }), '\n', (0, i.jsxs)(n.li, { children: ['Engelstalige informatie op ', (0, i.jsx)('span', { lang: 'en', children: 'How to Meet WCAG' }), ': ', (0, i.jsx)(n.a, { href: 'https://www.w3.org/WAI/WCAG22/quickref/#focus-order', children: (0, i.jsx)('span', { lang: 'en', children: 'Quick Reference 2.4.3 Focus Order' }) }), '.'] }), '\n', (0, i.jsxs)(n.li, { children: ['Engelstalige toelichting: ', (0, i.jsx)(n.a, { href: 'https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html', children: (0, i.jsx)('span', { lang: 'en', children: 'Understanding SC 2.4.3 Focus Order' }) }), '.'] }), '\n'] }), '\n', (0, i.jsx)(l.CY, { children: (0, i.jsx)(o.U, { omitH1: !0, headinglevel: 3, children: (0, i.jsx)(d.ZP, {}) }) }), '\n', (0, i.jsx)(n.h2, { id: 'help-richtlijn-verbeteren', children: 'Help richtlijn verbeteren' }), '\n', (0, i.jsx)(o.U, { omitH1: !0, headinglevel: 3, children: (0, i.jsx)(c.ZP, {}) })] });
+    return (0, i.jsxs)(i.Fragment, { children: ['\n', '\n', '\n', (0, i.jsx)(s.j, { level: 1, conformanceLevel: 'Niveau A', children: 'WCAG-succescriterium 2.4.3 Focus volgorde' }), '\n', (0, i.jsx)(n.h2, { id: 'uitleg', children: 'Uitleg' }), '\n', (0, i.jsx)(h.ZP, {}), '\n', (0, i.jsx)(n.p, { children: 'Een voorspelbare focus volgorde is belangrijk voor toetsenbordgebruikers. Zij kunnen dan bijvoorbeeld makkelijker binnen een pagina links of buttons ontdekken of een formulier invullen.' }), '\n', (0, i.jsx)(n.p, { children: 'Zorg ervoor dat de natuurlijke tabvolgorde bij de verschillende resoluties, schermbreedtes en ori\xebntaties logisch blijft.' }), '\n', (0, i.jsx)(n.p, { children: "Met het tabindex attribuut kan de volgorde ook specifiek worden ingesteld per element, maar dat raden we af, omdat je dan voor elk element op de pagina zo'n tabindex zou moeten zetten, en het is bijna onmogelijk dat goed te doen, zeker bij verschillende resoluties, schermbreedtes en ori\xebntaties." }), '\n', (0, i.jsxs)(n.p, { children: ['Voor een Nederlandstalige website is leesvolgorde van links naar rechts en van boven naar beneden. Zorg er dan voor dat ook de tabvolgorde van links naar rechts en van boven naar beneden is. Voor bijvoorbeeld Hebreeuws of Arabisch kan deze volgorde anders zijn. Laat de tabvolgorde die van de taalinstelling en ', (0, i.jsx)(n.a, { href: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir', children: 'leesrichting' }), ' volgen.'] }), '\n', (0, i.jsx)(n.h2, { id: 'gerelateerde-nl-design-system-richtlijnen', children: 'Gerelateerde NL Design System-richtlijnen' }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsxs)(n.li, { children: ['Formulieren - Toetsenbordnavigatie: ', (0, i.jsx)(n.a, { href: '/richtlijnen/formulieren/toetsenbord/', children: 'Gebruik geen positieve tabindex' }), '.'] }), '\n', (0, i.jsxs)(n.li, { children: ['Formulieren - Meerdere stappen: ', (0, i.jsx)(n.a, { href: '/richtlijnen/formulieren/meerdere-stappen/consistente-benaming', children: 'Zorg voor een consistente navigatie en benaming van links en buttons' }), '.'] }), '\n', (0, i.jsxs)(n.li, { children: ['Formulieren - Visueel ontwerp: ', (0, i.jsx)(n.a, { href: '/visueel-ontwerp/focus-goed-zichtbaar', children: 'Maak toetsenbordfocus goed zichtbaar' }), '.'] }), '\n'] }), '\n', (0, i.jsx)(n.h2, { id: 'gebruikersonderzoek', children: 'Gebruikersonderzoek' }), '\n', (0, i.jsx)(a.ZP, {}), '\n', (0, i.jsx)(n.h2, { id: 'hoe-te-testen', children: 'Hoe te testen' }), '\n', (0, i.jsx)(n.p, { children: 'Tab met het toetsenbord door de pagina en controleer of de tabvolgorde logisch en zoals verwacht is.\nDe tabvolgorde moet voor elk type weergave logisch, zichtbaar en voorspelbaar zijn en niet alleen voor een breed scherm op hoge resolutie.' }), '\n', (0, i.jsx)(n.p, { children: 'Let vooral op als de volgorde voor een andere weergave wordt aangepast via CSS met grid of flexbox.' }), '\n', (0, i.jsx)(n.p, { children: 'Aanvullende testen:' }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'Tab ook terug met shift-tab, werkt dat ook voorspelbaar?' }), '\n', (0, i.jsx)(n.li, { children: 'Controleer dialogs zoals het responsive menu. Is de tabvolgorde logisch. Keert bij het sluiten de focus terug naar de button om het dialog te openen?' }), '\n', (0, i.jsx)(n.li, { children: 'Test bij verschillende schermbreedtes en ori\xebntaties (landscape/portrait).' }), '\n', (0, i.jsx)(n.li, { children: 'Zoom in tot 400% en check de tabvolgorde.' }), '\n', (0, i.jsx)(n.li, { children: 'Controleer dynamisch toegevoegde inhoud, zoals extra formuliervelden bij het selecteren van optie of een uitklapmenu.' }), '\n'] }), '\n', (0, i.jsx)(n.h2, { id: 'w3c-referenties', children: 'W3C referenties' }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsxs)(n.li, { children: ['Engelse tekst van het WCAG-succescriterium: ', (0, i.jsx)(n.a, { href: 'https://www.w3.org/TR/WCAG22/#focus-order', children: (0, i.jsx)('span', { lang: 'en', children: '2.4.3 Focus Order' }) }), '.'] }), '\n', (0, i.jsxs)(n.li, { children: ['Nederlandse vertaling van het WCAG-succescriterium: ', (0, i.jsx)(n.a, { href: 'https://www.w3.org/Translations/WCAG22-nl/#focus-volgorde', children: '2.4.3 Focus volgorde' }), '.'] }), '\n', (0, i.jsxs)(n.li, { children: ['Engelstalige informatie op ', (0, i.jsx)('span', { lang: 'en', children: 'How to Meet WCAG' }), ': ', (0, i.jsx)(n.a, { href: 'https://www.w3.org/WAI/WCAG22/quickref/#focus-order', children: (0, i.jsx)('span', { lang: 'en', children: 'Quick Reference 2.4.3 Focus Order' }) }), '.'] }), '\n', (0, i.jsxs)(n.li, { children: ['Engelstalige toelichting: ', (0, i.jsx)(n.a, { href: 'https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html', children: (0, i.jsx)('span', { lang: 'en', children: 'Understanding SC 2.4.3 Focus Order' }) }), '.'] }), '\n'] }), '\n', (0, i.jsx)(l.CY, { children: (0, i.jsx)(o.U, { omitH1: !0, headinglevel: 3, children: (0, i.jsx)(d.ZP, {}) }) }), '\n', (0, i.jsx)(n.h2, { id: 'help-richtlijn-verbeteren', children: 'Help richtlijn verbeteren' }), '\n', (0, i.jsx)(o.U, { omitH1: !0, headinglevel: 3, children: (0, i.jsx)(c.ZP, {}) })] });
    }
    function m(e = {}) {
     const { wrapper: n } = { ...(0, t.a)(), ...e.components };

diff --git a/assets/js/06235a00.7852ee6a.js → assets/js/06235a00.38064d9d.js b/assets/js/06235a00.7852ee6a.js → assets/js/06235a00.38064d9d.js
@@ -33,7 +33,7 @@
     ];
    function b(e) {
     const n = { a: 'a', h2: 'h2', li: 'li', p: 'p', ul: 'ul', ...(0, r.a)(), ...e.components };
-    return (0, t.jsxs)(t.Fragment, { children: ['\n', '\n', '\n', (0, t.jsx)(o.j, { level: 1, conformanceLevel: 'Niveau AA', children: 'WCAG-succescriterium 3.2.4 Consistente identificatie' }), '\n', (0, t.jsx)(n.h2, { id: 'uitleg', children: 'Uitleg' }), '\n', (0, t.jsx)(u, {}), '\n', (0, t.jsx)(n.h2, { id: 'opgelet', children: 'Opgelet' }), '\n', (0, t.jsx)(n.p, { children: 'Deze inhoud wordt binnenkort aangevuld met uitgebreidere uitleg, bronnen en informatie over hoe te testen.' }), '\n', (0, t.jsx)(n.h2, { id: 'gebruikersonderzoek', children: 'Gebruikersonderzoek' }), '\n', (0, t.jsx)(c.ZP, {}), '\n', (0, t.jsx)(n.h2, { id: 'w3c-referenties', children: 'W3C referenties' }), '\n', (0, t.jsxs)(n.ul, { children: ['\n', (0, t.jsxs)(n.li, { children: ['Engelse tekst van het WCAG-succescriterium: ', (0, t.jsx)(n.a, { href: 'https://www.w3.org/TR/WCAG22/#consistent-identification', children: (0, t.jsx)('span', { lang: 'en', children: '3.2.4 Consistente Identification' }) }), '.'] }), '\n', (0, t.jsxs)(n.li, { children: ['Nederlandse vertaling van het WCAG-succescriterium: ', (0, t.jsx)(n.a, { href: 'https://www.w3.org/Translations/WCAG22-nl/#consistente-identificatie', children: '3.2.4 Consistente identificatie' }), '.'] }), '\n', (0, t.jsxs)(n.li, { children: ['Engelstalige informatie op ', (0, t.jsx)('span', { lang: 'en', children: 'How to Meet WCAG' }), ': ', (0, t.jsx)(n.a, { href: 'https://www.w3.org/WAI/WCAG22/quickref/#consistent-identification', children: (0, t.jsx)('span', { lang: 'en', children: 'Quick Reference 3.2.4 Consistente Identification' }) }), '.'] }), '\n', (0, t.jsxs)(n.li, { children: ['Engelstalige toelichting: ', (0, t.jsx)(n.a, { href: 'https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification.html', children: (0, t.jsx)('span', { lang: 'en', children: 'Understanding SC 3.2.4 Consistente Identification' }) }), '.'] }), '\n'] }), '\n', (0, t.jsx)(l.CY, { children: (0, t.jsx)(s.U, { omitH1: !0, headinglevel: 3, children: (0, t.jsx)(d.ZP, {}) }) }), '\n', (0, t.jsx)(n.h2, { id: 'help-richtlijn-verbeteren', children: 'Help richtlijn verbeteren' }), '\n', (0, t.jsx)(s.U, { omitH1: !0, headinglevel: 3, children: (0, t.jsx)(a.ZP, {}) })] });
+    return (0, t.jsxs)(t.Fragment, { children: ['\n', '\n', '\n', (0, t.jsx)(o.j, { level: 1, conformanceLevel: 'Niveau AA', children: 'WCAG-succescriterium 3.2.4 Consistente identificatie' }), '\n', (0, t.jsx)(n.h2, { id: 'uitleg', children: 'Uitleg' }), '\n', (0, t.jsx)(u, {}), '\n', (0, t.jsx)(n.h2, { id: 'opgelet', children: 'Opgelet' }), '\n', (0, t.jsx)(n.p, { children: 'Deze inhoud wordt binnenkort aangevuld met uitgebreidere uitleg, bronnen en informatie over hoe te testen.' }), '\n', (0, t.jsx)(n.h2, { id: 'gebruikersonderzoek', children: 'Gebruikersonderzoek' }), '\n', (0, t.jsx)(c.ZP, {}), '\n', (0, t.jsx)(n.h2, { id: 'w3c-referenties', children: 'W3C referenties' }), '\n', (0, t.jsxs)(n.ul, { children: ['\n', (0, t.jsxs)(n.li, { children: ['Engelse tekst van het WCAG-succescriterium: ', (0, t.jsx)(n.a, { href: 'https://www.w3.org/TR/WCAG22/#consistent-identification', children: (0, t.jsx)('span', { lang: 'en', children: '3.2.4 Consistent Identification' }) }), '.'] }), '\n', (0, t.jsxs)(n.li, { children: ['Nederlandse vertaling van het WCAG-succescriterium: ', (0, t.jsx)(n.a, { href: 'https://www.w3.org/Translations/WCAG22-nl/#-identificatie', children: '3.2.4 Consistente identificatie' }), '.'] }), '\n', (0, t.jsxs)(n.li, { children: ['Engelstalige informatie op ', (0, t.jsx)('span', { lang: 'en', children: 'How to Meet WCAG' }), ': ', (0, t.jsx)(n.a, { href: 'https://www.w3.org/WAI/WCAG22/quickref/#consistent-identification', children: (0, t.jsx)('span', { lang: 'en', children: 'Quick Reference 3.2.4 Consistent Identification' }) }), '.'] }), '\n', (0, t.jsxs)(n.li, { children: ['Engelstalige toelichting: ', (0, t.jsx)(n.a, { href: 'https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification.html', children: (0, t.jsx)('span', { lang: 'en', children: 'Understanding SC 3.2.4 Consistent Identification' }) }), '.'] }), '\n'] }), '\n', (0, t.jsx)(l.CY, { children: (0, t.jsx)(s.U, { omitH1: !0, headinglevel: 3, children: (0, t.jsx)(d.ZP, {}) }) }), '\n', (0, t.jsx)(n.h2, { id: 'help-richtlijn-verbeteren', children: 'Help richtlijn verbeteren' }), '\n', (0, t.jsx)(s.U, { omitH1: !0, headinglevel: 3, children: (0, t.jsx)(a.ZP, {}) })] });
    }
    function w(e = {}) {
     const { wrapper: n } = { ...(0, r.a)(), ...e.components };